diff options
| author | Paul Buetow <paul@buetow.org> | 2026-06-15 13:26:28 +0300 |
|---|---|---|
| committer | Paul Buetow <paul@buetow.org> | 2026-06-15 23:50:40 +0300 |
| commit | 6e47246dbbc97821b97aa9c45352abc9c2a9aa4a (patch) | |
| tree | aa893f4ef633f76faab5731313de2d694a1de94e /share/templates/default | |
| parent | 3adeaa68af3bac73450a4156edb51fd1ec88347a (diff) | |
Stats/camera pages: blurred background, album-like camera thumbs, spacing
Three refinements to the stats site:
- Stats and per-camera pages now get a random blurred background image (same
seeded pick the album preview pages use) instead of a plain black page. Adds
_stats_random_background + STATS_BLURS_DIR; falls back to black when no photos
exist (e.g. isolated unit tests).
- Per-camera thumbnails now behave like the main album: they link to each
photo's album view page (navigation, details, EXIF tooltip) and carry the same
seeded animation class, instead of linking to the raw image. render_album_pages
records a photo -> "<page>-<preview>" map (ALBUM_VIEW_PAGE_BY_PHOTO) that the
camera pages read; photos with no recorded view page fall back to the image.
- Spacing: the camera leaderboard rows get padding + a separator line so the long
wrapping camera names are distinguishable, and the stats sections, headings,
bar rows, back-link, and camera grid get moderate extra spacing so nothing
looks cramped.
Tests updated for the new camera-thumbnail markup and extended to assert the
stats background and the album view-page links; camera.tmpl comment corrected.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Diffstat (limited to 'share/templates/default')
| -rw-r--r-- | share/templates/default/camera.tmpl | 9 | ||||
| -rw-r--r-- | share/templates/default/header.tmpl | 36 |
2 files changed, 36 insertions, 9 deletions
diff --git a/share/templates/default/camera.tmpl b/share/templates/default/camera.tmpl index 39ca273..2e08461 100644 --- a/share/templates/default/camera.tmpl +++ b/share/templates/default/camera.tmpl @@ -7,10 +7,11 @@ # <html>/<head>/<body> and footer come from the header/footer templates, which # render_camera_pages emits around this one (same pattern as stats/view/details). # -# Thumbnails link to the full-size image under photos/ rather than to a per-photo -# view page: a camera page is built outside the album's pagination loop and so -# cannot know which <page>-<preview>.html a given photo landed on. Linking to the -# original image is the sensible derivable target (see render_camera_pages). +# Thumbnails link to each photo's album view page (navigation, details, EXIF +# tooltip) so a camera page behaves exactly like the main album. +# render_camera_pages resolves the <page>-<preview>.html target from the map the +# album build records; a photo with no recorded view page falls back to the +# full-size image under photos/ (see render_camera_pages). cat <<END <div class="view stats camera"> <h1 class="stats-title">${render_title_html} — ${render_camera_name_html}</h1> diff --git a/share/templates/default/header.tmpl b/share/templates/default/header.tmpl index 6a163f9..411d106 100644 --- a/share/templates/default/header.tmpl +++ b/share/templates/default/header.tmpl @@ -98,23 +98,31 @@ cat <<END div.stats { margin: 0 auto; max-width: 900px; + padding: 0 12px; text-align: left; } h1.stats-title { + margin-bottom: 12px; text-align: center; } + /* Give the "Back to album/stats" link room before the first section. */ + div.stats-back { + margin-bottom: 16px; + } + section.stats-section { background-color: #000000; border: 3px solid #ffffff; - margin: 8px auto; - padding: 10px; + margin: 16px auto; + padding: 14px 16px; } section.stats-section h2 { font-size: 1.1em; margin-top: 0; + margin-bottom: 12px; } /* Each bar row is a label, a proportional bar, and the count/percent. @@ -129,8 +137,20 @@ cat <<END ul.stats-bars li { align-items: center; display: flex; - gap: 8px; - margin: 2px 0; + gap: 10px; + margin: 4px 0; + } + + /* The camera leaderboard labels are long, EXIF-derived names that wrap, + so give each row extra vertical padding and a separator line to make + the boundary between cameras clear. */ + ul.stats-leaderboard li { + border-bottom: 1px solid #444444; + padding: 8px 0; + } + + ul.stats-leaderboard li:last-child { + border-bottom: none; } span.stats-label { @@ -160,12 +180,18 @@ cat <<END padding: 5px; } - img.thumb { + img.thumb { height: ${render_thumbheight_html}px; width: ${render_thumbheight_html}px; object-fit: cover; } + /* Camera filter page grid: separate from the back link and let the + thumbnails (which already carry their own padding) breathe a little. */ + div.camera-thumbs { + margin-top: 12px; + } + img.thumb:hover { outline: 4px solid #ffffff; -webkit-transform: scaleX(-1); |