From c9ce336b18cc39571377bf9c76f2a1c37b2dd087 Mon Sep 17 00:00:00 2001 From: Mischa Date: Fri, 19 Jun 2026 21:20:55 +0200 Subject: [PATCH] docs: add trip page filter bar design spec --- .../2026-06-19-trip-page-filter-bar-design.md | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 docs/superpowers/specs/2026-06-19-trip-page-filter-bar-design.md diff --git a/docs/superpowers/specs/2026-06-19-trip-page-filter-bar-design.md b/docs/superpowers/specs/2026-06-19-trip-page-filter-bar-design.md new file mode 100644 index 0000000..f0de344 --- /dev/null +++ b/docs/superpowers/specs/2026-06-19-trip-page-filter-bar-design.md @@ -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 `
` 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)