diff options
| author | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-06-08 15:14:20 -0700 |
|---|---|---|
| committer | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-06-08 15:14:20 -0700 |
| commit | 9d46475d4ef94abebf844d2442085a50a57e5e34 (patch) | |
| tree | 97028b1d0862b5088f0c265d3bb80352f9c7edef /templates/index.html | |
| parent | 629ee5d4e1ca637b6c654b220d9458c36e04ceb5 (diff) | |
On mobile, the sticky feed toolbar consumed most of the viewport.
Replaced it with a compact icon bar (search + sort) that expands
into mutually exclusive panels. Sort options render as radio-style
buttons generated dynamically from the existing select, which
remains for desktop unchanged.
Diffstat (limited to 'templates/index.html')
| -rw-r--r-- | templates/index.html | 51 |
1 files changed, 33 insertions, 18 deletions
diff --git a/templates/index.html b/templates/index.html index 5820cf4..5cda8e7 100644 --- a/templates/index.html +++ b/templates/index.html @@ -25,24 +25,39 @@ </section> <section class="feed-toolbar"> - <div class="search-row"> - <input - type="search" - id="film-search" - placeholder="Search by title or director…" - autocomplete="off" - > - <select id="film-sort"> - <option value="">Default order</option> - <option value="date_watched_desc">Date watched — newest</option> - <option value="date_watched_asc">Date watched — oldest</option> - <option value="title_asc">Title — A → Z</option> - <option value="title_desc">Title — Z → A</option> - <option value="year_desc">Year — newest</option> - <option value="year_asc">Year — oldest</option> - <option value="stars_desc">Stars — highest</option> - <option value="stars_asc">Stars — lowest</option> - </select> + <div class="toolbar-toggles"> + <button class="toolbar-toggle" data-panel="search" type="button" aria-label="Search"> + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> + </button> + <button class="toolbar-toggle" data-panel="sort" type="button" aria-label="Sort"> + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="16" y2="6"/><line x1="4" y1="12" x2="12" y2="12"/><line x1="4" y1="18" x2="8" y2="18"/><polyline points="15 15 18 18 21 15"/><line x1="18" y1="9" x2="18" y2="18"/></svg> + </button> + </div> + <div class="toolbar-panel toolbar-panel-search"> + <div class="search-row"> + <input + type="search" + id="film-search" + placeholder="Search by title or director…" + autocomplete="off" + > + </div> + </div> + <div class="toolbar-panel toolbar-panel-sort"> + <div class="sort-options" id="sort-options"></div> + <div class="search-row"> + <select id="film-sort"> + <option value="">Default order</option> + <option value="date_watched_desc">Date watched — newest</option> + <option value="date_watched_asc">Date watched — oldest</option> + <option value="title_asc">Title — A → Z</option> + <option value="title_desc">Title — Z → A</option> + <option value="year_desc">Year — newest</option> + <option value="year_asc">Year — oldest</option> + <option value="stars_desc">Stars — highest</option> + <option value="stars_asc">Stars — lowest</option> + </select> + </div> </div> </section> |