shawn/pi-multifx-pedal
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

settings: nav sticks to top with bigger buttons

Browse Source 
- Moved .settings-nav out of .overlay-body so it stays pinned below
  the header when scrolling
- Buttons bumped to 12px font, 8px 16px padding, 38px min-height
- Added gap, padding, background and border-bottom to nav strip
This commit is contained in:
Shawn
2026-06-16 19:03:20 -04:00
parent f6fe3b2523
commit ea75c41745
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/ui-v2-dist/index.html
+10 -10
View File
@@ -117,9 +117,9 @@ body{display:flex;flex-direction:column;max-height:100vh;user-select:none;-webki
.setting-group{margin-bottom:12px}
.setting-group-title{font-size:10px;font-weight:700;color:var(--text-sec);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;padding:0 4px}
/* Settings section nav */
.settings-nav{display:flex;gap:4px;overflow-x:auto;padding:0 0 8px 0;flex-shrink:0;scrollbar-width:none;-ms-overflow-style:none}
.settings-nav{display:flex;gap:6px;overflow-x:auto;padding:6px 10px 8px;flex-shrink:0;scrollbar-width:none;-ms-overflow-style:none;background:var(--bg);border-bottom:1px solid var(--border)}
.settings-nav::-webkit-scrollbar{display:none}
.sn-btn{flex-shrink:0;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-family:var(--font);font-size:10px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .12s}
.sn-btn{flex-shrink:0;padding:8px 16px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .12s;min-height:38px}
.sn-btn:active{background:var(--panel);transform:scale(.95)}
.sn-btn.active{border-color:var(--amber);color:var(--amber);background:rgba(232,160,48,.08)}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:var(--surface);border-radius:6px;border:1px solid var(--border);margin-bottom:3px;min-height:42px}
@@ -246,15 +246,15 @@ body{display:flex;flex-direction:column;max-height:100vh;user-select:none;-webki
<!-- Settings Overlay -->
<div class="overlay" id="overlaySettings">
<div class="overlay-hdr"><span class="overlay-title">⚙ Settings</span><button class="overlay-close" id="closeSettings">✕</button></div>
<!-- Settings section nav — stays fixed below header -->
<div class="settings-nav">
<button class="sn-btn active" data-section="network" onclick="scrollToSection('network')">⚙ Network</button>
<button class="sn-btn" data-section="audio" onclick="scrollToSection('audio')">🎛 Audio</button>
<button class="sn-btn" data-section="interface" onclick="scrollToSection('interface')">🎚 Interface</button>
<button class="sn-btn" data-section="bluetooth" onclick="scrollToSection('bluetooth')">🔵 Bluetooth</button>
<button class="sn-btn" data-section="system" onclick="scrollToSection('system')">⚡ System</button>
</div>
<div class="overlay-body">
<!-- Settings section nav -->
<div class="settings-nav">
<button class="sn-btn active" data-section="network" onclick="scrollToSection('network')">Network</button>
<button class="sn-btn" data-section="audio" onclick="scrollToSection('audio')">Audio</button>
<button class="sn-btn" data-section="interface" onclick="scrollToSection('interface')">Interface</button>
<button class="sn-btn" data-section="bluetooth" onclick="scrollToSection('bluetooth')">Bluetooth</button>
<button class="sn-btn" data-section="system" onclick="scrollToSection('system')">System</button>
</div>
<div class="setting-group" id="section-network"><div class="setting-group-title">Network</div>
<div class="setting-row"><span class="sr-label">🌐 Eth IP</span><span class="sr-value" id="netEthIp">—</span></div>
<div class="setting-row"><span class="sr-label">🔗 MAC</span><span class="sr-value" id="netEthMac">—</span></div>