diff options
| author | Ken D'Ambrosio <ken@jots.org> | 2026-05-14 23:11:20 +0000 |
|---|---|---|
| committer | Ken D'Ambrosio <ken@jots.org> | 2026-05-14 23:11:20 +0000 |
| commit | de80b9871ebe1497c672f3c7c7bb5467dabcb83a (patch) | |
| tree | 348e9d3e012e24a41c1eb0fe16c9915b98f97b8f /views/album.erb | |
| parent | c76ea393777897e0c367e186d1a3b243193d8377 (diff) | |
Fill viewport with media in lightbox and slideshow
Lightbox: .lb-media now fills the full stage (flex, 100%x100%) and
#lb-img/#lb-video use width/height:100% + object-fit:contain so at
least one axis always reaches the edge. Click-to-close updated to
check event.target===stage instead of stopPropagation.
Slideshow: #ss-img/#ss-video likewise changed from max-width/max-height
to width/height:100% so small or portrait media fills the stage.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'views/album.erb')
| -rw-r--r-- | views/album.erb | 4 |
1 files changed, 2 insertions, 2 deletions
diff --git a/views/album.erb b/views/album.erb index 64bf763..d13ced9 100644 --- a/views/album.erb +++ b/views/album.erb @@ -83,8 +83,8 @@ <div id="lightbox" class="lightbox hidden" role="dialog" aria-modal="true"> <button class="lb-btn lb-close" onclick="closeLightbox()" aria-label="Close">✕</button> - <div class="lb-stage" onclick="closeLightbox()"> - <div class="lb-media" onclick="event.stopPropagation()"> + <div class="lb-stage" onclick="if(event.target===this)closeLightbox()"> + <div class="lb-media"> <img id="lb-img" src="" alt="" class="hidden"> <video id="lb-video" controls class="hidden"></video> <audio id="lb-audio" controls class="hidden"></audio> |