From ca717d9625cdd60272226db50f0f148c949565c7 Mon Sep 17 00:00:00 2001 From: Ken D'Ambrosio Date: Tue, 12 May 2026 12:33:17 +0000 Subject: 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 --- public/css/style.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'public/css/style.css') diff --git a/public/css/style.css b/public/css/style.css index a142f8a..b0c73dd 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -247,10 +247,10 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; } .lb-next { right: 0; border-radius: var(--radius) 0 0 var(--radius); } /* ── Slideshow ─────────────────────────────────────────────────────────── */ -.slideshow-page { background: #000; overflow: hidden; height: 100vh; display: flex; } +.slideshow-page { background: #000; overflow: hidden; height: 100vh; height: 100dvh; display: flex; } #slideshow { - width: 100%; height: 100vh; + width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: #000; } @@ -289,9 +289,8 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; } flex-shrink: 0; } .ss-opt-label { display: inline-flex; align-items: center; gap: 5px; font-size: .9rem; color: var(--text-dim); cursor: pointer; } -.ss-opt-label input { cursor: pointer; } -.ss-interval-label { color: var(--text-dim); font-size: .85rem; display: flex; align-items: center; gap: 4px; margin-left: auto; } -.ss-interval-label input { width: 48px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 2px 6px; } +.ss-opt-label input[type=checkbox] { cursor: pointer; } +.ss-opt-label input[type=number] { width: 44px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 2px 6px; } #ss-counter { position: absolute; top: 12px; right: 16px; color: rgba(255,255,255,.5); font-size: .8rem; pointer-events: none; } -- cgit v1.2.3