diff options
| -rw-r--r-- | app.rb | 2 | ||||
| -rw-r--r-- | public/css/style.css | 11 | ||||
| -rw-r--r-- | public/js/album.js | 19 | ||||
| -rw-r--r-- | views/album.erb | 4 |
4 files changed, 36 insertions, 0 deletions
@@ -94,6 +94,8 @@ helpers do visible: meta.fetch('visible', true), type: media_type_for(name), taken_at: meta['taken_at'], + width: meta['width'], + height: meta['height'], } end diff --git a/public/css/style.css b/public/css/style.css index bb152aa..3dd2450 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -186,6 +186,17 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; } #lb-video { max-width: calc(100vw - 32px); max-height: calc(100vh - 130px); display: block; } #lb-audio { width: 400px; max-width: 90vw; display: block; } +.lb-info { + position: absolute; bottom: 0; left: 0; right: 0; + background: rgba(0,0,0,.72); + padding: 10px 14px; + font-size: .82rem; + line-height: 1.6; +} +.lb-info dl { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; margin: 0; } +.lb-info dt { color: #aaa; white-space: nowrap; } +.lb-info dd { margin: 0; color: #eee; } + .lb-caption-bar { padding: 8px 80px; text-align: center; diff --git a/public/js/album.js b/public/js/album.js index d3a563a..9e921d7 100644 --- a/public/js/album.js +++ b/public/js/album.js @@ -30,6 +30,24 @@ function lbNav(delta) { } } +function lbToggleInfo() { + document.getElementById('lb-info-panel').classList.toggle('hidden'); +} + +function lbBuildInfo(e) { + const rows = []; + if (e.name !== e.title) rows.push(['File', e.name]); + if (e.taken_at) { + const d = new Date(e.taken_at); + rows.push(['Date', d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })]); + } + if (e.width && e.height) rows.push(['Dimensions', `${e.width} × ${e.height}`]); + document.getElementById('lb-info-dl').innerHTML = + rows.map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join(''); + document.getElementById('lb-info-panel').classList.add('hidden'); + document.getElementById('lb-info-btn').style.display = rows.length ? '' : 'none'; +} + function renderLightbox() { const e = ENTRIES[lbIndex]; const img = document.getElementById('lb-img'); @@ -37,6 +55,7 @@ function renderLightbox() { const aud = document.getElementById('lb-audio'); [img, vid, aud].forEach(el => { el.classList.add('hidden'); el.pause && el.pause(); }); + lbBuildInfo(e); if (e.type === 'image') { img.src = e.src; img.alt = e.title; diff --git a/views/album.erb b/views/album.erb index bee779a..961b26a 100644 --- a/views/album.erb +++ b/views/album.erb @@ -82,6 +82,9 @@ <audio id="lb-audio" controls class="hidden"></audio> <button class="lb-btn lb-prev" onclick="lbNav(-1)" aria-label="Previous">‹</button> <button class="lb-btn lb-next" onclick="lbNav(1)" aria-label="Next">›</button> + <div id="lb-info-panel" class="lb-info hidden"> + <dl id="lb-info-dl"></dl> + </div> </div> </div> <div class="lb-caption-bar"> @@ -89,6 +92,7 @@ <span id="lb-caption"></span> <a id="lb-download" href="" download class="btn btn-sm lb-action">↓ Original</a> <button id="lb-copylink" onclick="lbCopyLink()" class="btn btn-sm lb-action">⧉ Copy link</button> + <button id="lb-info-btn" onclick="lbToggleInfo()" class="btn btn-sm lb-action">ℹ Info</button> <span id="lb-counter"></span> </div> </div> |