From 4e0a68f35b318547df655545060c2b0c6b1878c9 Mon Sep 17 00:00:00 2001 From: Me Here Date: Mon, 8 Jun 2026 06:21:26 -0500 Subject: [PATCH] pm-mobile: fix landscape right-edge overflow + per-lane mute toggle - Landscape grid used 40%/60% columns plus a 4vw gap, summing past 100% and overhanging the right edge. Switch to minmax(0,2fr)/minmax(0,3fr) so the gap is subtracted before sizing, add min-width:0 to grid items, and widen the inter-section (row) gaps. Bump the portrait section gap too. - Add an inline speaker mute button at the left of every lane for quick selective muting; muted lanes dim the label/pads but keep the toggle crisp. The lane sheet's Mute checkbox stays in sync (both flip m.enabled). - Help: note the lane mute toggle in the "Edit the beat" step. Co-Authored-By: Claude Opus 4.8 (1M context) --- mobile.html | 31 +++++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/mobile.html b/mobile.html index 7af8ccc..28d2748 100644 --- a/mobile.html +++ b/mobile.html @@ -81,7 +81,7 @@ .icon:active{ background:rgba(127,139,154,.30); } /* ---- middle: pulse + track panel + lanes + transport, centered as one block ---- */ - #mid{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:clamp(16px,3.6vmin,30px); padding-top:clamp(8px,1.8vmin,16px); } + #mid{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:clamp(18px,4.2vmin,34px); padding-top:clamp(8px,1.8vmin,16px); } #stage{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; width:100%; } /* tempo plate: [TAP] [big BPM] [thumbwheel] — flashes on the beat */ #pulse{ position:relative; width:100%; padding:clamp(8px,1.8vmin,14px); border-radius:16px; @@ -137,7 +137,16 @@ #trackpanel .tp-btn{ flex:0 0 auto; background:linear-gradient(180deg,var(--btn1),var(--btn2)); color:var(--txt); border:1px solid var(--btn-bd); border-radius:7px; padding:0 12px; font-size:12px; cursor:pointer; } #trackpanel .tp-msg{ color:#5fd08a; margin-left:auto; } .lane{ display:flex; align-items:center; gap:8px; } - .lane.off{ opacity:.5; } + /* dim only the label + pads of a muted lane, so the mute toggle stays crisp */ + .lane.off .lmeta, .lane.off .pads{ opacity:.45; } + .lmute{ flex:0 0 auto; width:clamp(28px,5.4vmin,36px); height:clamp(28px,5.4vmin,36px); border-radius:8px; padding:0; + display:flex; align-items:center; justify-content:center; cursor:pointer; + background:var(--chip-bg); border:1px solid var(--chip-bd); color:var(--cyan); } + .lmute:active{ background:rgba(127,139,154,.22); } + .lmute.muted{ color:var(--muted); background:transparent; } + .lmute svg{ width:62%; height:62%; } + .lane.poly .lmute{ color:var(--poly); } + .lane.poly .lmute.muted{ color:var(--muted); } .lmeta{ flex:0 0 auto; width:36%; max-width:168px; min-width:94px; display:flex; align-items:center; gap:5px; text-align:left; background:var(--chip-bg); border:1px solid var(--chip-bd); color:var(--txt); border-radius:8px; padding:5px 8px; font-size:clamp(10px,1.8vmin,13px); font-family:"Courier New",monospace; cursor:pointer; } @@ -201,9 +210,12 @@ on the left, selector + settings + lanes on the right */ @media (orientation:landscape){ #app{ --maxw:1060px; } - #mid{ display:grid; align-items:stretch; gap:8px 4vw; padding-top:0; - grid-template-columns:40% 60%; grid-template-rows:auto auto 1fr auto; + /* fr columns (not 40%/60%) so the column gap is subtracted before sizing — + percentages + gap summed past 100% and overhung the right edge */ + #mid{ display:grid; align-items:stretch; gap:clamp(12px,2.6vh,22px) clamp(16px,3vw,38px); padding-top:0; + grid-template-columns:minmax(0,2fr) minmax(0,3fr); grid-template-rows:auto auto 1fr auto; grid-template-areas:"stage sels" "stage panel" "stage detail" "transport detail"; } + #stage, .sels, #trackpanel, #detail, #transport{ min-width:0; } #stage{ grid-area:stage; align-self:center; justify-content:center; } .sels{ grid-area:sels; align-self:start; } #trackpanel{ grid-area:panel; align-self:start; } @@ -546,10 +558,17 @@ function laneMetaHTML(m){ const eff=laneNoteValue(m); const poly=m.poly?"↻"+m.beatsPerBar+":"+ref+"":""; return ""+esc(m.sound)+""+rhythmSVG(eff)+""+esc(m.groupsStr)+""+poly; } function setLaneMeta(m){ if(!m._meta) return; m._meta.innerHTML=laneMetaHTML(m); } +// speaker glyphs for the inline per-lane mute toggle +const SPK_ON=''; +const SPK_OFF=''; +function toggleLaneMute(i){ const m=meters[i]; if(!m) return; m.enabled=!m.enabled; laneSig=null; renderAll(); saveState(); } function buildLanes(){ const box=$("lanes"); box.innerHTML=""; meters.forEach((m,i)=>{ const lane=document.createElement("div"); lane.className="lane"+(m.enabled?"":" off")+(m.poly?" poly":""); + const mute=document.createElement("button"); mute.className="lmute"+(m.enabled?"":" muted"); + mute.title=m.enabled?"Mute lane":"Unmute lane"; mute.setAttribute("aria-label",mute.title); + mute.innerHTML=m.enabled?SPK_ON:SPK_OFF; mute.onclick=(e)=>{ e.stopPropagation(); toggleLaneMute(i); }; const meta=document.createElement("button"); meta.className="lmeta"; m._meta=meta; m._idx=i; setLaneMeta(m); meta.onclick=()=>openLaneSheet(i); const pads=document.createElement("div"); pads.className="pads"; @@ -557,7 +576,7 @@ function buildLanes(){ for(let b=0;bcyclePad(m,k,p); cell.appendChild(p); m._padEls[k]=p; } pads.appendChild(cell); } - lane.appendChild(meta); lane.appendChild(pads); box.appendChild(lane); + lane.appendChild(mute); lane.appendChild(meta); lane.appendChild(pads); box.appendChild(lane); }); const add=document.createElement("button"); add.className="addlane"; add.textContent="+ Add lane"; add.onclick=addLane; box.appendChild(add); renderPadLevels(); @@ -846,7 +865,7 @@ const TOUR=[ {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: 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:"#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. The speaker button at the left of each lane mutes/unmutes it. Tap a lane's label to set its note value (eighths, triplets, sixteenths…), sound, grouping 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."}, {sel:"#bPrac", title:"Practice = a timed session", text:"Play just runs the metronome. Practice times your playing and logs it (not audio): it starts a session clock and Play becomes Stop — start/pause each track, then Stop to save the session."},