feat: redesigna expanderad spelarrad med detail-grid + history chart #7

New Issue

2026-05-21T11:31:48+02:00

shcizo commented

2026-05-21 11:31:48 +02:00

Beskrivning

Bygg ut den existerande expanderade spelarraden med en strukturerad detail-grid (nyckel/värde-lista över ratings och deltas) plus en större, designspecifik history chart i ett tvåkolumnersgrid.

Nuvarande beteende

Klick på rad expanderar #history-{pdgaNumber} som via HTMX laddar /partials/player-history/:pdgaNumber och renderar en Chart.js-graf (public/js/chart.js). Expansionsmekanismen fungerar redan men innehållet är minimalt jämfört med designspec.

Förväntat beteende

Expanderad panel under en aktiverad rad, enligt designspec:

Bakgrund: color-mix(in oklab, var(--accent) 4%, var(--paper-2))
Padding: 22px 28px 28px
3px accent-stripe längs vänsterkanten på parent-raden (via .row-open::after)
Grid 240px 1fr, 28px gap:
- Vänster kolumn — nyckel/värde-lista:
  - Current rating
  - Last month
  - Change vs last month (delta-pill)
  - Predicted next update
  - Gap to predicted (delta-pill)
  - Varje rad med streckad bottom-border
  - Under listan: "View calculation details →" link-button
- Höger kolumn — history chart:
  - 880×240 viewBox SVG
  - 44/16/20/32 padding (l/r/t/b)
  - 4 y-grid ticks (dashed, line-color)
  - Area-fill 8% opacity
  - Line 2px stroke
  - Dots på varje datapunkt (sista punkten = 4px + vit halo)
  - X-labels på 5 jämnt fördelade positioner formaterade "MMM YY"
  - Alla numeriska labels: JetBrains Mono 10px, grå

Animationer

Row expand: expandIn keyframe, 0.2s ease, 4px translateY + opacity fade
Chevron-rotation: 0.18s ease transform (180° när expanderad)

Interaktion

Endast en rad öppen åt gången (state lever på tabellnivå)
Enter / Space på fokuserad rad togglar
Action-knappar inuti raden (stopPropagation så refresh/chevron inte också togglar expansion)

Tekniska noteringar

Befintlig HTMX-pattern fungerar — utöka partial-template istället för att bygga om
Chart.js-graf kan ersättas med egen SVG-rendering (designspec använder ren SVG; mindre dep + matchar sparkline-implementation i #6)
Eller behåll Chart.js men styla om så det matchar designen
Data: behöver hela historiken (inte bara senaste 12 mån som sparklinen) — kontrollera vad rating_history returnerar idag

Scope

Inkluderat: Ny markup för expanderad panel (grid + key/value + chart), styling enligt spec, animationer, keyboard-interaktion, "only one open at a time"-logik.

Exkluderat:

"View calculation details →"-länken — endpoint/modal-innehåll designas inte, lämna som TODO eller dölj knappen i v1
Eventuell mobil-stack (designen säger att grid stackar till en kolumn under 880px — implementera vanilla)

Beroenden

#4 (shared visual layer) för tokens, typografi, delta-pills
Hänger ihop med #3 (Change-klargörande) eftersom samma deltas visas här

## Beskrivning Bygg ut den existerande expanderade spelarraden med en strukturerad detail-grid (nyckel/värde-lista över ratings och deltas) plus en större, designspecifik history chart i ett tvåkolumnersgrid. ## Nuvarande beteende Klick på rad expanderar `#history-{pdgaNumber}` som via HTMX laddar `/partials/player-history/:pdgaNumber` och renderar en Chart.js-graf (`public/js/chart.js`). Expansionsmekanismen fungerar redan men innehållet är minimalt jämfört med designspec. ## Förväntat beteende Expanderad panel under en aktiverad rad, enligt designspec: - Bakgrund: `color-mix(in oklab, var(--accent) 4%, var(--paper-2))` - Padding: `22px 28px 28px` - 3px accent-stripe längs vänsterkanten på parent-raden (via `.row-open::after`) - Grid `240px 1fr`, 28px gap: - **Vänster kolumn — nyckel/värde-lista:** - Current rating - Last month - Change vs last month (delta-pill) - Predicted next update - Gap to predicted (delta-pill) - Varje rad med streckad bottom-border - Under listan: "View calculation details →" link-button - **Höger kolumn — history chart:** - 880×240 viewBox SVG - 44/16/20/32 padding (l/r/t/b) - 4 y-grid ticks (dashed, line-color) - Area-fill 8% opacity - Line 2px stroke - Dots på varje datapunkt (sista punkten = 4px + vit halo) - X-labels på 5 jämnt fördelade positioner formaterade "MMM YY" - Alla numeriska labels: JetBrains Mono 10px, grå ## Animationer - Row expand: `expandIn` keyframe, 0.2s ease, 4px translateY + opacity fade - Chevron-rotation: 0.18s ease transform (180° när expanderad) ## Interaktion - Endast en rad öppen åt gången (state lever på tabellnivå) - `Enter` / `Space` på fokuserad rad togglar - Action-knappar inuti raden (`stopPropagation` så refresh/chevron inte också togglar expansion) ## Tekniska noteringar - Befintlig HTMX-pattern fungerar — utöka partial-template istället för att bygga om - Chart.js-graf kan ersättas med egen SVG-rendering (designspec använder ren SVG; mindre dep + matchar sparkline-implementation i #6) - Eller behåll Chart.js men styla om så det matchar designen - Data: behöver hela historiken (inte bara senaste 12 mån som sparklinen) — kontrollera vad `rating_history` returnerar idag ## Scope **Inkluderat:** Ny markup för expanderad panel (grid + key/value + chart), styling enligt spec, animationer, keyboard-interaktion, "only one open at a time"-logik. **Exkluderat:** - "View calculation details →"-länken — endpoint/modal-innehåll designas inte, lämna som TODO eller dölj knappen i v1 - Eventuell mobil-stack (designen säger att grid stackar till en kolumn under 880px — implementera vanilla) ## Beroenden - #4 (shared visual layer) för tokens, typografi, delta-pills - Hänger ihop med #3 (Change-klargörande) eftersom samma deltas visas här

shcizo added the enhancement label 2026-05-21 11:31:48 +02:00

shcizo referenced this issue from a commit

2026-05-21 14:39:50 +02:00

feat: pass player record into player-history partial render (#7)

shcizo referenced this issue from a commit

2026-05-21 14:39:50 +02:00

feat: redesign expanded row with detail-grid + history chart (#7)

shcizo referenced a pull request that will close this issue

2026-05-21 14:40:36 +02:00

feat: players page redesign — deltas, KPI tiles, sparklines, expanded row #9

shcizo referenced this issue from a commit

2026-05-21 15:23:56 +02:00