Improve mobile responsiveness, error recovery, and timeline UX#17
Merged
Merged
Conversation
- Add sm: breakpoints across form, timeline, event cards, and layout so the app works on narrow viewports (fields stack, indentation tightens, headings scale down) - Preserve form input on server fetch failure and add a "Try again" button to the error alert - Surface event category (conflict/upheaval/political/disaster/cultural) as a themed badge on event cards - Auto-expand the character's birth decade in the timeline - Harden inputs: maxlength on name/location (client + server), inputmode=numeric on year fields - Rotate loading messages during long fetches; add aria-busy - Theme focus-visible rings to match the warm palette - Add sr-only live region announcing expanded decade count - Label decade summary "Events this decade" when nothing is hidden https://claude.ai/code/session_01U2zWLR5pw3C2WY1hgq3hHG
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Assessment of the project found the data pipeline and tests solid, but the UI had concrete gaps: no responsive breakpoints anywhere, fetch failures wiped the user's form input with no retry path, computed event categories were never surfaced, and the timeline started fully collapsed. This PR addresses those plus smaller polish items.
Functionality
+page.server.jsnow returns the submitted field values, so the form stays populated after a failure; the error alert gains a Try again button that resubmits the same values (requestSubmit()through the existinguse:enhanceflow)maxlength="100"on name/location with a matching server-side guard;inputmode="numeric"on year fieldsUX
sm:breakpoints across the form (year fields stack to one column), timeline (tighter indentation/dots), event cards, lifetime summary/oral history cards, and layout; heading sizes scale down on narrow viewportscategoryfield (conflict / upheaval / political / disaster / cultural) now renders as a small tinted pill on event cards{#key}remount keeps this working across submissions)aria-busyon the submit buttonPolish & accessibility
:focus-visiblerings replacing default bluesr-onlylive region announcing expanded decade countTesting
npm run test— 86 tests passnpm run build— cleanhttps://claude.ai/code/session_01U2zWLR5pw3C2WY1hgq3hHG
Generated by Claude Code