feat: Clickable team cards, role-aware team detail, clearer admin stat labels #7

New issue

Closed

opened 2026-03-16 21:46:18 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-03-16 21:46:18 +00:00

Owner

Lineage

plan-wkq → Phase 10 (Playground — Complete App Prototype)

Repo

forgejo_admin/westside-playground

User Story

As Marcus (admin), when I see teams on my dashboard, I want to click a team and see the full roster so I can manage players directly.
As a coach, I want to browse team rosters (read-only) to see player info and parent contact for my team and others.

Context

Three UX improvements to the playground prototype. These are design decisions that must be in the playground BEFORE the Phase 15 SPA production port.

File Targets

Files to modify:

admin.html — (1) Rename stat card labels: "Active Players" → "Registered", "Current" → "Paid Up". (2) Make each team card in the Teams section a clickable link to team.html?id=X (use # as href for now since these are prototypes — just wrap the team card in an <a> tag styled to look the same).
team.html — Add an admin edit section that's visually distinct: an "Edit Roster" button area and an "Assign Players" placeholder section at the bottom. Add a comment  around it. The existing roster/coaches/playbooks content stays as the read-only view that all roles see.
coach.html — Add a "Browse Teams" section below the current team roster. Show 2-3 placeholder team cards (like the admin dashboard has) that link to team.html. This gives coaches visibility into other teams beyond just their own.

Files NOT to touch:

index.html, tryouts.html, register.html, signin.html, billing.html, player-profile.html, parent.html — no changes

Acceptance Criteria

Admin dashboard stat cards read "Registered" and "Paid Up" (not "Active Players" and "Current")
Team cards on admin dashboard are clickable (wrapped in <a> tags)
Team detail page (team.html) has an admin-only edit section at the bottom with "Edit Roster" / "Assign Players" placeholders
Coach page (coach.html) has a "Browse Teams" section with placeholder team cards linking to team.html
All changes use existing CSS from shared/app.css — no new styles unless absolutely necessary
Visual consistency maintained — clickable cards should look like cards, not like blue hyperlinks

Test Expectations

No tests (static HTML repo). Visual verification only.

Constraints

Use existing CSS classes from shared/app.css. Do NOT create new stylesheets.
These are prototypes — use placeholder data, # hrefs for team links. The production app adds real data bindings.
Keep it simple. No JavaScript interactions. HTML + CSS only.

Checklist

PR opened
No unrelated changes

project-westside-basketball

### Lineage `plan-wkq` → Phase 10 (Playground — Complete App Prototype) ### Repo `forgejo_admin/westside-playground` ### User Story As Marcus (admin), when I see teams on my dashboard, I want to click a team and see the full roster so I can manage players directly. As a coach, I want to browse team rosters (read-only) to see player info and parent contact for my team and others. ### Context Three UX improvements to the playground prototype. These are design decisions that must be in the playground BEFORE the Phase 15 SPA production port. ### File Targets Files to modify: - `admin.html` — (1) Rename stat card labels: "Active Players" → "Registered", "Current" → "Paid Up". (2) Make each team card in the Teams section a clickable link to `team.html?id=X` (use `#` as href for now since these are prototypes — just wrap the team card in an `<a>` tag styled to look the same). - `team.html` — Add an admin edit section that's visually distinct: an "Edit Roster" button area and an "Assign Players" placeholder section at the bottom. Add a comment `` around it. The existing roster/coaches/playbooks content stays as the read-only view that all roles see. - `coach.html` — Add a "Browse Teams" section below the current team roster. Show 2-3 placeholder team cards (like the admin dashboard has) that link to `team.html`. This gives coaches visibility into other teams beyond just their own. Files NOT to touch: - `index.html`, `tryouts.html`, `register.html`, `signin.html`, `billing.html`, `player-profile.html`, `parent.html` — no changes ### Acceptance Criteria - [ ] Admin dashboard stat cards read "Registered" and "Paid Up" (not "Active Players" and "Current") - [ ] Team cards on admin dashboard are clickable (wrapped in `<a>` tags) - [ ] Team detail page (`team.html`) has an admin-only edit section at the bottom with "Edit Roster" / "Assign Players" placeholders - [ ] Coach page (`coach.html`) has a "Browse Teams" section with placeholder team cards linking to `team.html` - [ ] All changes use existing CSS from `shared/app.css` — no new styles unless absolutely necessary - [ ] Visual consistency maintained — clickable cards should look like cards, not like blue hyperlinks ### Test Expectations - No tests (static HTML repo). Visual verification only. ### Constraints - Use existing CSS classes from `shared/app.css`. Do NOT create new stylesheets. - These are prototypes — use placeholder data, `#` hrefs for team links. The production app adds real data bindings. - Keep it simple. No JavaScript interactions. HTML + CSS only. ### Checklist - [ ] PR opened - [ ] No unrelated changes ### Related - `project-westside-basketball`