feat(hikes): clickable tag chips + tag filter on the overview
Detail-page tag chips become anchor links to `/hikes?tag=<name>`. HikesFilterBar grows a tags fieldset (sorted by frequency, with the hash prefix the chips use) so the user can keep narrowing from there. Multi-tag filtering is OR — a hike matching any selected tag stays visible. AND would shrink the listing fast given how few tags most hikes carry; OR matches what "show me more like this" feels like. The overview page reads `tag` query params on mount and pre-fills the filter — supports repeated params (`?tag=winter&tag=easy`).
This commit is contained in:
@@ -424,10 +424,14 @@
|
||||
{#if hike.tags.length > 0}
|
||||
<!-- Tag chips sit between the metric tiles (facts) and the
|
||||
elevation profile (data viz) so they read as framing context —
|
||||
"what kind of hike is this" — before the data takes over. -->
|
||||
"what kind of hike is this" — before the data takes over.
|
||||
Each chip is an anchor link to the /hikes overview with that
|
||||
tag pre-selected in the filter bar. -->
|
||||
<section class="tags" aria-label="Schlagwörter">
|
||||
{#each hike.tags as tag (tag)}
|
||||
<span class="tag-chip"><span class="tag-hash" aria-hidden="true">#</span>{tag}</span>
|
||||
<a class="tag-chip" href="/hikes?tag={encodeURIComponent(tag)}">
|
||||
<span class="tag-hash" aria-hidden="true">#</span>{tag}
|
||||
</a>
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
@@ -768,6 +772,17 @@
|
||||
background: var(--color-bg-tertiary);
|
||||
border-radius: var(--radius-pill);
|
||||
letter-spacing: 0.005em;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
color var(--transition-fast),
|
||||
background-color var(--transition-fast),
|
||||
scale var(--transition-fast);
|
||||
}
|
||||
|
||||
.tag-chip:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-bg-elevated);
|
||||
scale: 1.05;
|
||||
}
|
||||
|
||||
.tag-hash {
|
||||
@@ -775,6 +790,10 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tag-chip:hover .tag-hash {
|
||||
color: color-mix(in oklab, var(--color-primary) 60%, currentColor);
|
||||
}
|
||||
|
||||
.elev-area {
|
||||
padding: 0 1rem;
|
||||
margin-top: 0.25rem;
|
||||
|
||||
Reference in New Issue
Block a user