diff options
| author | Ken D'Ambrosio <ken@jots.org> | 2026-05-12 12:33:17 +0000 |
|---|---|---|
| committer | Ken D'Ambrosio <ken@jots.org> | 2026-05-12 12:33:17 +0000 |
| commit | ca717d9625cdd60272226db50f0f148c949565c7 (patch) | |
| tree | 2479d3770390490a3cae04ade1891f44a57e4408 /views | |
| parent | 3e1a71be6e63696dfe9792f123f24ece1da8116a (diff) | |
Move slideshow interval control to album page; fix mobile viewport clipping
- Interval input (default 5 s) now lives beside Shuffle/Full screen on
the album page; passed as ?interval= param to the slideshow and seeded
into the hidden ss-interval input on load.
- Added "Interval" label text next to the input.
- Fixed slideshow controls being pushed off-screen on mobile by using
100dvh (dynamic viewport height) with 100vh as a fallback, so the
layout accounts for mobile browser chrome.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'views')
| -rw-r--r-- | views/album.erb | 1 | ||||
| -rw-r--r-- | views/slideshow.erb | 5 |
2 files changed, 2 insertions, 4 deletions
diff --git a/views/album.erb b/views/album.erb index 603aa80..ee6e548 100644 --- a/views/album.erb +++ b/views/album.erb @@ -15,6 +15,7 @@ <a href="/slideshow/<%= @rel %>" id="ss-launch" data-base="/slideshow/<%= @rel %>" class="btn">Slideshow</a> <label class="ss-opt-label"><input type="checkbox" id="ss-opt-shuffle"> Shuffle</label> <label class="ss-opt-label"><input type="checkbox" id="ss-opt-fullscreen"> Full screen</label> + <label class="ss-opt-label">Interval <input type="number" id="ss-opt-interval" value="5" min="1" max="60" step="1"> s</label> <% end %> </div> </div> diff --git a/views/slideshow.erb b/views/slideshow.erb index dfdf523..24a487b 100644 --- a/views/slideshow.erb +++ b/views/slideshow.erb @@ -22,10 +22,7 @@ <button onclick="ssToggle()" id="ss-play-btn" class="btn btn-sm">⏸ Pause</button> <button onclick="ssNext()" class="btn btn-sm">Next ›</button> <button onclick="ssFsToggle()" class="btn btn-sm" title="Toggle full screen (F)">⛶</button> - <label class="ss-interval-label"> - Interval - <input type="number" id="ss-interval" value="4" min="1" max="60" step="1"> s - </label> + <input type="number" id="ss-interval" value="5" min="1" max="60" step="1" hidden> </div> <div id="ss-counter"></div> </div> |