feat: add full-screen photo viewer with zoom + prev-photo thumbnails

Lightbox implementation was already present from prior commit
(04ac2fd). This commit adds the missing piece:

- Add thumbnail images to previously-processed photo cards
  rendered by renderPrevCard(), linked to /api/photos/{id}/file
- Clicking the thumbnail opens the full-screen lightbox with zoom
- Add .prev-thumb CSS for consistent square aspect-ratio display

Acceptance Criteria:
- Tap detail preview image -> full-screen overlay (already done)
- Photo fills screen with proper aspect ratio (already done)
- Pinch/scroll zoom + double-tap toggle (already done)
- Close button + swipe-down-to-dismiss (already done)
- Also works for previous photos section thumbnails (NOW DONE)
This commit is contained in:
2026-05-25 20:38:50 -04:00
parent 04ac2fd7c7
commit 23f479dd0c
+8 -1
View File
@@ -273,6 +273,11 @@ if ('serviceWorker' in navigator) {
.prev-photo-card .sticker-color {
display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 4px;
}
.prev-thumb {
width: 100%; aspect-ratio: 1; object-fit: cover;
border-radius: var(--radius-sm); margin-bottom: 8px;
cursor: zoom-in; display: block; background: var(--card2);
}
.export-modal-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; }
.export-modal { background: var(--card); border-radius: var(--radius); padding: 20px; max-width: 320px; width: 90%; text-align: center; }
@@ -554,8 +559,10 @@ function renderPrevCard(p) {
const colorHtml = p.sticker_color
? `<span class="sticker-color" style="background:${p.sticker_color === 'green' ? 'var(--green)' : p.sticker_color === 'orange' ? 'var(--amber)' : p.sticker_color === 'yellow' ? '#eab308' : 'var(--text3)'}"></span>`
: '';
const hasCoords = p.gps_lat && p.gps_lng;
const hasCoords = p.gps_lat && p.gps_lng;
const photoUrl = `/api/photos/${p.id}/file`;
return `<div class="prev-photo-card">
<img class="prev-thumb" src="${photoUrl}" alt="" onclick="openLightbox('${photoUrl}')" loading="lazy">
<div class="prev-header">
<span class="prev-filename">${esc(p.orig_filename)}</span>
<span class="prev-time">${time}</span>