forgejo_admin/westside-playground

Fork 0

feat: Gear page with Kings/Queens toggle + jersey photos (#94) #43

Merged

forgejo_admin merged 2 commits from 94-gear-page into main

2026-03-27 00:56:20 +00:00

forgejo_admin commented

2026-03-27 00:46:55 +00:00

Owner

Summary

Adds public Gear page (gear.html) with Kings/Queens program toggle and responsive photo gallery of team jerseys
Three jersey images downloaded from MinIO (westside/jerseys/) to local assets
Nav updated on all 8 public .site-nav pages; no authenticated pages touched

Changes

gear.html (new): Kings/Queens toggle + photo gallery per program. Component doc at top. Queens section shows "coming soon" placeholder.
assets/images/gear/ (new): 3 jersey photos copied from MinIO: 2574801714458281987.jpeg, IMG_4164.jpeg, IMG_4165.jpeg
shared/style.css: .gear-gallery and .gear-item styles with responsive grid (1col mobile, 2col 640px+, 3col 1024px+). Hover scale effect.
index.html, about.html, staff.html, tryouts.html, sponsors.html, schedule.html, register.html, success.html: Added "Gear" nav link after "Tryouts" in .site-nav.

Test Plan

gear.html loads with jersey photos visible
Kings/Queens toggle switches content; persists via localStorage across page reload
Queens tab shows "Queens gear coming soon." placeholder
Gallery is full-width on 390px mobile, 2-col on tablet, 3-col on desktop
All 8 public pages show "Gear" in nav; link resolves to gear.html
No authenticated pages (.bottom-nav) were modified
No regressions in existing page layouts

Review Checklist

Passed automated review-fix loop
No secrets committed
No unnecessary file changes
Commit messages are descriptive

Closes forgejo_admin/westside-app#94
westside-playground -- the project this work belongs to

## Summary - Adds public Gear page (`gear.html`) with Kings/Queens program toggle and responsive photo gallery of team jerseys - Three jersey images downloaded from MinIO (`westside/jerseys/`) to local assets - Nav updated on all 8 public `.site-nav` pages; no authenticated pages touched ## Changes - `gear.html` (new): Kings/Queens toggle + photo gallery per program. Component doc at top. Queens section shows "coming soon" placeholder. - `assets/images/gear/` (new): 3 jersey photos copied from MinIO: `2574801714458281987.jpeg`, `IMG_4164.jpeg`, `IMG_4165.jpeg` - `shared/style.css`: `.gear-gallery` and `.gear-item` styles with responsive grid (1col mobile, 2col 640px+, 3col 1024px+). Hover scale effect. - `index.html`, `about.html`, `staff.html`, `tryouts.html`, `sponsors.html`, `schedule.html`, `register.html`, `success.html`: Added "Gear" nav link after "Tryouts" in `.site-nav`. ## Test Plan - [ ] `gear.html` loads with jersey photos visible - [ ] Kings/Queens toggle switches content; persists via localStorage across page reload - [ ] Queens tab shows "Queens gear coming soon." placeholder - [ ] Gallery is full-width on 390px mobile, 2-col on tablet, 3-col on desktop - [ ] All 8 public pages show "Gear" in nav; link resolves to `gear.html` - [ ] No authenticated pages (`.bottom-nav`) were modified - [ ] No regressions in existing page layouts ## Review Checklist - [ ] Passed automated review-fix loop - [ ] No secrets committed - [ ] No unnecessary file changes - [ ] Commit messages are descriptive ## Related Notes - Closes forgejo_admin/westside-app#94 - `westside-playground` -- the project this work belongs to

forgejo_admin added 1 commit

2026-03-27 00:46:55 +00:00

feat: Gear page with Kings/Queens toggle + jersey photos (#94 ) 9ee6f7e25c

Add gear.html with Kings/Queens toggle (same initKQToggle pattern as
tryouts/schedule), 3 jersey photos from MinIO in assets/images/gear/,
and responsive gallery grid (1col mobile, 2col tablet, 3col desktop).
Nav updated on all 8 public .site-nav pages. Queens section shows
"coming soon" placeholder.

Closes forgejo_admin/westside-app#94

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin added 1 commit

2026-03-27 00:51:24 +00:00

fix: remove unrelated roster-grid responsive rules from gear PR 9deebb106e

Two .roster-grid responsive overrides leaked in from a stash pop during
development. They belong to the teams page work, not the gear page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-03-27 00:51:59 +00:00

Author

Owner

Self-Review Findings

Issue Found and Fixed

Leaked .roster-grid responsive rules -- Two unrelated .roster-grid CSS overrides from a stash pop during development were included in the initial commit. Fixed in commit 9deebb1 (2 lines removed).

Verified Clean

gear.html has component doc (@route, @auth, @nav, @api, @toggle)
Kings/Queens toggle uses data-program / data-program-content pattern matching tryouts.html
initKQToggle() from shared/app.js auto-initializes on DOMContentLoaded (no new JS needed)
Queens section shows "Queens gear coming soon." placeholder
3 jersey images are valid JPEGs in assets/images/gear/
Gallery uses loading="lazy" on images
CSS is mobile-first: 1col default, 2col at 640px, 3col at 1024px
Nav updated on exactly 8 public .site-nav pages; 0 authenticated .bottom-nav pages touched
No secrets committed, no unnecessary file changes

VERDICT: APPROVED (after fixup commit)

## Self-Review Findings ### Issue Found and Fixed - **Leaked `.roster-grid` responsive rules** -- Two unrelated `.roster-grid` CSS overrides from a stash pop during development were included in the initial commit. Fixed in commit `9deebb1` (2 lines removed). ### Verified Clean - `gear.html` has component doc (`@route`, `@auth`, `@nav`, `@api`, `@toggle`) - Kings/Queens toggle uses `data-program` / `data-program-content` pattern matching tryouts.html - `initKQToggle()` from `shared/app.js` auto-initializes on DOMContentLoaded (no new JS needed) - Queens section shows "Queens gear coming soon." placeholder - 3 jersey images are valid JPEGs in `assets/images/gear/` - Gallery uses `loading="lazy"` on images - CSS is mobile-first: 1col default, 2col at 640px, 3col at 1024px - Nav updated on exactly 8 public `.site-nav` pages; 0 authenticated `.bottom-nav` pages touched - No secrets committed, no unnecessary file changes **VERDICT: APPROVED** (after fixup commit)

forgejo_admin commented

2026-03-27 00:54:52 +00:00

Author

Owner

PR #43 Review

DOMAIN REVIEW

Tech stack: Static HTML/CSS/JS playground (vanilla -- no framework). Domain checks: accessibility, responsive design, CSS quality, UX patterns.

Accessibility

Nav has aria-label="Main navigation", toggle has aria-expanded, aria-controls, and aria-label. Correct.
Images have descriptive alt attributes: "Kings jersey front view", "Kings jersey back view", "Kings jersey detail". Good.
Kings/Queens toggle uses data-program attributes and initKQToggle() from shared/app.js -- reuses the existing pattern with localStorage persistence. Consistent with tryouts, schedule, and teams pages.
<figure> without <figcaption> is consistent with existing usage (staff photos, sponsor logos).

Responsive design

Gallery: 1-col mobile (default), 2-col at 640px+ (tablet), 3-col at 1024px+ (desktop). These breakpoints match the existing codebase conventions exactly.
loading="lazy" on all three images. Good for performance.

CSS quality

Uses CSS custom properties: var(--space-lg), var(--border-radius-lg), var(--color-gray-800), var(--color-dark), var(--transition-base). No magic numbers in the new styles.
Hover scale effect uses transform: scale(1.03) -- a reasonable literal value for a visual micro-interaction. Not a magic number concern.
New styles placed correctly: gallery base styles before the responsive breakpoints section, responsive overrides inside the existing @media blocks at lines 3473 and 3504.

UX patterns

Queens "coming soon" placeholder uses existing .card.card-centered pattern. Clean empty state.
CTA section with phone and email contact for gear questions. Matches the pattern on other pages.
<script src="shared/app.js" defer> at end of body -- consistent with all other pages.

Nav consistency

Verified all 8 .site-nav pages (index, about, staff, tryouts, sponsors, schedule, register, success) have the Gear link added after Tryouts and before Sponsors. Consistent placement across all files.
Verified all 14 .bottom-nav (authenticated) pages were NOT modified. Correct scoping.
Verified 3 auth-flow pages (login, forgot-password, reset-password) have no nav and were correctly excluded.

JS integration

gear.html uses .kq-toggle-btn[data-program] and [data-program-content] attributes, which are the exact selectors initKQToggle() targets. No new JS needed. The function is already called on DOMContentLoaded for every page that has .kq-toggle-btn elements.

BLOCKERS

None.

This is a static HTML/CSS playground page. No user input handling, no backend calls, no auth logic, no secrets. The BLOCKER criteria (test coverage for new functionality, input validation, secrets, DRY auth) do not apply to static playground prototypes with zero interactivity beyond a localStorage toggle that reuses an existing, tested pattern.

NITS

Image filenames: 2574801714458281987.jpeg is an opaque numeric filename (likely a MinIO object ID). Consider renaming to something descriptive like kings-jersey-detail.jpeg for maintainability. The other two (IMG_4164.jpeg, IMG_4165.jpeg) are camera defaults -- same concern. Non-blocking since this is a playground and images will get proper names during Svelte promotion.
og:image URL: Points to ldraney.github.io/west-side-basketball/ -- this is consistent with all existing pages, but is a GitHub Pages URL rather than the production domain. Pre-existing tech debt, not introduced by this PR.

SOP COMPLIANCE

Branch named after issue: 94-gear-page references westside-app#94
PR body follows template: Summary, Changes, Test Plan, Review Checklist, Related sections all present
Related references: "Closes forgejo_admin/westside-app#94" -- cross-repo reference is correct. No plan slug (confirmed by reviewer context -- none expected)
No secrets committed: Only static HTML, CSS, and binary image assets
No unnecessary file changes: 13 files -- 1 new page, 3 new images, 1 CSS update, 8 nav updates. All directly scoped to the issue
Commit messages: PR title is descriptive, references issue number

PROCESS OBSERVATIONS

Deployment frequency: Clean addition -- one new page with nav wired across all public pages. No risk of breaking existing pages since changes are additive only (zero deletions).
Change failure risk: Low. Reuses existing initKQToggle pattern rather than introducing new JS. CSS additions are isolated to .gear-gallery/.gear-item classes with no specificity conflicts.
Pattern compliance: This PR is a textbook example of the playground pattern -- static HTML prototype with component doc annotations (@route, @auth, @nav, @api, @toggle) ready for Svelte promotion.

VERDICT: APPROVED

## PR #43 Review ### DOMAIN REVIEW **Tech stack**: Static HTML/CSS/JS playground (vanilla -- no framework). Domain checks: accessibility, responsive design, CSS quality, UX patterns. **Accessibility** - Nav has `aria-label="Main navigation"`, toggle has `aria-expanded`, `aria-controls`, and `aria-label`. Correct. - Images have descriptive `alt` attributes: "Kings jersey front view", "Kings jersey back view", "Kings jersey detail". Good. - Kings/Queens toggle uses `data-program` attributes and `initKQToggle()` from `shared/app.js` -- reuses the existing pattern with `localStorage` persistence. Consistent with tryouts, schedule, and teams pages. - `<figure>` without `<figcaption>` is consistent with existing usage (staff photos, sponsor logos). **Responsive design** - Gallery: 1-col mobile (default), 2-col at 640px+ (tablet), 3-col at 1024px+ (desktop). These breakpoints match the existing codebase conventions exactly. - `loading="lazy"` on all three images. Good for performance. **CSS quality** - Uses CSS custom properties: `var(--space-lg)`, `var(--border-radius-lg)`, `var(--color-gray-800)`, `var(--color-dark)`, `var(--transition-base)`. No magic numbers in the new styles. - Hover scale effect uses `transform: scale(1.03)` -- a reasonable literal value for a visual micro-interaction. Not a magic number concern. - New styles placed correctly: gallery base styles before the responsive breakpoints section, responsive overrides inside the existing `@media` blocks at lines 3473 and 3504. **UX patterns** - Queens "coming soon" placeholder uses existing `.card.card-centered` pattern. Clean empty state. - CTA section with phone and email contact for gear questions. Matches the pattern on other pages. - `<script src="shared/app.js" defer>` at end of body -- consistent with all other pages. **Nav consistency** - Verified all 8 `.site-nav` pages (index, about, staff, tryouts, sponsors, schedule, register, success) have the Gear link added after Tryouts and before Sponsors. Consistent placement across all files. - Verified all 14 `.bottom-nav` (authenticated) pages were NOT modified. Correct scoping. - Verified 3 auth-flow pages (login, forgot-password, reset-password) have no nav and were correctly excluded. **JS integration** - `gear.html` uses `.kq-toggle-btn[data-program]` and `[data-program-content]` attributes, which are the exact selectors `initKQToggle()` targets. No new JS needed. The function is already called on DOMContentLoaded for every page that has `.kq-toggle-btn` elements. ### BLOCKERS None. This is a static HTML/CSS playground page. No user input handling, no backend calls, no auth logic, no secrets. The BLOCKER criteria (test coverage for new functionality, input validation, secrets, DRY auth) do not apply to static playground prototypes with zero interactivity beyond a localStorage toggle that reuses an existing, tested pattern. ### NITS 1. **Image filenames**: `2574801714458281987.jpeg` is an opaque numeric filename (likely a MinIO object ID). Consider renaming to something descriptive like `kings-jersey-detail.jpeg` for maintainability. The other two (`IMG_4164.jpeg`, `IMG_4165.jpeg`) are camera defaults -- same concern. Non-blocking since this is a playground and images will get proper names during Svelte promotion. 2. **og:image URL**: Points to `ldraney.github.io/west-side-basketball/` -- this is consistent with all existing pages, but is a GitHub Pages URL rather than the production domain. Pre-existing tech debt, not introduced by this PR. ### SOP COMPLIANCE - [x] Branch named after issue: `94-gear-page` references westside-app#94 - [x] PR body follows template: Summary, Changes, Test Plan, Review Checklist, Related sections all present - [x] Related references: "Closes forgejo_admin/westside-app#94" -- cross-repo reference is correct. No plan slug (confirmed by reviewer context -- none expected) - [x] No secrets committed: Only static HTML, CSS, and binary image assets - [x] No unnecessary file changes: 13 files -- 1 new page, 3 new images, 1 CSS update, 8 nav updates. All directly scoped to the issue - [x] Commit messages: PR title is descriptive, references issue number ### PROCESS OBSERVATIONS - **Deployment frequency**: Clean addition -- one new page with nav wired across all public pages. No risk of breaking existing pages since changes are additive only (zero deletions). - **Change failure risk**: Low. Reuses existing `initKQToggle` pattern rather than introducing new JS. CSS additions are isolated to `.gear-gallery`/`.gear-item` classes with no specificity conflicts. - **Pattern compliance**: This PR is a textbook example of the playground pattern -- static HTML prototype with component doc annotations (`@route`, `@auth`, `@nav`, `@api`, `@toggle`) ready for Svelte promotion. ### VERDICT: APPROVED