feat: shared visual layer + redesigned topbar #4

New Issue

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

shcizo commented

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

Beskrivning

Etablera ett gemensamt visuellt fundament för hela appen — design tokens (färger, typografi, spacing, shadows, radius) plus en ny sticky topbar som delas mellan Players- och Courses-sidan. Detta är basen som alla andra redesign-issues bygger på.

Motivation

Designen i docs/design_handoff_pdga_rating/ bygger på ett konsistent tokenset som inte finns idag. Att lyfta in tokens och topbar först gör att efterföljande issues (summary tiles, sparklines, expanded row, courses-redesign) kan implementeras med korrekt styling från första commiten istället för att justera i efterhand.

Design — tokens

Lyft tokens från docs/design_handoff_pdga_rating/styles.css (:root) till public/css/shared.css som CSS custom properties. Hela listan med exakta värden står i docs/design_handoff_pdga_rating/README.md under "Design tokens". Kort sammanfattning:

Färger: --bg, --paper, --paper-2, --ink/2/3, --line/2, --hover, --accent (#4f5fd8), --accent-soft, --accent-text, --up/-soft, --down/-soft (oklch-värden)
Typografi: Plus Jakarta Sans (sans, body) + JetBrains Mono (siffror, deltas, dates). Båda från Google Fonts. Body 14/1.45 med stylistiska alternativ "ss01", "cv11"; mono med "tnum", "zero".
Radius: --radius 14px, --radius-sm 10px, 7px för segmented control-segment, 999px för pills
Shadow: --shadow-card och --shadow-pop (oklch-baserade)
Spacing: ad-hoc px-värden (4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 28, 32, 40)

Design — topbar

Sticky, full-bleed, 14×32 padding, white-with-backdrop-blur bakgrund. Identisk på Players- och Courses-sidan.

Tre sektioner via justify-content: space-between:

Brand: 36×36 rounded square med gradient --accent → darker, vit line-icon (24×24 stylized chart). Bredvid: "Rating Tracker" (15/700/-0.01em) över "Disc golf · unofficial" (11px / uppercase / 0.04em).
Nav: segmented pill med två segment ("Players" / "Courses"). --paper-2 bakgrund, --line border, 10px radius, 4px padding. Aktiv segment = vit bakgrund + soft shadow + ink text. Inaktiv = --ink-2 med hover till --ink.
Topbar meta: två meta-item-block ("Next update" / "Last refresh") separerade av 1px×22px vertikal divider, sedan en "Refresh all" ghost-knapp (32px hög, 8px radius, 12/600).

Responsive: på <880px döljs meta-items + divider + nav. Implementera mobil-nav enligt valfri lösning som passar repot.

Teknisk kontext

Nuvarande shared CSS: public/css/shared.css (har redan ett begränsat tokensystem — --surface-*, --navy-*, --text-*, --green, --red, --radius-*, --shadow-*)
Topbar idag: enkel navigation i views/partials/ (verifiera vid implementation)
Inga existerande "Refresh all"- eller "Next update"-koncept i backend — endpoint behövs (se "Förslag" nedan)
Fonter laddas inte idag — lägg till Google Fonts-länk i shared layout

Förslag till lösning

Lägg till Plus Jakarta Sans + JetBrains Mono via <link> i shared layout
Ersätt befintliga tokens i shared.css med det nya setet (var beredd på att andra issues kommer behöva mappa om gamla varnamn)
Ny views/partials/topbar.ejs eller motsvarande
Backend: ny endpoint POST /api/refresh-all som triggar refresh för alla trackade spelare (kan vara samma flöde som existerande per-player refresh, i loop)
"Next update" = nästa förväntade PDGA-uppdateringsdatum (känd månadsvis cykel), "Last refresh" = max(updated_at) över players

Scope

Inkluderat: Design tokens, fontinläsning, ny topbar (markup + styling), "Refresh all"-knapp + backend-endpoint, "Next update" / "Last refresh"-meta.

Exkluderat: Mobil-navmenyns specifika utseende — välj enkel lösning (hamburger, dropdown, eller bara döljs).

Risker

Tokenbyte kan orsaka subtila visuella regressioner i resten av appen tills övriga redesign-issues är klara. Mitigering: rulla ut detta tillsammans med eller direkt före kärnsidornas redesign.
"Refresh all" mot många spelare kan slå hårt mot PDGA — överväg sekventiell körning med delay eller backgrounder.

## Beskrivning Etablera ett gemensamt visuellt fundament för hela appen — design tokens (färger, typografi, spacing, shadows, radius) plus en ny sticky topbar som delas mellan Players- och Courses-sidan. Detta är basen som alla andra redesign-issues bygger på. ## Motivation Designen i `docs/design_handoff_pdga_rating/` bygger på ett konsistent tokenset som inte finns idag. Att lyfta in tokens och topbar först gör att efterföljande issues (summary tiles, sparklines, expanded row, courses-redesign) kan implementeras med korrekt styling från första commiten istället för att justera i efterhand. ## Design — tokens Lyft tokens från `docs/design_handoff_pdga_rating/styles.css` (`:root`) till `public/css/shared.css` som CSS custom properties. Hela listan med exakta värden står i `docs/design_handoff_pdga_rating/README.md` under "Design tokens". Kort sammanfattning: - **Färger:** `--bg`, `--paper`, `--paper-2`, `--ink/2/3`, `--line/2`, `--hover`, `--accent` (`#4f5fd8`), `--accent-soft`, `--accent-text`, `--up/-soft`, `--down/-soft` (oklch-värden) - **Typografi:** Plus Jakarta Sans (sans, body) + JetBrains Mono (siffror, deltas, dates). Båda från Google Fonts. Body 14/1.45 med stylistiska alternativ `"ss01", "cv11"`; mono med `"tnum", "zero"`. - **Radius:** `--radius` 14px, `--radius-sm` 10px, 7px för segmented control-segment, 999px för pills - **Shadow:** `--shadow-card` och `--shadow-pop` (oklch-baserade) - **Spacing:** ad-hoc px-värden (4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 28, 32, 40) ## Design — topbar Sticky, full-bleed, 14×32 padding, white-with-backdrop-blur bakgrund. Identisk på Players- och Courses-sidan. Tre sektioner via `justify-content: space-between`: 1. **Brand:** 36×36 rounded square med gradient `--accent → darker`, vit line-icon (24×24 stylized chart). Bredvid: "Rating Tracker" (15/700/-0.01em) över "Disc golf · unofficial" (11px / uppercase / 0.04em). 2. **Nav:** segmented pill med två segment ("Players" / "Courses"). `--paper-2` bakgrund, `--line` border, 10px radius, 4px padding. Aktiv segment = vit bakgrund + soft shadow + ink text. Inaktiv = `--ink-2` med hover till `--ink`. 3. **Topbar meta:** två `meta-item`-block ("Next update" / "Last refresh") separerade av 1px×22px vertikal divider, sedan en "Refresh all" ghost-knapp (32px hög, 8px radius, 12/600). **Responsive:** på `<880px` döljs meta-items + divider + nav. Implementera mobil-nav enligt valfri lösning som passar repot. ## Teknisk kontext - Nuvarande shared CSS: `public/css/shared.css` (har redan ett begränsat tokensystem — `--surface-*`, `--navy-*`, `--text-*`, `--green`, `--red`, `--radius-*`, `--shadow-*`) - Topbar idag: enkel navigation i `views/partials/` (verifiera vid implementation) - Inga existerande "Refresh all"- eller "Next update"-koncept i backend — endpoint behövs (se "Förslag" nedan) - Fonter laddas inte idag — lägg till Google Fonts-länk i shared layout ## Förslag till lösning 1. Lägg till Plus Jakarta Sans + JetBrains Mono via `<link>` i shared layout 2. Ersätt befintliga tokens i `shared.css` med det nya setet (var beredd på att andra issues kommer behöva mappa om gamla varnamn) 3. Ny `views/partials/topbar.ejs` eller motsvarande 4. Backend: ny endpoint `POST /api/refresh-all` som triggar refresh för alla trackade spelare (kan vara samma flöde som existerande per-player refresh, i loop) 5. "Next update" = nästa förväntade PDGA-uppdateringsdatum (känd månadsvis cykel), "Last refresh" = max(`updated_at`) över players ## Scope **Inkluderat:** Design tokens, fontinläsning, ny topbar (markup + styling), "Refresh all"-knapp + backend-endpoint, "Next update" / "Last refresh"-meta. **Exkluderat:** Mobil-navmenyns specifika utseende — välj enkel lösning (hamburger, dropdown, eller bara döljs). ## Risker - Tokenbyte kan orsaka subtila visuella regressioner i resten av appen tills övriga redesign-issues är klara. Mitigering: rulla ut detta tillsammans med eller direkt före kärnsidornas redesign. - "Refresh all" mot många spelare kan slå hårt mot PDGA — överväg sekventiell körning med delay eller backgrounder.

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

shcizo referenced this issue

2026-05-21 11:33:44 +02:00

fix: klargör Change-kolumnen — split i Δ month vs Δ predicted #3

shcizo referenced this issue

2026-05-21 11:33:46 +02:00

feat: summary tiles (KPI-strip) på players-sidan #5

shcizo referenced this issue

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

feat: inline sparklines + trend chart toggle #6

shcizo referenced this issue

2026-05-21 11:33:51 +02:00