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

pm-mobile: Controls help covers only icons+volume, not the pickers; drop logo from copy

Browse source 
Wrap the brand/icon row and volume slider in #topctl and aim the Controls
coachmark there, so the set-list / track pickers are no longer inside the
highlight. Reword the step to stop describing the logo.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Me Here 2026-06-07 15:44:44 -05:00
parent 355405d946
commit 4401be3c5d
1 changed files with 15 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
mobile.html
View file

@ -61,6 +61,7 @@
/* ---- top ---- */
#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; }
#logoLink{ display:inline-flex; opacity:.9; }
.brandlogo{ height:clamp(21px,4.2vmin,30px); width:auto; display:block; }
@ -198,10 +199,9 @@
pulse + transport on the left, panel + lanes on the right */
@media (orientation:landscape){
#app{ --maxw:1060px; }
#top{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 14px; }
#brandrow{ flex:1 1 100%; }
#top .vol{ order:2; flex:2 1 0; width:auto; min-width:0; }
#top .sels{ order:3; flex:3 1 0; min-width:0; }
#top{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:8px 14px; }
#topctl{ flex:1 1 320px; gap:8px; }
#top .sels{ flex:2 1 320px; min-width:0; }
#mid{ display:grid; align-items:center; gap:8px 4vw;
grid-template-columns:40% 60%; grid-template-rows:auto 1fr auto;
grid-template-areas:"panel detail" "stage detail" "transport detail"; }
@ -264,6 +264,7 @@
<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,6 +275,7 @@
</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="sels">
<label class="sel"><span>Set list</span><select id="slSel"></select></label>
<label class="sel"><span>Track</span><select id="trkSel"></select></label>
@ -841,7 +843,7 @@ function loadFromHash(text){
/* ========================= HELP TOUR ========================================= */
const TOUR=[
{sel:"#top", title:"Controls", text:"The top bar: the VARASYS logo, the ↑ share menu, ? to replay this tour, ◐ light/dark theme, ⛶ full screen, the full-width volume slider (soft p → loud f), and the set-list / track pickers."},
{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:".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."},