feat: mobilanpassad UI för Players och Courses (kortlayout) #16

New Issue

2026-05-22T13:05:32+02:00

shcizo commented

2026-05-22 13:05:32 +02:00

Beskrivning

Det finns en ny mobil-handoff i docs/design_handoff_pdga_rating_mobile/ som specificerar en dedikerad mobilanpassad UI för både Players och Courses. Mobilen är inte den responsiva desktop-tabellen nedskalad — det är en kortbaserad omdesign, eftersom 5-kolumners-tabeller inte fungerar på ~390px-bred skärm.

Den här issue:n implementerar mobil-vyn enligt specen så att appen är användbar på telefon utan att rubba desktop-utseendet.

Design

Referens: docs/design_handoff_pdga_rating_mobile/README.md (avsnitt "Mobile pages", raderna 232–294).

Mockuper:

Mobile.html — båda sidor i iPhone 15 Pro-frames (402×874)
mobile.css — alla mobil-stilar, scopade under .m (återanvänder tokens från styles.css)
mobile.jsx — React-komponenter för båda mobil-sidorna

Breakpoint: 880px. Under denna växlar både Players och Courses till kortlayout (idag har vi blandat 768px/880px — standardisera till 880px).

Tekniska noteringar

Nuvarande tillstånd

views/partials/ratings-table.ejs och course-table.ejs använder strikt <table>-markup. Mobil-CSS idag (shared.css:284–291, 781–798) döljer bara kolumner via .mobile-hide/.col-predicted { display: none }.
Add-player-formuläret (views/pages/index.ejs:3–24) ligger i flow överst på sidan, blir stacked på 768px (shared.css:711–725) men är inte sticky längst ner som specen kräver för mobil.
Topbar (views/partials/topbar.ejs) är redan sticky och döljer meta + nav på 880px, men spec:en kräver att navet är synligt som segmented pill även på mobil (rad 2 av topbar enligt specen).
Expand/collapse-logik finns i public/js/players.js (togglePlayerHistory) och public/js/courses.js — kan återanvändas, bara visuell presentation skiljer sig.
History-chart (public/js/chart.js) är hårdkodad till 880×240 viewBox. Specen kräver 360×160 + 3 y-grid-ticks på mobil.
Sparkline (inline SVG i ratings-table.ejs:2–29) är 96×28 idag; specen kräver 70×26 på mobil.

Arkitekturbeslut: markup-strategi

Eftersom mobil och desktop visar fundamentalt olika layout (kort-stack vs. tabell-rader), inte bara omflöde, rekommenderar jag att:

Behålla nuvarande <table>-markup för desktop (ingen regression-risk).
Lägga till parallella mobil-partials (ratings-mobile.ejs, course-mobile.ejs) som rendrar samma players/courses-data som kortlista.
CSS växlar mellan vyerna via @media (max-width: 880px) — desktop-tabellen får display: none under 880px, mobil-listan får display: block över 880px döljs.

Alternativet (transformera tabellraderna med CSS) är hackigt och försämrar a11y. EJS-duplicering i markup är priset, men data-loopen är liten.

Tokens & komponenter att återanvända

Alla färg/typografi/radius/skugga-tokens (public/css/shared.css, :root — matchar mobile.css).
views/partials/delta-pill.ejs — fungerar oförändrat på mobil, ev. mindre padding.
public/js/players.js toggle-state-logik (openPdgaNumber-mönstret).
Chart-rendering i chart.js — generalisera till att ta viewBox + grid-ticks som parametrar så samma kod kan rita både 880×240 (desktop) och 360×160 (mobil).

Scope

Inkluderat:

Mobil topbar (2 rader: brand + refresh-ikon, segmenterad nav-pill)
Mobil Players-vy: section-head ("TRACKED PLAYERS · N" + Trend chart-pill), kortlista, expand-panel med history-chart + key/value-lista, sticky bottom Add-bar
Mobil Courses-vy: tab-pill (Find / Tjing), sökruta, section-head ("Showing X of N"), kortlista, expand-panel med layouts (par/rating-chips, inaktiv-toggle)
Mobile sparkline (70×26) i player-card högerkolumn
Mobile history-chart (360×160, 3 y-ticks)
Sticky Add-player-bar med position: sticky; bottom: 0 + env(safe-area-inset-bottom) + 90px bottenpadding på listan ovanför
Standardisera mobil-breakpoint på 880px (städa upp blandning av 768/880 i nuvarande CSS)
Trend chart-pill-state persisteras i localStorage (samma key som desktop)

Exkluderat (medvetet, från specen):

Swipe-to-refresh / swipe-to-delete eller andra gester
Sheet/modal-navigation (segmenterad pill räcker)
Sammanfattningsrutor ("Tracked / Avg rating / Climbing / Slipping") — tas bort helt på mobil enligt specen
Felstatus, tomma states, Tjing-importresultat-UI — odefinierat i designen, hanteras separat
Tweaks-panelen — prototyp-affordans, ska ej shippas

Relaterat

#8 (feat: Courses-redesign + återinförande av Tjing-import) — angränsande men oberoende. Den issue:n fokuserar på Tjing-import + desktop-courses; den här på mobil-vy. Om de jobbas på samtidigt bör de koordineras (delar views/pages/courses.ejs).

Test-plan

Verifiera i Chrome DevTools på iPhone 15 Pro-storlek (402×874) att båda sidorna matchar Mobile.html
Verifiera ≥880px att desktop är oförändrad (ingen regression)
Sticky add-bar täcker inte sista kortet
Trend chart-pill-state överlever sidladdning
Expand/collapse fungerar med tap på kort, action-knappar i kort triggar inte expand (stopPropagation)
History-chart renderas korrekt med rätt y-ticks och dimensioner i mobil-expand

## Beskrivning Det finns en ny mobil-handoff i `docs/design_handoff_pdga_rating_mobile/` som specificerar en **dedikerad mobilanpassad UI** för både Players och Courses. Mobilen är **inte** den responsiva desktop-tabellen nedskalad — det är en kortbaserad omdesign, eftersom 5-kolumners-tabeller inte fungerar på ~390px-bred skärm. Den här issue:n implementerar mobil-vyn enligt specen så att appen är användbar på telefon utan att rubba desktop-utseendet. ## Design Referens: `docs/design_handoff_pdga_rating_mobile/README.md` (avsnitt **"Mobile pages"**, raderna 232–294). Mockuper: - `Mobile.html` — båda sidor i iPhone 15 Pro-frames (402×874) - `mobile.css` — alla mobil-stilar, scopade under `.m` (återanvänder tokens från `styles.css`) - `mobile.jsx` — React-komponenter för båda mobil-sidorna **Breakpoint:** `880px`. Under denna växlar både Players och Courses till kortlayout (idag har vi blandat 768px/880px — standardisera till 880px). ## Tekniska noteringar ### Nuvarande tillstånd - `views/partials/ratings-table.ejs` och `course-table.ejs` använder strikt `<table>`-markup. Mobil-CSS idag (`shared.css:284–291, 781–798`) döljer bara kolumner via `.mobile-hide`/`.col-predicted { display: none }`. - Add-player-formuläret (`views/pages/index.ejs:3–24`) ligger i flow överst på sidan, blir stacked på 768px (`shared.css:711–725`) men är **inte sticky längst ner** som specen kräver för mobil. - Topbar (`views/partials/topbar.ejs`) är redan sticky och döljer meta + nav på 880px, men spec:en kräver att navet är synligt som segmented pill även på mobil (rad 2 av topbar enligt specen). - Expand/collapse-logik finns i `public/js/players.js` (`togglePlayerHistory`) och `public/js/courses.js` — kan återanvändas, bara visuell presentation skiljer sig. - History-chart (`public/js/chart.js`) är hårdkodad till 880×240 viewBox. Specen kräver 360×160 + 3 y-grid-ticks på mobil. - Sparkline (inline SVG i `ratings-table.ejs:2–29`) är 96×28 idag; specen kräver 70×26 på mobil. ### Arkitekturbeslut: markup-strategi Eftersom mobil och desktop visar **fundamentalt olika layout** (kort-stack vs. tabell-rader), inte bara omflöde, rekommenderar jag att: - Behålla nuvarande `<table>`-markup för desktop (ingen regression-risk). - Lägga till parallella mobil-partials (`ratings-mobile.ejs`, `course-mobile.ejs`) som rendrar samma `players`/`courses`-data som kortlista. - CSS växlar mellan vyerna via `@media (max-width: 880px)` — desktop-tabellen får `display: none` under 880px, mobil-listan får `display: block` över 880px döljs. Alternativet (transformera tabellraderna med CSS) är hackigt och försämrar a11y. EJS-duplicering i markup är priset, men data-loopen är liten. ### Tokens & komponenter att återanvända - Alla färg/typografi/radius/skugga-tokens (`public/css/shared.css`, `:root` — matchar `mobile.css`). - `views/partials/delta-pill.ejs` — fungerar oförändrat på mobil, ev. mindre padding. - `public/js/players.js` toggle-state-logik (`openPdgaNumber`-mönstret). - Chart-rendering i `chart.js` — generalisera till att ta viewBox + grid-ticks som parametrar så samma kod kan rita både 880×240 (desktop) och 360×160 (mobil). ## Scope **Inkluderat:** - [ ] Mobil topbar (2 rader: brand + refresh-ikon, segmenterad nav-pill) - [ ] Mobil Players-vy: section-head ("TRACKED PLAYERS · N" + Trend chart-pill), kortlista, expand-panel med history-chart + key/value-lista, sticky bottom Add-bar - [ ] Mobil Courses-vy: tab-pill (Find / Tjing), sökruta, section-head ("Showing X of N"), kortlista, expand-panel med layouts (par/rating-chips, inaktiv-toggle) - [ ] Mobile sparkline (70×26) i player-card högerkolumn - [ ] Mobile history-chart (360×160, 3 y-ticks) - [ ] Sticky Add-player-bar med `position: sticky; bottom: 0` + `env(safe-area-inset-bottom)` + 90px bottenpadding på listan ovanför - [ ] Standardisera mobil-breakpoint på 880px (städa upp blandning av 768/880 i nuvarande CSS) - [ ] Trend chart-pill-state persisteras i `localStorage` (samma key som desktop) **Exkluderat (medvetet, från specen):** - Swipe-to-refresh / swipe-to-delete eller andra gester - Sheet/modal-navigation (segmenterad pill räcker) - Sammanfattningsrutor ("Tracked / Avg rating / Climbing / Slipping") — tas bort helt på mobil enligt specen - Felstatus, tomma states, Tjing-importresultat-UI — odefinierat i designen, hanteras separat - Tweaks-panelen — prototyp-affordans, ska **ej** shippas ## Relaterat - **#8** (`feat: Courses-redesign + återinförande av Tjing-import`) — angränsande men oberoende. Den issue:n fokuserar på Tjing-import + desktop-courses; den här på mobil-vy. Om de jobbas på samtidigt bör de koordineras (delar `views/pages/courses.ejs`). ## Test-plan - [ ] Verifiera i Chrome DevTools på iPhone 15 Pro-storlek (402×874) att båda sidorna matchar `Mobile.html` - [ ] Verifiera ≥880px att desktop är oförändrad (ingen regression) - [ ] Sticky add-bar täcker inte sista kortet - [ ] Trend chart-pill-state överlever sidladdning - [ ] Expand/collapse fungerar med tap på kort, action-knappar i kort triggar inte expand (stopPropagation) - [ ] History-chart renderas korrekt med rätt y-ticks och dimensioner i mobil-expand

shcizo added the enhancement label 2026-05-22 13:05:32 +02:00

shcizo referenced this issue from a commit

2026-05-22 21:32:32 +02:00

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

shcizo referenced this issue from a commit

2026-05-22 21:32:32 +02:00

fix: address mobile UI review findings (#16)

shcizo referenced this issue from a commit

2026-05-22 21:32:32 +02:00

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

shcizo referenced this issue from a commit

2026-05-22 21:32:32 +02:00