From c866dc4c539d72134ea690c7c44318a58ec27fd2 Mon Sep 17 00:00:00 2001
From: Paul Buetow <paul@buetow.org>
Date: Thu, 30 Apr 2026 23:16:11 +0300
Subject: mobile: responsive layout, touch-friendly progress bar, collapsible
 filters

- Add mobile breakpoints (860px/520px) with compact header, full-width sidebar overlay,
  flexible search bar, and adaptive toolbar.
- Player now spans full width on mobile and has reduced stage height.
- Progress bar gains touch-drag support (touchstart/move/end) for mobile seeking.
- Collapse advanced filters (tags/duration/filesize) behind a 'Filters' toggle to keep
  the default toolbar KISS. Only type and favorites remain always visible.
---
 web/index.html | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'web/index.html')

diff --git a/web/index.html b/web/index.html
index 4b63f13..1fc583e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -43,13 +43,16 @@
         <option value="audio">Audio</option>
       </select>
       <button id="filter-favorites" class="btn btn-ghost btn-sm">❤ Favorites</button>
+      <div class="spacer"></div>
+      <button id="filter-toggle" class="btn btn-ghost btn-sm" title="More filters">Filters ▾</button>
+      <span id="result-count" class="text-muted text-xs"></span>
+    </div>
+    <div id="filter-advanced" class="toolbar hidden">
       <input id="filter-tags" type="text" placeholder="Tags (comma)" aria-label="Filter by tags" class="input-sm">
       <input id="filter-min-duration" type="number" min="0" placeholder="Min s" aria-label="Min duration seconds" class="input-sm">
       <input id="filter-max-duration" type="number" min="0" placeholder="Max s" aria-label="Max duration seconds" class="input-sm">
       <input id="filter-min-filesize" type="number" min="0" placeholder="Min MB" aria-label="Min file size MB" class="input-sm">
       <input id="filter-max-filesize" type="number" min="0" placeholder="Max MB" aria-label="Max file size MB" class="input-sm">
-      <div class="spacer"></div>
-      <span id="result-count" class="text-muted text-xs"></span>
     </div>
     <div id="media-grid" class="media-grid" tabindex="0" aria-label="Media grid"></div>
   </div>
-- 
cgit v1.2.3