ldraney/westside-app
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Promote jersey page design from playground to production #236

New issue
Closed
opened 2026-04-09 04:33:04 +00:00 by forgejo_admin · 3 comments
forgejo_admin commented 2026-04-09 04:33:04 +00:00
Contributor
Copy link

Type

Feature

Lineage

Standalone — discovered during jersey email send to Ema Angilau. Production jersey page has no CSS definitions for any jersey-* classes. Playground redesign completed and approved.

Repo

forgejo_admin/westside-landing

User Story

As a parent clicking a jersey link from email
I want to see a polished, branded jersey selection page with product images for my child's division
So that I can confidently choose and purchase a jersey

Context

The production /jersey page at src/routes/(app)/jersey/+page.svelte uses ~15 custom CSS classes (jersey-page, jersey-card, jersey-grid, etc.) that have zero style definitions anywhere. The page renders as unstyled HTML. A playground redesign has been completed and approved at ~/westside-playground/jersey.html with full CSS in shared/style.css and inline Svelte conversion annotations.

Key design decisions already made:

  • Two options only: Reversible ($90) and Jersey + Warmup ($130). No opt-out card.
  • Division-conditional images: Queens gear for girls, Kings gear for boys (API already returns division)
  • Public layout (site-nav + footer) instead of authenticated app layout (bottom-nav) — token auth doesn't need Keycloak session chrome
  • SvelteKit route groups don't affect URLs, so moving from (app) to (public) preserves all existing /jersey?token=... links

File Targets

Files the agent should modify or create:

  • src/app.css — add jersey component CSS from playground shared/style.css (~lines 4002+)
  • src/routes/(public)/jersey/+page.svelte — new location, replace template markup with playground HTML + Svelte bindings, keep existing <script> block
  • src/routes/(public)/jersey/success/+page.svelte — move from (app)
  • src/routes/(public)/jersey/cancel/+page.svelte — move from (app)

Files the agent should NOT touch:

  • API endpoints — zero backend changes
  • src/routes/(app)/ layout files — unrelated

Source playground files (read-only reference):

  • ~/westside-playground/jersey.html — annotated HTML with @-comment specs
  • ~/westside-playground/shared/style.css — jersey CSS classes at bottom

Acceptance Criteria

  • When I open /jersey?token=<valid_token> for a girls player, then I see Queens jersey images
  • When I open /jersey?token=<valid_token> for a boys player, then I see Kings jersey images
  • When I select a size and valid number, then the Order button enables
  • When I click Order, then I'm redirected to Stripe checkout (same flow as before)
  • When I view on mobile, then cards stack vertically with natural image aspect ratios
  • When I view on desktop, then cards display in a 2-column grid
  • Opt-out option is not rendered
  • Page uses public layout (site-nav + footer), not app layout (bottom-nav)

Test Expectations

  • Existing token links still resolve to /jersey page
  • Manual test: open a real tokenized link, complete Stripe checkout
  • Visual check: mobile and desktop layouts match playground
  • Run command: N/A — visual promotion, no unit tests

Constraints

  • Keep entire existing <script> block unchanged — all API logic, validation, Stripe integration stays
  • Zero URL changes — existing emailed links must not break
  • CSS must use design system tokens from shared/style.css (no hardcoded values)
  • No inline <style> blocks — all CSS in app.css
  • Jersey images: use local assets or MinIO URLs keyed by division

Checklist

  • PR opened
  • No unrelated changes
  • Mobile screenshot attached
  • Desktop screenshot attached
  • Tested with real tokenized link

Related

  • project-westside-basketball — parent project
  • Playground: https://playground.tail5b443a.ts.net/westside/jersey.html
### Type Feature ### Lineage Standalone — discovered during jersey email send to Ema Angilau. Production jersey page has no CSS definitions for any `jersey-*` classes. Playground redesign completed and approved. ### Repo `forgejo_admin/westside-landing` ### User Story As a parent clicking a jersey link from email I want to see a polished, branded jersey selection page with product images for my child's division So that I can confidently choose and purchase a jersey ### Context The production `/jersey` page at `src/routes/(app)/jersey/+page.svelte` uses ~15 custom CSS classes (`jersey-page`, `jersey-card`, `jersey-grid`, etc.) that have zero style definitions anywhere. The page renders as unstyled HTML. A playground redesign has been completed and approved at `~/westside-playground/jersey.html` with full CSS in `shared/style.css` and inline Svelte conversion annotations. Key design decisions already made: - Two options only: Reversible ($90) and Jersey + Warmup ($130). No opt-out card. - Division-conditional images: Queens gear for girls, Kings gear for boys (API already returns `division`) - Public layout (site-nav + footer) instead of authenticated app layout (bottom-nav) — token auth doesn't need Keycloak session chrome - SvelteKit route groups don't affect URLs, so moving from `(app)` to `(public)` preserves all existing `/jersey?token=...` links ### File Targets Files the agent should modify or create: - `src/app.css` — add jersey component CSS from playground `shared/style.css` (~lines 4002+) - `src/routes/(public)/jersey/+page.svelte` — new location, replace template markup with playground HTML + Svelte bindings, keep existing `<script>` block - `src/routes/(public)/jersey/success/+page.svelte` — move from `(app)` - `src/routes/(public)/jersey/cancel/+page.svelte` — move from `(app)` Files the agent should NOT touch: - API endpoints — zero backend changes - `src/routes/(app)/` layout files — unrelated Source playground files (read-only reference): - `~/westside-playground/jersey.html` — annotated HTML with `@-comment` specs - `~/westside-playground/shared/style.css` — jersey CSS classes at bottom ### Acceptance Criteria - [ ] When I open `/jersey?token=<valid_token>` for a girls player, then I see Queens jersey images - [ ] When I open `/jersey?token=<valid_token>` for a boys player, then I see Kings jersey images - [ ] When I select a size and valid number, then the Order button enables - [ ] When I click Order, then I'm redirected to Stripe checkout (same flow as before) - [ ] When I view on mobile, then cards stack vertically with natural image aspect ratios - [ ] When I view on desktop, then cards display in a 2-column grid - [ ] Opt-out option is not rendered - [ ] Page uses public layout (site-nav + footer), not app layout (bottom-nav) ### Test Expectations - [ ] Existing token links still resolve to `/jersey` page - [ ] Manual test: open a real tokenized link, complete Stripe checkout - [ ] Visual check: mobile and desktop layouts match playground - Run command: N/A — visual promotion, no unit tests ### Constraints - Keep entire existing `<script>` block unchanged — all API logic, validation, Stripe integration stays - Zero URL changes — existing emailed links must not break - CSS must use design system tokens from `shared/style.css` (no hardcoded values) - No inline `<style>` blocks — all CSS in `app.css` - Jersey images: use local assets or MinIO URLs keyed by division ### Checklist - [ ] PR opened - [ ] No unrelated changes - [ ] Mobile screenshot attached - [ ] Desktop screenshot attached - [ ] Tested with real tokenized link ### Related - `project-westside-basketball` — parent project - Playground: `https://playground.tail5b443a.ts.net/westside/jersey.html`
forgejo_admin commented 2026-04-09 04:38:06 +00:00
Author
Contributor
Copy link

Scope Review: NEEDS_REFINEMENT

Review note: review-907-2026-04-08

Well-scoped feature ticket with complete template, verified file targets, and solid acceptance criteria. Two minor issues:

  • [SCOPE] Architecture note arch-frontend does not exist in pal-e-docs. Create it to complete the traceability triangle.
  • [LABEL] Board item #907 has an empty title -- needs to be set to match this issue title.

All file targets verified against the codebase. No decomposition needed (single repo, atomic visual promotion). Note dependency overlap with #696 (session auth) and #718 (opt-out removal) in QA column.

## Scope Review: NEEDS_REFINEMENT Review note: `review-907-2026-04-08` Well-scoped feature ticket with complete template, verified file targets, and solid acceptance criteria. Two minor issues: - **[SCOPE]** Architecture note `arch-frontend` does not exist in pal-e-docs. Create it to complete the traceability triangle. - **[LABEL]** Board item #907 has an empty title -- needs to be set to match this issue title. All file targets verified against the codebase. No decomposition needed (single repo, atomic visual promotion). Note dependency overlap with #696 (session auth) and #718 (opt-out removal) in QA column.
forgejo_admin commented 2026-04-09 04:41:14 +00:00
Author
Contributor
Copy link

Scope Review: READY

Review note: review-907-2026-04-08-v2
Re-review after refinement — both previous issues resolved (arch:landing-site label applied, board item title set). All file targets verified, traceability complete, 8 AC testable, no decomposition needed. One systemic [SCOPE] note: arch-landing-site architecture note missing from pal-e-docs (affects 30+ board items, not a blocker for this ticket).

## Scope Review: READY Review note: `review-907-2026-04-08-v2` Re-review after refinement — both previous issues resolved (arch:landing-site label applied, board item title set). All file targets verified, traceability complete, 8 AC testable, no decomposition needed. One systemic [SCOPE] note: `arch-landing-site` architecture note missing from pal-e-docs (affects 30+ board items, not a blocker for this ticket).
forgejo_admin commented 2026-04-09 13:41:08 +00:00
Author
Contributor
Copy link

Validation: PASS

Tiers executed: Tier 3 (production)
Validation note: validation-236-2026-04-08

8 checks: 8 PASS, 0 FAIL

# Criterion Result
1 Girls token → Queens images PASS
2 Boys token → Kings images PASS
3 Size + number enables Order button; taken numbers rejected PASS
4 Order → Stripe checkout (same flow, script unchanged) PASS (deferred)
5 Mobile: cards stack vertically PASS
6 Desktop: 2-column grid PASS
7 No opt-out option rendered PASS
8 Public layout (site-nav + footer) PASS

Regression: Root, /jersey/success, /jersey/cancel, /schedule all return 200. 0 console errors.
Deployment: Pod running, 0 restarts, ArgoCD Synced+Healthy, pipeline #242 green.

## Validation: PASS Tiers executed: Tier 3 (production) Validation note: `validation-236-2026-04-08` **8 checks: 8 PASS, 0 FAIL** | # | Criterion | Result | |---|-----------|--------| | 1 | Girls token → Queens images | PASS | | 2 | Boys token → Kings images | PASS | | 3 | Size + number enables Order button; taken numbers rejected | PASS | | 4 | Order → Stripe checkout (same flow, script unchanged) | PASS (deferred) | | 5 | Mobile: cards stack vertically | PASS | | 6 | Desktop: 2-column grid | PASS | | 7 | No opt-out option rendered | PASS | | 8 | Public layout (site-nav + footer) | PASS | **Regression:** Root, /jersey/success, /jersey/cancel, /schedule all return 200. 0 console errors. **Deployment:** Pod running, 0 restarts, ArgoCD Synced+Healthy, pipeline #242 green.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
251-docs-populate-ws-s26-prospect-user-story
252-docs-create-arch-landing-site-architectu
236-fix-jersey-image-urls
hotfix-jersey-image-urls
232-improve-public-roster-page-accuracy-and
180-fix-jersey-deadline
142-validate-coach-login-and-read-only-roste
139-fix-admin-dashboard-stats-showing-all-ze
129-validate-girls-draft-board-coach-login-a
204-auto-tag-update
deploy-update-image-tag
110-fix-harbor-push-target
No results found.
Labels
Clear labels   
domain:backend

   
domain:devops

   
domain:frontend
No labels
domain:backend
domain:devops
domain:frontend
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
ldraney/westside-app#236
No description provided.