diff --git a/docs/superpowers/plans/2026-06-20-ui-ux-alignment.md b/docs/superpowers/plans/2026-06-20-ui-ux-alignment.md index db0df16..4bd8a44 100644 --- a/docs/superpowers/plans/2026-06-20-ui-ux-alignment.md +++ b/docs/superpowers/plans/2026-06-20-ui-ux-alignment.md @@ -2,6 +2,8 @@ > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. +**Status:** ✅ Complete (2026-06-20) — also extended to story map markers (white diamond) and story card flash highlight. + **Goal:** Unify three micro-interaction patterns across the site: back navigation pills, card hover lift, and a map-to-card flash highlight. **Architecture:** CSS-first — shared `.back-pill` class drives visual consistency; entry card markup is collapsed from a two-level `article > a` to a flat `` to align hover targets across all three card types; map flash is a short CSS keyframe triggered by a JS-added class. @@ -41,7 +43,7 @@ **Interfaces:** - Produces: `.back-pill` class (surface pill), `.entry-card.is-highlighted` animation, uniform hover lift on `.trip-card:hover`, `.entry-card:hover`, `.story-card:hover` -- [ ] **Step 1: Add `.back-pill` surface pill class** +- [x] **Step 1: Add `.back-pill` surface pill class** Find the `/* ── Back to top pill ──` section (around line 1217). Insert the following block immediately **before** it: @@ -65,7 +67,7 @@ Find the `/* ── Back to top pill ──` section (around line 1217). Insert .back-pill:hover { border-color: var(--color-accent); color: var(--color-accent); } ``` -- [ ] **Step 2: Remove the duplicate `.story-escape` block** +- [x] **Step 2: Remove the duplicate `.story-escape` block** Around line 958 there is a `/* ── Story page escape link ──` section with a `.story-escape` rule that is overridden later by the story-section block. Remove this entire section: @@ -92,7 +94,7 @@ Around line 958 there is a `/* ── Story page escape link ──` section wit The authoritative `.story-escape` definition remains in the `/* ── Story pages ──` section (~line 1056). -- [ ] **Step 3: Add uniform card hover lift + fix story-card transition** +- [x] **Step 3: Add uniform card hover lift + fix story-card transition** Find the `.trip-card:hover` rule (in `/* ── Past trips archive ──`). After the existing `.trip-card:hover` block, add: @@ -120,7 +122,7 @@ Then find `.story-card` in the `/* ── Stories listing ──` section and ad } ``` -- [ ] **Step 4: Add map flash keyframe** +- [x] **Step 4: Add map flash keyframe** At the end of the `/* ── Feed ──` section (after `.entry-card` and related rules, around line 210), add: @@ -135,7 +137,7 @@ At the end of the `/* ── Feed ──` section (after `.entry-card` and relat } ``` -- [ ] **Step 5: Verify no JS errors on the site** +- [x] **Step 5: Verify no JS errors on the site** ```bash npx playwright test --project=chromium tests/ui/maps.spec.js -g "M1:" @@ -143,7 +145,7 @@ npx playwright test --project=chromium tests/ui/maps.spec.js -g "M1:" Expected: PASS (map page loads without errors — confirms CSS is valid). -- [ ] **Step 6: Commit** +- [x] **Step 6: Commit** ```bash git add user/themes/intotheeast/css/style.css @@ -160,7 +162,7 @@ git commit -m "feat: add back-pill class, card hover lift, flash keyframe; remov **Interfaces:** - Consumes: `.back-pill` class from Task 1 -- [ ] **Step 1: Write the failing test** +- [x] **Step 1: Write the failing test** Add to `tests/ui/stories.spec.js`: @@ -178,7 +180,7 @@ test('S7: story body back link has back-pill class', async ({ page }) => { }); ``` -- [ ] **Step 2: Run test to verify it fails** +- [x] **Step 2: Run test to verify it fails** ```bash npx playwright test --project=chromium tests/ui/stories.spec.js -g "S7:" @@ -186,7 +188,7 @@ npx playwright test --project=chromium tests/ui/stories.spec.js -g "S7:" Expected: FAIL — "locator('.story-footer .back-pill')" found 0 elements. -- [ ] **Step 3: Apply `.back-pill` to the story footer back link + fix `.story-footer a` conflict** +- [x] **Step 3: Apply `.back-pill` to the story footer back link + fix `.story-footer a` conflict** In `story.html.twig`, the story footer currently reads: @@ -222,7 +224,7 @@ Then in `style.css`, find `.story-footer a` and add `:not(.back-pill)` so it no } ``` -- [ ] **Step 4: Run test to verify it passes** +- [x] **Step 4: Run test to verify it passes** ```bash npx playwright test --project=chromium tests/ui/stories.spec.js -g "S7:" @@ -230,7 +232,7 @@ npx playwright test --project=chromium tests/ui/stories.spec.js -g "S7:" Expected: PASS. -- [ ] **Step 5: Run full stories suite to check no regressions** +- [x] **Step 5: Run full stories suite to check no regressions** ```bash npx playwright test --project=chromium tests/ui/stories.spec.js @@ -238,10 +240,10 @@ npx playwright test --project=chromium tests/ui/stories.spec.js Expected: All S1–S7 pass. -- [ ] **Step 6: Commit** +- [x] **Step 6: Commit** ```bash -git add user/themes/intotheeast/templates/story.html.twig tests/ui/stories.spec.js +git add user/themes/intotheeast/templates/story.html.twig user/themes/intotheeast/css/style.css tests/ui/stories.spec.js git commit -m "feat: apply back-pill class to story footer back link" ``` @@ -257,7 +259,7 @@ git commit -m "feat: apply back-pill class to story footer back link" **Interfaces:** - Consumes: `.back-pill` class from Task 1 -- [ ] **Step 1: Write the failing test** +- [x] **Step 1: Write the failing test** Add to `tests/ui/dailies.spec.js`: @@ -279,7 +281,7 @@ test('T6: entry page has fixed back pill at top and back pill in footer', async }); ``` -- [ ] **Step 2: Run test to verify it fails** +- [x] **Step 2: Run test to verify it fails** ```bash npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T6:" @@ -287,7 +289,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T6:" Expected: FAIL — `.entry-back-fixed` not found. -- [ ] **Step 3: Add fixed top back pill to entry template** +- [x] **Step 3: Add fixed top back pill to entry template** In `entry.html.twig`, the content block currently starts with `
`. Add the fixed pill immediately before it: @@ -297,7 +299,7 @@ In `entry.html.twig`, the content block currently starts with `
``` -- [ ] **Step 4: Replace footer teal text link with `.back-pill`** +- [x] **Step 4: Replace footer teal text link with `.back-pill`** The current entry footer (around line 124 of entry.html.twig): @@ -315,7 +317,7 @@ Replace with: ``` -- [ ] **Step 5: Add `.entry-back-fixed` positioning to CSS** +- [x] **Step 5: Add `.entry-back-fixed` positioning to CSS** In `style.css`, in the `/* ── Single entry ──` section, add after the existing `.entry-hero` rules: @@ -328,7 +330,7 @@ In `style.css`, in the `/* ── Single entry ──` section, add after the ex } ``` -- [ ] **Step 6: Run test to verify it passes** +- [x] **Step 6: Run test to verify it passes** ```bash npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T6:" @@ -336,7 +338,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T6:" Expected: PASS. -- [ ] **Step 7: Run full dailies suite to check no regressions** +- [x] **Step 7: Run full dailies suite to check no regressions** ```bash npx playwright test --project=chromium tests/ui/dailies.spec.js @@ -344,7 +346,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js Expected: T1–T6 all pass. -- [ ] **Step 8: Commit** +- [x] **Step 8: Commit** ```bash git add user/themes/intotheeast/templates/entry.html.twig user/themes/intotheeast/css/style.css tests/ui/dailies.spec.js @@ -365,7 +367,7 @@ Collapse the two-level `
**Interfaces:** - Produces: `.entry-card` is now an `` element; `id`, `data-type`, `data-lat`, `data-lng` attributes remain on the card root; `.entry-card-inner` class is eliminated -- [ ] **Step 1: Update T2 test selectors before touching the templates** +- [x] **Step 1: Update T2 test selectors before touching the templates** In `tests/ui/dailies.spec.js`, find the T2 test and replace: @@ -403,7 +405,7 @@ const olderIdx = await olderCard.evaluate(el => { }); ``` -- [ ] **Step 2: Run T2 to verify it fails (not yet refactored)** +- [x] **Step 2: Run T2 to verify it fails (not yet refactored)** ```bash npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T2:" @@ -411,7 +413,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T2:" Expected: FAIL — `.entry-card[href*="..."]` finds 0 elements (the `href` is on the inner ``, not the article). -- [ ] **Step 3: Refactor journal entry card markup in `trip.html.twig`** +- [x] **Step 3: Refactor journal entry card markup in `trip.html.twig`** Find the journal card block: @@ -441,7 +443,7 @@ Replace with: ``` -- [ ] **Step 4: Refactor story-in-feed card markup in `trip.html.twig`** +- [x] **Step 4: Refactor story-in-feed card markup in `trip.html.twig`** Find the story-in-feed card block: @@ -462,7 +464,7 @@ And its closing tags (currently `
`) become: ``` -- [ ] **Step 5: Migrate `.entry-card-inner` CSS rules to `.entry-card`** +- [x] **Step 5: Migrate `.entry-card-inner` CSS rules to `.entry-card`** In `style.css`, find the `/* ── Feed ──` section. Currently: @@ -505,7 +507,7 @@ Then find the two `.entry-card-inner:hover` rules and rename them to `.entry-car .entry-card:hover .entry-title { color: var(--color-accent); } ``` -- [ ] **Step 6: Run T2 to verify it passes** +- [x] **Step 6: Run T2 to verify it passes** ```bash npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T2:" @@ -513,7 +515,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T2:" Expected: PASS. -- [ ] **Step 7: Run full test suites to check no regressions** +- [x] **Step 7: Run full test suites to check no regressions** ```bash npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/trip-filter.spec.js tests/ui/maps.spec.js @@ -521,7 +523,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/trip-fi Expected: T1–T6, F1–F7, M1–M6 all pass. -- [ ] **Step 8: Commit** +- [x] **Step 8: Commit** ```bash git add user/themes/intotheeast/templates/trip.html.twig user/themes/intotheeast/css/style.css tests/ui/dailies.spec.js @@ -539,7 +541,7 @@ git commit -m "refactor: collapse entry card article+a to flat , unify hover **Interfaces:** - Consumes: `.entry-card.is-highlighted` CSS animation from Task 1; `id="entry-{{ slug }}"` on `` from Task 4 -- [ ] **Step 1: Write the failing test** +- [x] **Step 1: Write the failing test** Add to `tests/ui/maps.spec.js`: @@ -559,7 +561,7 @@ test('M7: clicking map marker briefly highlights the corresponding entry card', }); ``` -- [ ] **Step 2: Run test to verify it fails** +- [x] **Step 2: Run test to verify it fails** ```bash npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:" @@ -567,7 +569,7 @@ npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:" Expected: FAIL — `.entry-card.is-highlighted` not found. -- [ ] **Step 3: Update the marker click handler in `trip.html.twig`** +- [x] **Step 3: Update the marker click handler in `trip.html.twig`** Find the existing marker click handler in `trip.html.twig`: @@ -592,7 +594,7 @@ Replace with: }); ``` -- [ ] **Step 4: Run test to verify it passes** +- [x] **Step 4: Run test to verify it passes** ```bash npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:" @@ -600,7 +602,7 @@ npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:" Expected: PASS. -- [ ] **Step 5: Run full maps suite** +- [x] **Step 5: Run full maps suite** ```bash npx playwright test --project=chromium tests/ui/maps.spec.js @@ -608,7 +610,7 @@ npx playwright test --project=chromium tests/ui/maps.spec.js Expected: M1–M7 all pass. -- [ ] **Step 6: Run all affected suites for final check** +- [x] **Step 6: Run all affected suites for final check** ```bash npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/trip-filter.spec.js tests/ui/maps.spec.js tests/ui/stories.spec.js @@ -616,7 +618,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/trip-fi Expected: All pass. -- [ ] **Step 7: Commit** +- [x] **Step 7: Commit** ```bash git add user/themes/intotheeast/templates/trip.html.twig tests/ui/maps.spec.js