forgejo_admin/westside-playground
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

feat: unify CSS/JS into single files (#85) #36

Merged
forgejo_admin merged 3 commits from 85-css-js-unification into main 2026-03-26 17:24:12 +00:00
Conversation 2 Commits 3 Files changed 25 +3223 -4292
forgejo_admin commented 2026-03-26 16:03:07 +00:00
Owner
Copy link

Summary

  • Merge two incompatible CSS files (brand + authenticated layouts) into one unified shared/style.css with the red/black westside brand as the visual identity for all pages
  • Consolidate duplicate JS files into single shared/app.js with mobile nav toggle incorporated
  • Update all 18 HTML pages and remove 5 dead files + 2 empty directories

Changes

  • shared/style.css (new, 3175 lines): unified design system merging css/style.css (brand foundation) with shared/app.css (authenticated page components). Status color tokens, token aliases, and all responsive breakpoints preserved.
  • shared/app.js (modified, +18 lines): mobile nav toggle added to DOMContentLoaded auto-init from the 20-line duplicate files
  • All 18 HTML pages: CSS refs -> shared/style.css, JS refs -> shared/app.js, missing JS refs added
  • Removed: shared/app.css, shared/westside-style.css, shared/westside-main.js, css/style.css, js/main.js, css/, js/

Test Plan

  • ls shared/ shows only style.css, app.js, logo.jpeg
  • No HTML page references old files (app.css, westside-style.css, westside-main.js, js/main.js, css/style.css)
  • Every HTML page renders on 390px mobile viewport
  • Mobile nav toggle works on public pages (westside-index, staff, sponsors, success, original-index)
  • Authenticated pages retain layouts (admin, coach, register, billing, etc.)
  • Lucas phone review gate before sub-tickets 2/3/4

Review Checklist

  • No secrets committed
  • No unnecessary file changes
  • Commit messages are descriptive
  • All 18 pages verified: 1 CSS ref + 1 JS ref each
  • Zero references to removed files remain in HTML

Related

## Summary - Merge two incompatible CSS files (brand + authenticated layouts) into one unified `shared/style.css` with the red/black westside brand as the visual identity for all pages - Consolidate duplicate JS files into single `shared/app.js` with mobile nav toggle incorporated - Update all 18 HTML pages and remove 5 dead files + 2 empty directories ## Changes - `shared/style.css` (new, 3175 lines): unified design system merging `css/style.css` (brand foundation) with `shared/app.css` (authenticated page components). Status color tokens, token aliases, and all responsive breakpoints preserved. - `shared/app.js` (modified, +18 lines): mobile nav toggle added to DOMContentLoaded auto-init from the 20-line duplicate files - All 18 HTML pages: CSS refs -> `shared/style.css`, JS refs -> `shared/app.js`, missing JS refs added - Removed: `shared/app.css`, `shared/westside-style.css`, `shared/westside-main.js`, `css/style.css`, `js/main.js`, `css/`, `js/` ## Test Plan - [ ] `ls shared/` shows only `style.css`, `app.js`, `logo.jpeg` - [ ] No HTML page references old files (app.css, westside-style.css, westside-main.js, js/main.js, css/style.css) - [ ] Every HTML page renders on 390px mobile viewport - [ ] Mobile nav toggle works on public pages (westside-index, staff, sponsors, success, original-index) - [ ] Authenticated pages retain layouts (admin, coach, register, billing, etc.) - [ ] Lucas phone review gate before sub-tickets 2/3/4 ## Review Checklist - [x] No secrets committed - [x] No unnecessary file changes - [x] Commit messages are descriptive - [x] All 18 pages verified: 1 CSS ref + 1 JS ref each - [x] Zero references to removed files remain in HTML ## Related - Closes forgejo_admin/westside-app#85 - Parent: forgejo_admin/westside-app#84 (playground overhaul) - Depends on PR #35 (75-strip-tryout-content) being merged first
Remove stale tryout banner, tryout details section, all Stripe payment
links, and "Register Now" CTAs. Update practice count from 3 to 2 per
week in About card and FAQ. Replace "How It Works" tryout flow with
general "How to Join" section. Replace bottom CTA with "Join Westside"
messaging. Remove nav Tryouts link. Update meta descriptions.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copies all HTML, CSS, JS, and assets from west-side-basketball so the
playground serves a working mirror of the full site. Updates
westside-index.html to reference real css/style.css and js/main.js
instead of shared/ copies.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Merge css/style.css (westside red/black brand) and shared/app.css
(authenticated page layouts) into one shared/style.css. Add mobile nav
toggle from duplicate JS files into shared/app.js. Update all 18 HTML
pages to reference the unified files. Remove 5 dead files and 2 empty
directories.

- shared/style.css: unified design system (brand + authenticated layouts)
- shared/app.js: single JS file with nav toggle incorporated
- All pages: CSS -> shared/style.css, JS -> shared/app.js
- Removed: shared/app.css, shared/westside-style.css,
  shared/westside-main.js, css/style.css, js/main.js, css/, js/

Closes forgejo_admin/westside-app#85

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
forgejo_admin commented 2026-03-26 16:05:04 +00:00
Author
Owner
Copy link

Self-Review

Scope: 25 files changed, +3223 / -4292 lines. Single commit on 85-css-js-unification based on 75-strip-tryout-content.

Verified

  • All 18 HTML pages have exactly 1 CSS ref (shared/style.css) and 1 JS ref (shared/app.js)
  • Zero references to removed files (app.css, westside-style.css, westside-main.js, css/style.css, js/main.js)
  • shared/ contains only style.css, app.js, logo.jpeg
  • css/ and js/ directories removed
  • No secrets committed
  • All CSS classes used in HTML are defined in style.css (2 structural wrapper classes faq-list, hero-content were never styled in originals either)
  • Mobile nav toggle integrated into app.js DOMContentLoaded auto-init
  • Token aliases (--radius, --transition) preserved for backward compat with authenticated page components
  • All responsive breakpoints from both files preserved and consolidated

Known trade-off

  • --max-width changed from 900px (app.css) to 1200px (brand CSS) for authenticated pages. This only affects desktop viewport -- on 390px mobile (the review gate) content is identical. The 1200px value is correct for the unified brand.

Dependency

  • This PR targets main but includes commits from 75-strip-tryout-content (PR #35). PR #35 must merge first for a clean diff. The single commit from this PR is edf21dc.

No issues found. Ready for phone review.

## Self-Review **Scope:** 25 files changed, +3223 / -4292 lines. Single commit on `85-css-js-unification` based on `75-strip-tryout-content`. ### Verified - All 18 HTML pages have exactly 1 CSS ref (`shared/style.css`) and 1 JS ref (`shared/app.js`) - Zero references to removed files (`app.css`, `westside-style.css`, `westside-main.js`, `css/style.css`, `js/main.js`) - `shared/` contains only `style.css`, `app.js`, `logo.jpeg` - `css/` and `js/` directories removed - No secrets committed - All CSS classes used in HTML are defined in style.css (2 structural wrapper classes `faq-list`, `hero-content` were never styled in originals either) - Mobile nav toggle integrated into app.js DOMContentLoaded auto-init - Token aliases (`--radius`, `--transition`) preserved for backward compat with authenticated page components - All responsive breakpoints from both files preserved and consolidated ### Known trade-off - `--max-width` changed from `900px` (app.css) to `1200px` (brand CSS) for authenticated pages. This only affects desktop viewport -- on 390px mobile (the review gate) content is identical. The 1200px value is correct for the unified brand. ### Dependency - This PR targets `main` but includes commits from `75-strip-tryout-content` (PR #35). PR #35 must merge first for a clean diff. The single commit from this PR is `edf21dc`. ### No issues found. Ready for phone review.
forgejo_admin commented 2026-03-26 17:21:44 +00:00
Author
Owner
Copy link

PR #36 Review

PR: feat: unify CSS/JS into single files (#85)
Branch: 85-css-js-unification
Parent issue: forgejo_admin/westside-app#85 — Playground overhaul 1/4: CSS/JS unification

DOMAIN REVIEW

Tech stack: Static HTML playground (18 pages), vanilla CSS, vanilla JS. Mobile-first design system with red/black brand.

CSS quality (shared/style.css — 3175 lines):

  • Design tokens are well-structured in :root — colors, typography, spacing, layout, transitions all tokenized
  • Clear section organization with /* ============ Section Name ============ */ comment blocks throughout
  • Mobile-first approach confirmed: base styles target mobile, @media (min-width: 640px) for tablet, @media (min-width: 1024px) for desktop, @media (max-width: 400px) for small mobile
  • No duplicate selector definitions found — the merge from two files (app.css + style.css) was done cleanly
  • :focus-visible styles present (line 116) with red outline for keyboard navigation
  • .sr-only screen reader utility class present (line 135)
  • Button system is comprehensive: .btn, .btn-primary, .btn-outline, .btn-secondary, .btn-danger, .btn-disabled, .btn-sm, .btn-lg, .btn-block
  • Status colors use semantic variables: --color-green, --color-danger, --color-yellow, --color-blue with matching bg/border variants

JS quality (shared/app.js — 428 lines):

  • Clean section organization matching CSS pattern
  • DOMContentLoaded auto-init detects page features and wires up appropriate handlers
  • Tab system uses ARIA attributes (aria-selected, aria-controls) correctly
  • Filter system supports URL param state (?filter=X)
  • Teams board has full CRUD: create team, delete team, assign/unassign players, drag-to-reorder, coach picker
  • localStorage draft/view state persistence for teams board

HTML quality (18 pages):

  • All 18 pages have lang="en", viewport meta, and reference shared/style.css + shared/app.js
  • Structured @route, @auth, @api, @state, @interactivity, @gaps, @notes comment specs in HTML serve as SvelteKit promotion guides — excellent documentation
  • ARIA labels on navigation (aria-label="Main navigation"), hamburger (aria-expanded, aria-controls), tabs (role="tab", aria-selected)
  • No stale CSS/JS files remain at root — only shared/style.css, shared/app.js, shared/logo.jpeg, and assets/images/

Accessibility:

  • Focus styles present via :focus-visible
  • ARIA attributes on interactive elements (nav, tabs, toggles)
  • sr-only class available
  • Hamburger menu uses aria-expanded state toggling in JS

BLOCKERS

None. This is a static HTML playground — no server-side code, no user input processing, no auth flows, no secrets. The BLOCKER criteria (test coverage, input validation, secrets, DRY auth) do not apply to playground prototype consolidation.

NITS

  1. Inconsistent defer attribute on script tags. 11 pages use <script src="shared/app.js" defer>, 7 pages omit defer. Since the scripts are at the bottom of <body> and onclick handlers fire well after load, defer would work on all pages. The admin-teams.html inline <script> block following the tag is the one legitimate reason to omit defer on that page, but the other 6 pages without it (register, player-profile, coach, billing, admin-players) could be consistent. Non-blocking.

  2. Dead file: shared/logo.jpeg. The file exists in the shared/ directory but no HTML page references it. All logo references point to either assets/images/logo.jpeg (public pages) or https://minio-api.tail5b443a.ts.net/assets/westside/branding/logo.jpeg (authenticated pages). Could be cleaned up or documented as intentional.

  3. Stale OG meta URLs. westside-index.html, staff.html, original-index.html reference https://ldraney.github.io/west-side-basketball/ in Open Graph tags. These are GitHub Pages URLs from before the Tailscale migration. Non-blocking for playground — will be corrected when promoting to SvelteKit.

  4. Some raw values instead of design tokens. A handful of places use hardcoded rem values (e.g., 0.4rem, 0.75rem in .btn-sm, 0.15rem in .bottom-nav a) instead of the defined --space-* tokens. Low priority — the token system is solid and these are edge cases where the tokens don't have exact matches.

  5. Mixed image sourcing pattern. Public site pages use assets/images/ (local), authenticated pages use https://minio-api.tail5b443a.ts.net/assets/westside/ (MinIO). This is consistent with the original architecture but worth noting for the overhaul tickets #86/#87 if unification is desired.

SOP COMPLIANCE

  • Branch named after issue: 85-css-js-unification matches westside-app#85
  • PR title references issue: "feat: unify CSS/JS into single files (#85)"
  • Single descriptive commit: "feat: unify CSS/JS into single files (#85)"
  • No secrets committed — searched for API keys, passwords, tokens; HTML comments mention Stripe secret names in architecture docs (billing.html) but no actual credentials
  • No .env files committed
  • Changes are scoped to the stated goal: CSS/JS unification, dead file removal, HTML page updates
  • PR body template (## Summary, ## Changes, ## Test Plan, ## Related) — unable to parse PR body from diff due to JSON encoding, but the PR title and branch are clear
  • Related references plan slug — user context states "No plan slug" which is correct for playground work driven by kanban

PROCESS OBSERVATIONS

  • Foundation ticket executed cleanly. Merging 2621-line app.css + 804-line style.css into a unified 3175-line design system with zero dead files remaining is solid consolidation work. The 18 HTML pages are all correctly wired.
  • Change failure risk: LOW. This is playground (static HTML). No runtime, no API, no deployment pipeline affected. Visual regressions are the only risk, and those are caught by manual inspection.
  • Downstream dependency. Issues #86 (public pages), #87 (authenticated pages), #88 (cleanup) all depend on this unified CSS/JS foundation. Merging this unblocks the overhaul pipeline.
  • Promotion readiness. The structured @route/@api/@state comments in every HTML page are excellent SvelteKit promotion guides. This playground is spec-level documentation, not just visual prototypes.

VERDICT: APPROVED

## PR #36 Review **PR:** feat: unify CSS/JS into single files (#85) **Branch:** `85-css-js-unification` **Parent issue:** forgejo_admin/westside-app#85 — Playground overhaul 1/4: CSS/JS unification ### DOMAIN REVIEW **Tech stack:** Static HTML playground (18 pages), vanilla CSS, vanilla JS. Mobile-first design system with red/black brand. **CSS quality (shared/style.css — 3175 lines):** - Design tokens are well-structured in `:root` — colors, typography, spacing, layout, transitions all tokenized - Clear section organization with `/* ============ Section Name ============ */` comment blocks throughout - Mobile-first approach confirmed: base styles target mobile, `@media (min-width: 640px)` for tablet, `@media (min-width: 1024px)` for desktop, `@media (max-width: 400px)` for small mobile - No duplicate selector definitions found — the merge from two files (app.css + style.css) was done cleanly - `:focus-visible` styles present (line 116) with red outline for keyboard navigation - `.sr-only` screen reader utility class present (line 135) - Button system is comprehensive: `.btn`, `.btn-primary`, `.btn-outline`, `.btn-secondary`, `.btn-danger`, `.btn-disabled`, `.btn-sm`, `.btn-lg`, `.btn-block` - Status colors use semantic variables: `--color-green`, `--color-danger`, `--color-yellow`, `--color-blue` with matching bg/border variants **JS quality (shared/app.js — 428 lines):** - Clean section organization matching CSS pattern - `DOMContentLoaded` auto-init detects page features and wires up appropriate handlers - Tab system uses ARIA attributes (`aria-selected`, `aria-controls`) correctly - Filter system supports URL param state (`?filter=X`) - Teams board has full CRUD: create team, delete team, assign/unassign players, drag-to-reorder, coach picker - localStorage draft/view state persistence for teams board **HTML quality (18 pages):** - All 18 pages have `lang="en"`, viewport meta, and reference `shared/style.css` + `shared/app.js` - Structured `@route`, `@auth`, `@api`, `@state`, `@interactivity`, `@gaps`, `@notes` comment specs in HTML serve as SvelteKit promotion guides — excellent documentation - ARIA labels on navigation (`aria-label="Main navigation"`), hamburger (`aria-expanded`, `aria-controls`), tabs (`role="tab"`, `aria-selected`) - No stale CSS/JS files remain at root — only `shared/style.css`, `shared/app.js`, `shared/logo.jpeg`, and `assets/images/` **Accessibility:** - Focus styles present via `:focus-visible` - ARIA attributes on interactive elements (nav, tabs, toggles) - `sr-only` class available - Hamburger menu uses `aria-expanded` state toggling in JS ### BLOCKERS None. This is a static HTML playground — no server-side code, no user input processing, no auth flows, no secrets. The BLOCKER criteria (test coverage, input validation, secrets, DRY auth) do not apply to playground prototype consolidation. ### NITS 1. **Inconsistent `defer` attribute on script tags.** 11 pages use `<script src="shared/app.js" defer>`, 7 pages omit `defer`. Since the scripts are at the bottom of `<body>` and onclick handlers fire well after load, `defer` would work on all pages. The `admin-teams.html` inline `<script>` block following the tag is the one legitimate reason to omit `defer` on that page, but the other 6 pages without it (register, player-profile, coach, billing, admin-players) could be consistent. Non-blocking. 2. **Dead file: `shared/logo.jpeg`.** The file exists in the `shared/` directory but no HTML page references it. All logo references point to either `assets/images/logo.jpeg` (public pages) or `https://minio-api.tail5b443a.ts.net/assets/westside/branding/logo.jpeg` (authenticated pages). Could be cleaned up or documented as intentional. 3. **Stale OG meta URLs.** `westside-index.html`, `staff.html`, `original-index.html` reference `https://ldraney.github.io/west-side-basketball/` in Open Graph tags. These are GitHub Pages URLs from before the Tailscale migration. Non-blocking for playground — will be corrected when promoting to SvelteKit. 4. **Some raw values instead of design tokens.** A handful of places use hardcoded rem values (e.g., `0.4rem`, `0.75rem` in `.btn-sm`, `0.15rem` in `.bottom-nav a`) instead of the defined `--space-*` tokens. Low priority — the token system is solid and these are edge cases where the tokens don't have exact matches. 5. **Mixed image sourcing pattern.** Public site pages use `assets/images/` (local), authenticated pages use `https://minio-api.tail5b443a.ts.net/assets/westside/` (MinIO). This is consistent with the original architecture but worth noting for the overhaul tickets #86/#87 if unification is desired. ### SOP COMPLIANCE - [x] Branch named after issue: `85-css-js-unification` matches westside-app#85 - [x] PR title references issue: "feat: unify CSS/JS into single files (#85)" - [x] Single descriptive commit: "feat: unify CSS/JS into single files (#85)" - [x] No secrets committed — searched for API keys, passwords, tokens; HTML comments mention Stripe secret names in architecture docs (billing.html) but no actual credentials - [x] No `.env` files committed - [x] Changes are scoped to the stated goal: CSS/JS unification, dead file removal, HTML page updates - [ ] PR body template (## Summary, ## Changes, ## Test Plan, ## Related) — unable to parse PR body from diff due to JSON encoding, but the PR title and branch are clear - [ ] Related references plan slug — user context states "No plan slug" which is correct for playground work driven by kanban ### PROCESS OBSERVATIONS - **Foundation ticket executed cleanly.** Merging 2621-line app.css + 804-line style.css into a unified 3175-line design system with zero dead files remaining is solid consolidation work. The 18 HTML pages are all correctly wired. - **Change failure risk: LOW.** This is playground (static HTML). No runtime, no API, no deployment pipeline affected. Visual regressions are the only risk, and those are caught by manual inspection. - **Downstream dependency.** Issues #86 (public pages), #87 (authenticated pages), #88 (cleanup) all depend on this unified CSS/JS foundation. Merging this unblocks the overhaul pipeline. - **Promotion readiness.** The structured `@route`/`@api`/`@state` comments in every HTML page are excellent SvelteKit promotion guides. This playground is spec-level documentation, not just visual prototypes. ### VERDICT: APPROVED
forgejo_admin force-pushed 85-css-js-unification from edf21dc8f9 to 0f70078ab2 2026-03-26 17:23:50 +00:00 Compare
forgejo_admin deleted branch 85-css-js-unification 2026-03-26 17:24:12 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
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
forgejo_admin/westside-playground!36
No description provided.