Render the garage scene as a responsive card grid on narrow viewports - #27
Open
nice-jan-p wants to merge 5 commits into
Open
Render the garage scene as a responsive card grid on narrow viewports#27nice-jan-p wants to merge 5 commits into
nice-jan-p wants to merge 5 commits into
Conversation
Replace the CSS-grid of square spot-cards with a cartoon-garage scene: cars parked in the painted bays of a fixed background illustration, coloured per occupant, with name chips and dashed 'Park here' markers on free bays. Interaction is self-service (click a free bay to park yourself, click your own car to leave). - new ParkingScene component (same prop contract as the old SpotsGrid) - pure, unit-tested scene-data helpers (bay layout map, name parsing, deterministic per-name hue, inlined car SVG <defs>) - background art + car SVGs added as assets - unmapped spots fall back to a compact card strip so none are hidden
…wports Below 700px the wide garage illustration is unusable, so the scene design now reflows into a fluid grid of spot cards (repeat(auto-fill, minmax(148px, 1fr))). Each card crops the same garage artwork at its bay's real horizontal position, draws the outlined bay number in the colors painted on the wall, and reuses the tintable car SVGs. Tapping a free card parks you, tapping your own card leaves, and a sticky bottom bar shows your reservation with a Cancel action. The wide stage is untouched on desktop; CSS media queries pick which rendering is visible, so SSR and client always agree.
nice-jan-p
marked this pull request as ready for review
September 1, 2026 05:26
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
1 participant
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.
Description: Render the garage scene as a responsive card grid on narrow viewports
Possible impact: Parking scene view, mobile layout, reservation flow, global CSS, fonts
Summary
Built with Claude Code from the
parking-responsive-design/handoff (kept untracked). Below 700px the wide garage illustration is unusable, so the "New design" scene variant now reflows into a fluid grid of spot cards; at ≥700px the wide stage renders exactly as before. Both renderings are always in the DOM and CSS media queries pick one, so SSR and client always agree. The classic grid variant is untouched./parking-bg.jpg) at its bay's real horizontal position (per-floorbackground-size, per-bay pan percentage), so each spot keeps its recognizable surroundings.BAY_LAYOUT.--car-hue, per-bay side/flip) instead of the prototype's CSS-drawn car.aria-disabled). Your spot gets a green YOURS badge and a sticky bottom bar with Cancel; the page-level reservation banner is suppressed only while the card view is active.prefers-reduced-motiondisables the animations.Changes Made
src/components/parking-cards/parking-cards.tsx— the card grid + sticky my-spot barsrc/components/parking-cards/card-data.ts— pure helpers (artwork crop, floor grouping, labels), unit-tested incard-data.test.tssrc/components/parking-scene/parking-scene.tsx— car SVG defs hoisted out of the stage (so<use>resolves while the stage is hidden), cards mountedsrc/global.css— design tokens + parking-cards section, 700px breakpointsrc/root.tsx— Baloo 2 + Nunito via Google FontsTest Plan
npm test— 98 tests green (12 new forcard-data)npm run lintandnpm run build