← back to Dead Agentabrams
Music room UI: collapse the sprawling controls into a hamburger-opened RIGHT drawer; Music Room + Videos collapsed by default (TK-11178)
e9d46a6d20f24daef2334cba66aa430d1d3860b9 · 2026-09-03 10:58:51 -0700 · Steve (via Claude)
- #dock is now a right slide-in drawer (vertical: Pause/Restart + mode toggles + sliders), hidden by default, opened by the top-right hamburger (repurposed the existing '☰ Controls' button + 'c' key from hide-all-chrome to toggle the drawer)
- Music Room defaults collapsed (data-open=false) on all widths
- Removed the blanket hide-chrome default so the collapsed panels + hamburger are the resting state; clean stage, video/scene unobstructed
- Verified layout via Playwright at 1280x800: dock off-screen by default, slides fully in on hamburger, panels collapsed, center stage clear
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012XLgczMhQr91Ad5jL38JM4
Files touched
Diff
commit e9d46a6d20f24daef2334cba66aa430d1d3860b9
Author: Steve (via Claude) <steve@designerwallcoverings.com>
Date: Thu Sep 3 10:58:51 2026 -0700
Music room UI: collapse the sprawling controls into a hamburger-opened RIGHT drawer; Music Room + Videos collapsed by default (TK-11178)
- #dock is now a right slide-in drawer (vertical: Pause/Restart + mode toggles + sliders), hidden by default, opened by the top-right hamburger (repurposed the existing '☰ Controls' button + 'c' key from hide-all-chrome to toggle the drawer)
- Music Room defaults collapsed (data-open=false) on all widths
- Removed the blanket hide-chrome default so the collapsed panels + hamburger are the resting state; clean stage, video/scene unobstructed
- Verified layout via Playwright at 1280x800: dock off-screen by default, slides fully in on hamburger, panels collapsed, center stage clear
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012XLgczMhQr91Ad5jL38JM4
---
room/index.html | 28 +++++++++++++++++++++-------
1 file changed, 21 insertions(+), 7 deletions(-)
diff --git a/room/index.html b/room/index.html
index 6326671..385f8c7 100644
--- a/room/index.html
+++ b/room/index.html
@@ -36,6 +36,20 @@
#stage.video-bg.yt-hero #scene{opacity:.16}
#stage.video-bg.yt-hero #orb{opacity:.5}
.btn:disabled,button:disabled{opacity:.42;cursor:not-allowed}
+ /* ---- Controls in a collapsed RIGHT drawer, opened by the top-right hamburger (TK-11178 UI) ---- */
+ #dock{
+ left:auto; right:0; top:0; bottom:auto; transform:translateX(100%);
+ height:100vh; width:min(90vw,340px); max-width:none; border-radius:0;
+ flex-direction:column; align-items:stretch; justify-content:flex-start; flex-wrap:nowrap;
+ gap:16px; padding:64px 18px 26px; overflow-y:auto;
+ border-left:1px solid var(--panel-edge); box-shadow:-14px 0 44px rgba(0,0,0,.55);
+ transition:transform .34s ease; z-index:11;
+ }
+ #dock .group{flex-direction:column; align-items:stretch; gap:10px}
+ #dock .group + .group{border-left:0; border-top:1px solid rgba(242,182,74,.16); padding:14px 0 0; margin-top:2px}
+ #dock .group.pillrow .toggle{flex-direction:column; align-items:stretch; gap:8px}
+ #dock .toggle .btn{justify-content:flex-start}
+ #stage.controls-open #dock{transform:translateX(0)}
/* construction-paper grain — the cutout/South-Park texture over the whole scene */
.grain{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.10;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@@ -307,7 +321,7 @@
<body>
<a href="#dock" class="skip">Skip to controls</a>
<a href="https://stage.agentabrams.com" class="backlink" id="backlink" aria-label="Back to The Main Stage">← The Main Stage</a>
-<main id="stage" class="hide-chrome" aria-label="Scarlet Riverboat Masquerade — an animated visual gallery you can steer with the controls and keyboard">
+<main id="stage" aria-label="Scarlet Riverboat Masquerade — an animated visual gallery you can steer with the controls and keyboard">
<h1 class="sr">Scarlet Riverboat Masquerade — an animated generative gallery</h1>
<!-- role removed from <main>: role="application" suppressed normal screen-reader navigation over the native controls + prose -->
@@ -323,8 +337,8 @@
<p class="chap" id="chapLabel">Chapter I · Departure</p>
</div>
- <section class="musicroom" id="musicroom" data-open="true" aria-label="Music room — Grateful Dead Live Music Archive">
- <header id="mrToggle" role="button" tabindex="0" aria-expanded="true" aria-controls="mrbody">
+ <section class="musicroom" id="musicroom" data-open="false" aria-label="Music room — Grateful Dead Live Music Archive">
+ <header id="mrToggle" role="button" tabindex="0" aria-expanded="false" aria-controls="mrbody">
<span class="live-dot" aria-hidden="true"></span>
<span>Music Room</span>
<span class="chev" aria-hidden="true">▾</span>
@@ -1543,10 +1557,10 @@ function announce(msg){ live.textContent=msg; }
const stageEl=document.getElementById('stage');
const chromeBtn=document.getElementById('chromeBtn');
function toggleChrome(){
- const hidden=stageEl.classList.toggle('hide-chrome');
- chromeBtn.setAttribute('aria-pressed', String(!hidden));
- chromeBtn.textContent = hidden ? '☰ Controls' : '✕ Close';
- announce(hidden ? 'Controls hidden.' : 'Controls shown.');
+ const open=stageEl.classList.toggle('controls-open');
+ chromeBtn.setAttribute('aria-pressed', String(open));
+ chromeBtn.textContent = open ? '✕ Close' : '☰ Controls';
+ announce(open ? 'Controls open.' : 'Controls closed.');
}
chromeBtn.addEventListener('click', toggleChrome);
← 93937cc Music room: make the concert video visible — pull scene canv
·
back to Dead Agentabrams
·
Music room UI: tuck chapters, camera views + Museum Label in ecd6824 →