fix(ui): close gaps with Studio Reference mockup
Side-by-side comparison surfaced several layout regressions vs. the mockup. This commit lands all of them at once. Header - Restore centered "Media Server / Studio Reference Edition" wordmark in italic Fraunces - Move folio marks to fixed page corners (visible on every tab): TL = green pulse + "Connected · Local 8765" TR = "Vol. I — Studio Reference · v0.x.x" - Replace boxed version-label badge with copper mono inline in folio.tr - Reduce header-to-content gap (container padding-top 28→56 with the folio now anchored above) Player view - Spectrum bars: smaller height (32px), centered with max-width so they don't span the whole right column - Spectrogram canvas: hidden by default (opacity 0); reveals only when visualizer toggle is active. No more leaking into bottom-left. - VU cluster volume controls: strip legacy box (background, padding, border-radius); compact stacked layout with thin slider, small mute button, mono "VOL · XX%" readout - Disable legacy applyVinylMode() — the .vinyl class added a SECOND rotation animation on top of the structural .vinyl-stage spin, causing visible compounding. Vinyl is now purely structural. Toggles - Remove vinyl mode toggle button (vinyl is always on) - Keep audio visualizer (spectrum vis) toggle — still shown by JS when supported Mini player - Force always-visible on non-player tabs regardless of scroll, by short-circuiting setMiniPlayerVisible when activeTab !== 'player' i18n - New keys: header.connected, header.volume, header.edition, header.edition_sub - Removed unused: player.folio_left, player.folio_right - en.json + ru.json updated
This commit is contained in:
@@ -75,11 +75,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Folio marks at page corners -->
|
||||
<span class="folio tl"><span class="status-dot" id="status-dot" aria-live="polite"></span><span data-i18n="header.connected">Connected</span> · <span id="folio-host">Local 8765</span></span>
|
||||
<span class="folio tr"><span data-i18n="header.volume">Vol. I</span> — <span data-i18n="header.edition">Studio Reference</span> · <span id="version-label"></span></span>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span class="status-dot" id="status-dot" aria-live="polite"></span>
|
||||
<span class="version-label" id="version-label"></span>
|
||||
<div class="brand">
|
||||
<span class="brand-name" data-i18n="app.title">Media Server</span>
|
||||
<span class="brand-sub" data-i18n="header.edition_sub">Studio Reference Edition</span>
|
||||
</div>
|
||||
<div class="header-toolbar">
|
||||
<div id="headerLinks" class="header-links"></div>
|
||||
@@ -153,9 +157,6 @@
|
||||
</div>
|
||||
|
||||
<div class="player-container" data-tab-content="player" role="tabpanel" id="panel-player">
|
||||
<span class="folio tl"><span data-i18n="player.folio_left">Now Spinning</span> · <span id="folio-version">v—</span></span>
|
||||
<span class="folio tr" data-i18n="player.folio_right">Vol. I — Studio Reference</span>
|
||||
|
||||
<div class="player-layout now-playing">
|
||||
|
||||
<!-- Vinyl stage with album art as label -->
|
||||
@@ -280,15 +281,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Player toggles -->
|
||||
<!-- Audio visualizer toggle (button shown by JS only when supported) -->
|
||||
<div class="source-info">
|
||||
<span class="source-label">
|
||||
<span class="vinyl-mode-label" data-i18n="player.modes">Modes</span>
|
||||
</span>
|
||||
<div class="player-toggles">
|
||||
<button class="vinyl-toggle-btn" onclick="toggleVinylMode()" id="vinylToggle" data-i18n-title="player.vinyl" title="Vinyl mode">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="12" cy="12" r="3" fill="currentColor"/><circle cx="12" cy="12" r="6.5" fill="none" stroke="currentColor" stroke-width="0.5" opacity="0.5"/></svg>
|
||||
</button>
|
||||
<button class="vinyl-toggle-btn" onclick="toggleVisualizer()" id="visualizerToggle" data-i18n-title="player.visualizer" title="Audio visualizer" style="display:none">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3 18h2v-8H3v8zm4 0h2V6H7v12zm4 0h2V2h-2v16zm4 0h2v-6h-2v6zm4 0h2V9h-2v9z"/></svg>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user