Skip to content

Postmortem sticks until dismissed; h1 parallaxes with list scroll#97

Merged
pzverkov merged 4 commits intomainfrom
feature/postmortem-sticky-h1-parallax
Apr 22, 2026
Merged

Postmortem sticks until dismissed; h1 parallaxes with list scroll#97
pzverkov merged 4 commits intomainfrom
feature/postmortem-sticky-h1-parallax

Conversation

@pzverkov
Copy link
Copy Markdown
Owner

Two dashboard-polish items that missed the PR #96 merge window.

Summary

  • End-of-run modal no longer dismisses on backdrop click. The postmortem is the only moment to read the run grade and breakdown, and a stray outside tap was silently closing it. Users now close via the Close button or by starting the next run via Play Again / Replay Seed.
  • Sticky dashboard header h1 gets a subtle parallax tied to .sideBody scroll. A passive listener writes a 0..1 ratio to a --side-scroll CSS variable over an 80px scroll range; the h1 translates up 6px and fades to 0.55 opacity at full range. Respects prefers-reduced-motion.

Test plan

  • npm run build
  • npm run test:e2e (22/22 passing; two new specs in core-flows.spec.ts cover the backdrop guard and parallax ratio/opacity)

Two dashboard-polish items for v0.3.4:

1. End-of-run / postmortem modal no longer dismisses on backdrop click.
   The postmortem is the user's only chance to read the run grade and
   breakdown, and a stray outside tap was silently closing it. Users
   now close via the explicit Close button or by starting the next run
   via Play Again / Replay Seed. Escape/close-on-outside was never
   wired for other modals differently, so no other modal changes.

2. Sticky dashboard header h1 gets a subtle parallax tied to sideBody
   scroll. A passive scroll listener computes a 0..1 ratio over an
   80px scroll range and writes it to a --side-scroll CSS variable;
   the h1 translates up 6px and fades to 0.55 opacity at full range.
   Honors prefers-reduced-motion by disabling the transform/opacity
   overrides entirely. will-change hints keep it on the compositor.
Replace the manual verification steps for the two dashboard-polish
items with real assertions:

- end-run modal, backdrop corner click (outside the panel) must leave
  the modal visible; the explicit Close button still dismisses.
- .sideBody scrollTop = 200 (past the 80px parallax range) drives the
  --side-scroll CSS variable above 0.9 and drops h1 opacity below 0.7.

Both run in the desktop Playwright project; full suite is now 22 green
(12 desktop + 10 mobile).
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Apr 22, 2026

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
app-survival-android 46058f2 Commit Preview URL

Branch Preview URL
Apr 22 2026, 05:56 PM

@pzverkov pzverkov self-assigned this Apr 22, 2026
- Move the parallax from .sideHeader h1 to the entire .sideHeader block
  so the title, buttons row, mode row, tab bar, and status strip all
  drift up together as one unit when the user scrolls the card list
  underneath. Transform is -8px at saturation; opacity fade is reduced
  to 0.12 so the buttons and tabs inside the header don't look disabled.
- Rename the Place-component button label from '+ Add' to 'Add'. The
  SVG icon on the button already renders a plus glyph, so the leading
  '+' in the text was redundant.

E2E test updated to assert the CSS variable and opacity on .sideHeader.
@pzverkov pzverkov merged commit 0379eea into main Apr 22, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant