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:
+8
-1
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user