feat: fix portrait mode design in pwa — YouTube-style bottom bar
Task #46 completed by ClaudeQueue ClaudeQueue
This commit is contained in:
@@ -250,6 +250,36 @@
|
||||
<div id="miniProgress" class="mini-progress"><div id="miniProgressFill" class="mini-progress-fill"></div></div>
|
||||
</div>
|
||||
|
||||
<!-- YouTube-style bottom navigation bar (portrait PWA mode only) -->
|
||||
<nav id="bottomNav" class="bottom-nav" aria-label="Main navigation">
|
||||
<button class="bottom-nav-btn active" data-view="search" aria-label="Search">
|
||||
<span class="bottom-nav-icon">🔍</span>
|
||||
<span class="bottom-nav-label">Search</span>
|
||||
</button>
|
||||
<button class="bottom-nav-btn" data-view="queue" aria-label="Queue">
|
||||
<span class="bottom-nav-icon">▶</span>
|
||||
<span class="bottom-nav-label">Queue</span>
|
||||
<span id="bnQueueCount" class="bottom-nav-badge hidden">0</span>
|
||||
</button>
|
||||
<button class="bottom-nav-btn" data-view="history" aria-label="History">
|
||||
<span class="bottom-nav-icon">🕘</span>
|
||||
<span class="bottom-nav-label">History</span>
|
||||
</button>
|
||||
<button class="bottom-nav-btn" data-view="saved" aria-label="Saved">
|
||||
<span class="bottom-nav-icon">💾</span>
|
||||
<span class="bottom-nav-label">Saved</span>
|
||||
</button>
|
||||
<button class="bottom-nav-btn" data-view="downloads" aria-label="Downloads">
|
||||
<span class="bottom-nav-icon">⬇</span>
|
||||
<span class="bottom-nav-label">Downloads</span>
|
||||
<span id="bnDlCount" class="bottom-nav-badge hidden">0</span>
|
||||
</button>
|
||||
<button class="bottom-nav-btn" data-view="settings" aria-label="Settings">
|
||||
<span class="bottom-nav-icon">⚙</span>
|
||||
<span class="bottom-nav-label">More</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- Keyboard shortcuts help overlay -->
|
||||
<div id="shortcutHelp" class="shortcut-overlay hidden">
|
||||
<div class="shortcut-panel">
|
||||
|
||||
Reference in New Issue
Block a user