VARASYS/metronome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pm-mobile: logo + header icons are a full-width top bar in both orientations

Browse source 
Unwrap the #topctl grouping so #brandrow (logo + share/help/theme/fullscreen)
is always its own full-width row at the very top. In landscape it spans the
full width on its own line (flex 1 1 100%) while volume + the pickers share the
line below, instead of being squeezed into a side column.

Controls help now highlights the union of the brand bar + volume row.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Me Here 2026-06-07 17:03:05 -05:00
parent 2e57b4c507
commit 7b11ebdd59
1 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
mobile.html
View file

@ -60,9 +60,10 @@
@media (display-mode:standalone){ #app{ --pad:26px; padding-top:max(20px,env(safe-area-inset-top)); padding-bottom:max(16px,env(safe-area-inset-bottom)); } }
/* ---- top ---- */
/* the logo + header-icon row is always a full-width bar at the very top, in
both orientations — it never joins the side-by-side landscape header flow */
#top{ flex:0 0 auto; display:flex; flex-direction:column; gap:11px; }
#topctl{ display:flex; flex-direction:column; gap:11px; }
#brandrow{ display:flex; align-items:center; gap:10px; }
#brandrow{ flex:0 0 auto; display:flex; align-items:center; gap:10px; width:100%; }
#logoLink{ display:inline-flex; opacity:.9; }
.brandlogo{ height:clamp(21px,4.2vmin,30px); width:auto; display:block; }
.hicons{ display:flex; align-items:center; gap:8px; margin-left:auto; }
@ -200,7 +201,8 @@
@media (orientation:landscape){
#app{ --maxw:1060px; }
#top{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:8px 14px; }
#topctl{ flex:1 1 320px; gap:8px; }
#brandrow{ flex:1 1 100%; }
#top .vol{ flex:1 1 220px; width:auto; min-width:0; }
#top .sels{ flex:2 1 320px; min-width:0; }
#mid{ display:grid; align-items:stretch; gap:8px 4vw; padding-top:0;
grid-template-columns:40% 60%; grid-template-rows:auto 1fr auto;
@ -264,7 +266,6 @@
<div id="app">
<div id="top">
<div id="topctl">
<div id="brandrow">
<a id="logoLink" href="https://codeberg.org/VARASYS/metronome" target="_blank" rel="noopener" title="VARASYS PolyMeter — source on Codeberg"><img class="brandlogo logo-dark" src="data:image/png;base64,@BUILD:logo-side-dark@" alt="VARASYS PolyMeter" /><img class="brandlogo logo-light" src="data:image/png;base64,@BUILD:logo-side-light@" alt="VARASYS PolyMeter" /></a>
<div class="hicons" id="utilrow">
@ -274,8 +275,7 @@
<div class="icon" id="fsBtn" title="Full screen" aria-label="Full screen">⛶</div>
</div>
</div>
<div class="vol"><span class="dyn" aria-hidden="true">p</span><input id="vol" type="range" min="0" max="100" value="85" aria-label="Volume" /><span class="dyn" aria-hidden="true">f</span></div>
</div>
<div class="vol" id="volrow"><span class="dyn" aria-hidden="true">p</span><input id="vol" type="range" min="0" max="100" value="85" aria-label="Volume" /><span class="dyn" aria-hidden="true">f</span></div>
<div class="sels">
<label class="sel"><span>Set list</span><select id="slSel"></select></label>
<label class="sel"><span>Track</span><select id="trkSel"></select></label>
@ -843,7 +843,7 @@ function loadFromHash(text){
/* ========================= HELP TOUR ========================================= */
const TOUR=[
{sel:"#topctl", title:"Controls", text:"The ↑ share menu, ? to replay this tour, ◐ light/dark theme, ⛶ full screen, and the full-width volume slider (soft p → loud f)."},
{sel:"#brandrow,#volrow", title:"Controls", text:"The ↑ share menu, ? to replay this tour, ◐ light/dark theme, ⛶ full screen, and the full-width volume slider (soft p → loud f)."},
{sel:".sels", title:"Pick what to play", text:"Choose a set list and the track within it. Tracks are your practice items — name them for whatever you're working on, even if two share the same beat."},
{sel:"#saveBtn", title:"Save & library", text:"Save the current track — “Save as new”, or “Update” one of yours. The same sheet is your library: make set lists and rename / reorder / delete tracks. It all lives with the full editor too."},
{sel:"#trackpanel", title:"Track settings", text:"Optional per-track extras (above the tempo): Repeat for N bars then stop / next / prev track, a tempo ramp, and practice gaps."},