docs: add trip page filter bar design spec

2026-06-19 21:20:55 +02:00
parent e329cd4ad2
commit c9ce336b18
1 changed files with 87 additions and 0 deletions
@@ -0,0 +1,87 @@
+# Trip Page Filter Bar — Design Spec
+
+**Date:** 2026-06-19
+**Status:** Approved
+
+## Problem
+
+The trip page (`trip.html.twig`) shows a map + combined feed, but the three nav links below the title (Journal · Stats · Stories) navigate *away* from the page, losing the map context. The links are also unstyled (`trip-nav` has no CSS). Stories links to a stub. Stats is a separate page. The user can only return via browser back.
+
+## Goal
+
+Make the trip page self-contained. Filtering, stats, and content switching all happen in place. Navigation away from the trip page only happens when the user clicks into an individual entry or story.
+
+## Design
+
+### Filter bar (replaces `.trip-nav`)
+
+Three mutually exclusive pill buttons above the feed, plus a Stats toggle to the right:
+
+```
+[ All content ]  [ Journal ]  [ Stories ]          [ Stats ↕ ]
+```
+
+- **Default state:** "All content" active
+- **Behavior:** selecting a filter hides non-matching cards via JS (`display: none` toggle); no page navigation
+- **Stats** sits right-aligned, visually separated from the filter group; it is a toggle, not a filter
+
+### Content filtering
+
+Each `<article>` card in `trip.html.twig` gets a `data-type` attribute:
+
+- Journal entries: `data-type="journal"`
+- Story entries: `data-type="story"`
+
+JS selects all `[data-type]` cards and shows/hides based on the active filter button. Three states:
+
+| Active button | Visible cards |
+|---|---|
+| All content | all |
+| Journal | `data-type="journal"` only |
+| Stories | `data-type="story"` only |
+
+Empty-feed edge case: if Stories is selected and no stories exist yet, show a brief inline message ("No stories yet for this trip.").
+
+### Stats inline expansion
+
+Clicking Stats expands a compact stats block between the filter bar and the first card. Clicking Stats again collapses it. Stats button gets an active/pressed visual state while expanded.
+
+Stats block content (same data as the existing `/stats` page):
+- Days on the road
+- Entries posted
+- Countries visited
+- km traveled (approximate, straight-line haversine between GPS points)
+- Countries list
+
+The computation logic is moved inline into `trip.html.twig` (copied from `stats.html.twig`). The separate `/stats` sub-page is left untouched — it still works as a standalone URL.
+
+### Story card distinction
+
+`.entry-card--story` gets a visible border:
+
+```css
+border: 2px solid var(--color-accent);
+```
+
+No other visual changes to story cards in this session. Full story card redesign (hero image treatment, sneak peek, elegant layout) is deferred to a separate session.
+
+## What changes
+
+| File | Change |
+|---|---|
+| `user/themes/intotheeast/templates/trip.html.twig` | Add `data-type` attributes; add stats computation + inline stats block HTML; replace nav links with filter bar HTML; add filter + stats JS |
+| `user/themes/intotheeast/css/style.css` | Add `.trip-nav` pill styles + active state; add `.trip-stats-block` styles; add story card border |
+
+## What does NOT change
+
+- `/dailies`, `/stats`, `/stories` sub-pages continue to exist as standalone URLs
+- `stats.html.twig` is untouched
+- `dailies.html.twig` is untouched
+- No blueprint or page content changes
+- Story detail page design is out of scope
+
+## Out of scope
+
+- Photo galleries, lightbox, full in-feed entry expansion
+- Story detail page
+- Feed redesign (full pictures, per-entry photo carousel)