From c0b6628488dd98070c59135bc865d3ff31076d06 Mon Sep 17 00:00:00 2001 From: Me Here Date: Sun, 24 May 2026 17:17:44 -0500 Subject: [PATCH] Layout: dock the set-list panel beside the metronome (push, not overlay) - App is now a flex shell (#app): the set-list panel docks as a sticky side column that pushes the metronome instead of floating over it. - Collapses via the header 'Set Lists' toggle; falls back to an overlay drawer below 820px. Defaults open on desktop, closed on mobile. Co-Authored-By: Claude Opus 4.7 (1M context) --- index.html | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 7e7244f..73b5a8a 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,8 @@ h1 { font-size:18px; font-weight:600; letter-spacing:.5px; margin:0 0 2px; } .sub { color:var(--muted); font-size:12px; margin-bottom:18px; } .kbd-legend { color:var(--muted); font-size:11px; font-family:"Courier New",monospace; text-align:right; } - .device { max-width:1000px; margin:0 auto; background:linear-gradient(180deg, var(--panel), var(--bg)); + #app { display:flex; gap:18px; max-width:1400px; margin:0 auto; align-items:flex-start; justify-content:center; } + .device { flex:1 1 auto; min-width:0; max-width:1000px; background:linear-gradient(180deg, var(--panel), var(--bg)); border:1px solid var(--edge); border-radius:16px; padding:18px; box-shadow:0 18px 50px rgba(0,0,0,.5); } .row { display:flex; gap:18px; flex-wrap:wrap; } .card { background:var(--panel-2); border:1px solid var(--edge); border-radius:12px; padding:13px; flex:1; min-width:240px; } @@ -104,9 +105,18 @@ .log-head { font-weight:600; font-size:13px; margin-bottom:3px; } .log-seg { font-size:12px; color:var(--muted); margin:2px 0 0 12px; font-family:"Courier New",monospace; } .practice { border-top:1px solid var(--edge); margin-top:16px; padding-top:4px; } - #routineToggle { position:fixed; top:16px; right:16px; z-index:40; background:#2c3a4d; border-color:#3b5168; color:#cfe3ff; font-weight:600; } - #routineTray { position:fixed; top:0; right:0; height:100%; width:380px; max-width:92vw; background:linear-gradient(180deg, var(--panel), var(--bg)); border-left:1px solid var(--edge); box-shadow:-12px 0 40px rgba(0,0,0,.45); transform:translateX(102%); transition:transform .25s ease; z-index:60; padding:18px; overflow:auto; } - #routineTray.open { transform:translateX(0); } + #routineToggle { background:#2c3a4d; border-color:#3b5168; color:#cfe3ff; font-weight:600; } + /* docked side panel: pushes the metronome (no overlap); sticky so it stays in view */ + #routineTray { display:none; flex:0 0 340px; align-self:flex-start; position:sticky; top:18px; + max-height:calc(100vh - 36px); overflow:auto; background:linear-gradient(180deg, var(--panel), var(--bg)); + border:1px solid var(--edge); border-radius:14px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.25); } + #routineTray.open { display:block; } + /* narrow screens: fall back to an overlay drawer */ + @media (max-width: 820px) { + #app { display:block; } + #routineTray { position:fixed; top:0; right:0; height:100%; max-height:none; width:min(360px,92vw); + border-radius:0; border:none; border-left:1px solid var(--edge); box-shadow:-12px 0 40px rgba(0,0,0,.45); z-index:60; } + } .tray-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .practice-col { border-left:1px solid var(--edge); padding-left:18px; } #themeBtn, #helpBtn { padding:4px 11px; } @@ -142,11 +152,13 @@ +

Stackable Metronome v0.0.1-dev

Space play · T tap · ↑↓ tempo (⇧×10) · A add · R set lists · N next · ? help +
@@ -206,9 +218,8 @@
Stopped.
- - -