From a7c16b99a4284826ac5ac0ace4ee0f760a548ff4 Mon Sep 17 00:00:00 2001 From: Ken D'Ambrosio Date: Sun, 10 May 2026 14:38:04 +0000 Subject: Add slideshow: root-level, shuffle, fullscreen, click-to-album MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Root slideshow: all_media_entries walks the full media tree so /slideshow/ shows every photo across all albums; Slideshow button always appears on the root album page - Shuffle and Full screen checkboxes sit next to the Slideshow button on the album page; options pass as ?shuffle=1&fullscreen=1 URL params - Fullscreen uses a tap-to-activate overlay (browsers block auto-entry on page load); webkit-prefixed for Safari; ⛶ button and F key for mid-session toggle - Fullscreen mode hides controls, counter, caption bar, and site header - Exiting fullscreen auto-pauses so the current photo stays visible - Click/tap anywhere in the stage navigates to the photo's album lightbox; reads the live src attribute instead of ssIdx to avoid a race where ssIdx advances during the cross-fade while the old photo is still on screen - layout.erb excluded from slideshow (layout: false) so the site header never appears there - CSS cache-busted with ?v=2 Co-Authored-By: Claude Sonnet 4.6 --- public/css/style.css | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'public/css/style.css') diff --git a/public/css/style.css b/public/css/style.css index 3dd2450..a142f8a 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -288,11 +288,20 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; } background: rgba(0,0,0,.7); 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-counter { position: absolute; top: 12px; right: 16px; color: rgba(255,255,255,.5); font-size: .8rem; pointer-events: none; } +/* Fullscreen: nothing but the photo */ +.ss-fullscreen .site-header, +.ss-fullscreen #ss-controls, +.ss-fullscreen #ss-counter, +.ss-fullscreen #ss-caption-bar { display: none !important; } +.ss-fullscreen #ss-stage { cursor: pointer; } + /* ── Admin ─────────────────────────────────────────────────────────────── */ .admin-login { max-width: 360px; margin: 80px auto; -- cgit v1.2.3