/art: add a Back button (matches the hub's single-history behavior)
Daily Art had no Back. Add a top-left "‹ Back" in its own gallery bar styling:
history.back() when arrived via in-app nav, else goto('/home3', {replaceState})
on a cold deep-link — same rule as the hub detail pages.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { getJSON } from '$lib/api.js';
|
||||
import { afterNavigate, goto } from '$app/navigation';
|
||||
|
||||
// Virtual frames the viewer can switch between — remembered locally, no account needed.
|
||||
const FRAMES = [
|
||||
@@ -30,6 +31,15 @@
|
||||
// Move focus to the lightbox when it opens, so Escape/Enter work and focus is trapped sanely.
|
||||
$effect(() => { if (zoom && lightboxEl) lightboxEl.focus(); });
|
||||
|
||||
// Same single-history Back as the hub pages: return to where you came from (the hub),
|
||||
// or fall back to it on a cold deep-link without pushing a new entry.
|
||||
let cameFromApp = $state(false);
|
||||
afterNavigate(({ from }) => { if (from) cameFromApp = true; });
|
||||
function goBack() {
|
||||
if (cameFromApp && typeof history !== 'undefined') history.back();
|
||||
else goto('/home3', { replaceState: true });
|
||||
}
|
||||
|
||||
let who = $derived(
|
||||
art ? [art.artist || 'Unknown artist', art.date_text].filter(Boolean) : []
|
||||
);
|
||||
@@ -95,6 +105,12 @@
|
||||
</header>
|
||||
|
||||
<main class="gallery">
|
||||
<button class="back" onclick={goBack} aria-label="Go back">
|
||||
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
Back
|
||||
</button>
|
||||
<div class="intro">
|
||||
<h1>Daily Art</h1>
|
||||
<p>A masterwork a day, from the world's open collections.</p>
|
||||
@@ -211,6 +227,18 @@
|
||||
box-sizing: border-box;
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
}
|
||||
/* top-left Back (the gallery centers its children, so pin this one to the left) */
|
||||
.back {
|
||||
align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
|
||||
margin: 0 0 clamp(10px, 2vw, 18px); padding: 6px 10px 6px 0;
|
||||
background: none; border: none; cursor: pointer; font: inherit; font-size: 14px;
|
||||
font-weight: 600; color: var(--muted); transition: color 0.15s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.back:hover { color: var(--accent); }
|
||||
.back svg { transition: transform 0.15s ease; }
|
||||
.back:hover svg { transform: translateX(-2px); }
|
||||
|
||||
.intro { text-align: center; margin-bottom: clamp(18px, 3.5vw, 30px); }
|
||||
.intro h1 {
|
||||
font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
|
||||
|
||||
Reference in New Issue
Block a user