feat: mobile UI card layout for players and courses (#16) #18

2026-05-22T21:49:31+02:00

shcizo commented

2026-05-22 21:49:31 +02:00

Summary

Dedicated mobile UI (card layout) for Players och Courses under 880px-breakpoint — separat från desktop-tabellen, inte responsiv kollaps.
Mobile-only topbar (2 rader: brand + refresh, segmented nav-pill), section-head per vy, sticky bottom add-bar med env(safe-area-inset-bottom), mobile sparkline (70×26) och mobile history-chart (360×160, 3 y-ticks).
Always-render-both + CSS-gated visibility — HTMX-swaps fungerar utan device-detection. Inga backend-ändringar (server.js, src/**, package.json orörda).

Closes #16

Test plan

Desktop oförändrad ≥1180px (add-bar topp, KPI-strip, tabell)
Mobil (Chrome DevTools iPhone 14, 390×844): topbar 2 rader, kortlayout, sparkline 70×26, expand visar chart 360×160
En "TRACKED PLAYERS · N"-header på mobil (inte två)
Sparkline inom kortets högra padding (ingen overflow)
Sticky add-bar respekterar safe-area-inset-bottom
Trend chart-pill state delas mellan desktop och mobile via localStorage
A11y: kort är role="button" med tabindex="0", aria-expanded, Enter/Space-handlers
Empty states ("No players tracked yet") visas korrekt utan section-head
Courses tab-pill: "Find courses" aktiv, "Import from Tjing" disabled placeholder

## Summary - Dedicated mobile UI (card layout) for Players och Courses under 880px-breakpoint — separat från desktop-tabellen, inte responsiv kollaps. - Mobile-only topbar (2 rader: brand + refresh, segmented nav-pill), section-head per vy, sticky bottom add-bar med `env(safe-area-inset-bottom)`, mobile sparkline (70×26) och mobile history-chart (360×160, 3 y-ticks). - Always-render-both + CSS-gated visibility — HTMX-swaps fungerar utan device-detection. Inga backend-ändringar (`server.js`, `src/**`, `package.json` orörda). Closes #16 ## Test plan - [x] Desktop oförändrad ≥1180px (add-bar topp, KPI-strip, tabell) - [x] Mobil (Chrome DevTools iPhone 14, 390×844): topbar 2 rader, kortlayout, sparkline 70×26, expand visar chart 360×160 - [x] En "TRACKED PLAYERS · N"-header på mobil (inte två) - [x] Sparkline inom kortets högra padding (ingen overflow) - [x] Sticky add-bar respekterar safe-area-inset-bottom - [x] Trend chart-pill state delas mellan desktop och mobile via localStorage - [x] A11y: kort är `role="button"` med `tabindex="0"`, `aria-expanded`, Enter/Space-handlers - [x] Empty states ("No players tracked yet") visas korrekt utan section-head - [x] Courses tab-pill: "Find courses" aktiv, "Import from Tjing" disabled placeholder

shcizo added 5 commits 2026-05-22 21:49:32 +02:00

feat: mobile UI card layout for players and courses (#16 ) cc9d8eb4cd

fix: address mobile UI review findings (#16 ) b51c47dc4c

- Hide desktop .card-section on mobile, add .m-search-input with same
  HTMX attrs for mobile course search (fixes horizontal overflow)
- Remove dead layoutCount var and .m-layouts-pill block in course-cards
- Remove dead 768px breakpoints from players.css (table hidden at 880px)
- Move .mobile-section-head inside else-block for empty state in both
  ratings-cards and course-cards (fixes section head showing on empty)
- Add tabindex, role=button, aria-expanded, onkeydown to .m-card and
  .m-course-card; toggle aria-expanded in JS toggle functions
- Fix data-history attribute to use <%=  (HTML-escaped) instead of <%-
- Convert var to const/let in all new/changed JS blocks

chore: remove dead mobile-add-bar.ejs partial (#16 ) 7ab16994c5

style: convert var to const in sparkline toggle block (#16 ) 4bcf83d267

fix: hide desktop table-toolbar on mobile + fix sparkline overflow (#16 ) 4dc429b961

- Add .table-toolbar to mobile hide list (was rendering duplicate
  'TRACKED PLAYERS' header above the mobile section-head)
- Change .m-card__body grid to minmax(0, 1fr) auto so the stats
  column can shrink below content size
- Add min-width: 0 to .m-card__stats for proper grid shrinking
- Remove grid-row: span 2 from .m-card__sparkline (single-row grid)
- Remove overflow: visible from .m-chart-spark so the end-dot stays
  within the SVG viewport

shcizo merged commit e900b86e69 into main

2026-05-22 21:49:51 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: shcizo/pdga-rating#18