pm-mobile: reorder layout — header (logo/icons + volume) full width, body grouped by track
Per UX review + user decisions: - Header is just the logo/icon row then a full-width volume row, in both orientations (selector moved out of the header). - Portrait body order: BPM -> set/track/save -> repeat/ramp/gap -> lanes -> transport -> journal, so a track's identity, settings and lanes stay grouped. - Landscape keeps a 2-column body (tempo + transport left; selector + settings + lanes right) to avoid the cramped single-stack overlap; header rows stay full width. - Help tour reordered to match (Tempo now follows Controls). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Me Here
parent
7b11ebdd59
commit
027202e154
1 changed files with 22 additions and 24 deletions
46
mobile.html
46
mobile.html
|
|
@ -68,7 +68,7 @@
|
|||
.brandlogo{ height:clamp(21px,4.2vmin,30px); width:auto; display:block; }
|
||||
.hicons{ display:flex; align-items:center; gap:8px; margin-left:auto; }
|
||||
.hicons .icon{ width:36px; height:36px; font-size:16px; }
|
||||
.sels{ display:flex; gap:8px; align-items:flex-end; }
|
||||
.sels{ width:100%; display:flex; gap:8px; align-items:flex-end; }
|
||||
.sel{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; }
|
||||
.sel > span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-left:3px; }
|
||||
.sel select{ width:100%; background:var(--field-bg); color:var(--txt); border:1px solid var(--field-bd); border-radius:10px; padding:10px 8px; font-size:15px; }
|
||||
|
|
@ -196,19 +196,17 @@
|
|||
.tbtn.prac{ background:linear-gradient(180deg,#1c87b8,#136488); border-color:#1f9bd0; color:#eaf8ff; }
|
||||
.tbtn.prac.on{ background:linear-gradient(180deg,#c8922a,#9c6f12); border-color:#e0a93a; color:#fff; }
|
||||
|
||||
/* landscape (phone AND tablet — same layout, just scaled): 2-column grid —
|
||||
pulse + transport on the left, panel + lanes on the right */
|
||||
/* landscape (phone AND tablet): header stays a full-width column (logo+icons
|
||||
row, then volume row); the body becomes a 2-column grid — tempo + transport
|
||||
on the left, selector + settings + lanes on the right */
|
||||
@media (orientation:landscape){
|
||||
#app{ --maxw:1060px; }
|
||||
#top{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:8px 14px; }
|
||||
#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;
|
||||
grid-template-areas:"stage panel" "stage detail" "transport detail"; }
|
||||
#trackpanel{ grid-area:panel; align-self:start; }
|
||||
grid-template-columns:40% 60%; grid-template-rows:auto auto 1fr auto;
|
||||
grid-template-areas:"stage sels" "stage panel" "stage detail" "transport detail"; }
|
||||
#stage{ grid-area:stage; align-self:center; justify-content:center; }
|
||||
.sels{ grid-area:sels; align-self:start; }
|
||||
#trackpanel{ grid-area:panel; align-self:start; }
|
||||
#detail{ grid-area:detail; align-self:stretch; width:auto; max-width:none; max-height:none; min-height:0; overflow-y:auto; }
|
||||
#transport{ grid-area:transport; align-self:end; max-height:none; margin-top:0; }
|
||||
.tbtn{ min-height:0; height:clamp(34px,10vmin,54px); }
|
||||
|
|
@ -276,14 +274,23 @@
|
|||
</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>
|
||||
|
||||
<div id="mid">
|
||||
<div id="stage">
|
||||
<div id="pulse">
|
||||
<button id="bTapBtn" class="tapbtn" title="Tap tempo">TAP</button>
|
||||
<div id="bpm"><span id="bpmNum">120</span><span id="bpmlab">BPM</span></div>
|
||||
<input id="bpmIn" type="number" inputmode="numeric" min="30" max="300" />
|
||||
<div id="wheel" title="Drag to set tempo" aria-label="Tempo wheel"></div>
|
||||
</div>
|
||||
<div id="meterline"></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>
|
||||
<div class="icon" id="saveBtn" title="Save & library" aria-label="Save and library"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 4 H15 L19 8 V20 H5 Z"/><path d="M8.5 4 V8 H13.5 V4"/><rect x="8" y="13" width="8" height="7"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mid">
|
||||
<div id="trackpanel">
|
||||
<div class="tp-row">
|
||||
<label class="tp-chk"><input type="checkbox" id="ipRepeat" /> Repeat</label>
|
||||
|
|
@ -294,15 +301,6 @@
|
|||
<div class="tp-sub off" id="ipRampRow"><input id="ipRampStart" type="number" min="30" max="300" /> → +<input id="ipRampAmt" type="number" min="1" max="50" /> bpm / <input id="ipRampEvery" type="number" min="1" max="64" /> bars</div>
|
||||
<div class="tp-sub off" id="ipGapRow"><input id="ipGapPlay" type="number" min="1" max="32" /> play / <input id="ipGapMute" type="number" min="1" max="32" /> mute bars</div>
|
||||
</div>
|
||||
<div id="stage">
|
||||
<div id="pulse">
|
||||
<button id="bTapBtn" class="tapbtn" title="Tap tempo">TAP</button>
|
||||
<div id="bpm"><span id="bpmNum">120</span><span id="bpmlab">BPM</span></div>
|
||||
<input id="bpmIn" type="number" inputmode="numeric" min="30" max="300" />
|
||||
<div id="wheel" title="Drag to set tempo" aria-label="Tempo wheel"></div>
|
||||
</div>
|
||||
<div id="meterline"></div>
|
||||
</div>
|
||||
<div id="detail">
|
||||
<div id="lanes"></div>
|
||||
</div>
|
||||
|
|
@ -844,10 +842,10 @@ function loadFromHash(text){
|
|||
/* ========================= HELP TOUR ========================================= */
|
||||
const TOUR=[
|
||||
{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:"#pulse", title:"Tempo", text:"Tap the BPM to tap-tempo, press-and-hold to type an exact value, the TAP button to tap it out, or drag the wheel up/down to scrub."},
|
||||
{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."},
|
||||
{sel:"#pulse", title:"Tempo", text:"Tap the BPM to tap-tempo, press-and-hold to type an exact value, the TAP button to tap it out, or drag the wheel up/down to scrub."},
|
||||
{sel:"#trackpanel", title:"Track settings", text:"Optional per-track extras: Repeat for N bars then stop / next / prev track, a tempo ramp, and practice gaps."},
|
||||
{sel:"#lanes", title:"Edit the beat", text:"Each lane is a row of pads that blink on the beat — tap a pad to cycle rest → beat → accent → ghost. Tap a lane's label to set its note value (eighths, triplets, sixteenths…), sound, grouping, mute or polymeter. “+ Add lane” for more."},
|
||||
{sel:"#bDn10,#bDown,#bUp,#bUp10", title:"Nudge the tempo", text:"Step the BPM up or down while it keeps playing: −10 / −1 / +1 / +10. Great for settling on a comfortable speed or pushing it faster as you improve."},
|
||||
{sel:"#bPrev,#bNext", title:"Previous / next track", text:"⏮ and ⏭ move to the previous or next track in the current set list. If the metronome is running it carries straight on into the new track."},
|
||||
|
|
|
|||
Loading…
Reference in a new issue