From 072638dc37ed35374d96f382eddd308c219c0f1a Mon Sep 17 00:00:00 2001 From: Erol Haagenrud Date: Wed, 19 Aug 2026 08:37:15 +0200 Subject: [PATCH] =?UTF-8?q?Gj=C3=B8r=20spillertabellen=20mer=20regneark-ak?= =?UTF-8?q?tig,=20fyll=20full=20bredde=20(tillegg=20til=20ADR-094)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bruker sammenlignet med et regneark og påpekte unødvendig sidescroll på bred skjerm -- tettet opp med rutenett-stil og en colgroup som lar rundekolonnene fylle resten av bredden. Samme props-kontrakt. Co-Authored-By: Claude Sonnet 5 --- ARCHITECTURE_DECISIONS.md | 20 ++ CHANGELOG.md | 17 ++ .../components/tournament-players-table.tsx | 227 ++++++++++-------- 3 files changed, 160 insertions(+), 104 deletions(-) diff --git a/ARCHITECTURE_DECISIONS.md b/ARCHITECTURE_DECISIONS.md index c2d4b76..35d809f 100644 --- a/ARCHITECTURE_DECISIONS.md +++ b/ARCHITECTURE_DECISIONS.md @@ -9607,6 +9607,26 @@ typesjekket, gitt øktens allerede betydelige lengde. compose build teecup_api teecup_frontend && up -d` for begge, rene logger, 200 OK (inkl. ny `/hjelp`-rute). +**Tillegg 2026-08-19 -- visuell revisjon av spillertabellen, rett etter +utrulling.** Bruker (skjermdump av den ekte, live tabellen med 51 +spillere): "skulle ønske tabellen var mer 'regneark-aktig'" og "hvorfor +må jeg scrolle horisontalt når jeg har så mye ledig skjermplass?" -- +gyldig kritikk, bekreftet i skjermdumpen (brede kort-aktige celler med +mye padding, faste brede kolonner som sendte rundekolonnene utenfor +synlig område selv på en bred skjerm). Bruker tok dette direkte til V0 +selv (ikke via meg) og lastet opp svaret. Ny versjon av `tournament- +players-table.tsx`: rutenett-linjer i stedet for kort-følelse +(`border-b border-r` per celle, ingen egen kant per kontroll -- kun +hover/fokus lyser opp), lavere radhøyde (`h-9`), mindre tekst +(`text-[13px]`), OG et `` som gir faste, smale bredder til +de korte kolonnene (HCP/kjønn/alder) mens rundekolonnene IKKE får noen +fast bredde -- de fordeler resten av den tilgjengelige bredden seg +imellom, så tabellen fyller skjermen i stedet for å la dem presses +utenfor. **Props-kontrakten er UENDRET** (samme typer, samme callback- +navn) -- ren visuell omskriving, ingen endring i `SetupTab` sin +sammenkobling nødvendig. Verifisert i ny lokal scratch-visning (bred +skjerm bekreftet fylt uten sidescroll med 3 runde-kolonner, lys+mørk). + --- ## Utviklingsplan (rekkefølge) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5629197..b6f82b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13020,3 +13020,20 @@ Neste steg: **Rullet ut 2026-08-19** -- bruker bekreftet. Ingen migrasjon. `docker compose build teecup_api teecup_frontend && up -d` for begge, rene logger, 200 OK (inkl. ny `/hjelp`-rute). + +127. **Spillertabellen gjort mer "regneark-aktig" + fyller full bredde -- + 2026-08-19 (tillegg til ADR-094).** Bruker, med skjermdump av den + ekte 51-spiller-tabellen: "skulle ønske tabellen var mer 'regneark- + aktig'" og "hvorfor må jeg scrolle horisontalt når jeg har så mye + ledig skjermplass?" -- gyldig, bekreftet i skjermdumpen. Bruker tok + dette direkte til V0 selv og lastet opp svaret. Ny versjon: + rutenett-linjer i stedet for kort-følelse, lavere radhøyde, mindre + tekst, og et `` som gir faste smale bredder til korte + kolonner mens rundekolonnene fordeler resten av bredden seg + imellom -- fyller skjermen i stedet for fast sidescroll. Props- + kontrakten uendret, ingen endring i `SetupTab` sin sammenkobling. + + **Verifisert:** `tsc --noEmit` rent, `vitest run` 55/55. Ny scratch- + visning bekrefter bred skjerm fylt uten sidescroll, lys+mørk. + + **Rullet ut:** venter på bekreftelse. diff --git a/frontend/components/tournament-players-table.tsx b/frontend/components/tournament-players-table.tsx index d0a889d..431d424 100644 --- a/frontend/components/tournament-players-table.tsx +++ b/frontend/components/tournament-players-table.tsx @@ -64,9 +64,19 @@ const STATUSES: { label: string; value: TournamentPlayerRow["status"] }[] = [ { label: "DNS", value: "dns" }, ] -// Shared control styling so every inline field feels like one family. -const CONTROL = - "h-9 rounded-lg border border-border bg-background px-2.5 text-sm text-foreground transition-all duration-200 ease-in-out hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50" +// Spreadsheet cell control: flat, fills the whole cell, no border of its own. +// The grid lines define the structure; controls only light up on hover/focus. +const CELL = + "h-full w-full border-0 bg-transparent px-2 py-1.5 text-[13px] leading-tight text-foreground outline-none transition-colors hover:bg-accent/40 focus-visible:bg-background focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50" + +// Compact header control (round default-tee select). +const HEAD_CELL = + "h-7 w-full rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground outline-none transition-colors hover:border-primary/40 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50" + +// Shared cell frame: thin grid lines, zero padding (the control supplies it). +const TD = "border-b border-r border-border p-0 align-middle" +const TH = + "border-b border-r border-border bg-muted px-2 py-2 text-left text-[11px] font-bold uppercase tracking-wide text-muted-foreground" function computeAge(birthDate: string): number | null { const birth = new Date(birthDate) @@ -133,34 +143,49 @@ export function TournamentPlayersTable({ )} -
- +
+ {/* Fluid layout: the table fills the available width instead of leaving + dead space and pushing round columns off-screen. */} +
+ + + + {showClassColumn && } + + + + + {rounds.map((r) => ( + + ))} + + - + - {showClassColumn && ( - )} - - - - {rounds.map((round) => { @@ -174,36 +199,33 @@ export function TournamentPlayersTable({ - - + {players.map((player) => ( + ) } @@ -352,15 +372,15 @@ function PlayerRow({ } return ( - + - {showClassColumn && ( - )} - - - - ) })} - - - )
Spiller + Hcp + Klasse + Statistikknivå + Status + Kjønn + Alder -
-
+
+
{round.label} {busy && ( )}
- + ) })} -
- Spillerpool - - Fjern + + Handlinger +
{player.playerName} + setHcpDraft(e.target.value)} onBlur={commitHcp} - className={`${CONTROL} w-20 text-right tabular-nums`} + className={`${CELL} text-right tabular-nums`} /> + + + + -
+
+
onChangeBirthDate(player.playerId, e.target.value)} /> - + {age !== null ? `${age} år` : "Ukjent"}
@@ -461,31 +479,27 @@ function PlayerRow({ const assigned = cell?.assigned ?? false const busy = busyRoundIds.includes(round.id) return ( - 		-
- - {assigned && ( +
+
+ { + const checked = e.target.checked + const teeId = checked + ? defaultTees[round.id] ?? round.tees[0]?.id ?? "" + : cell?.teeId ?? round.tees[0]?.id ?? "" + onToggleRound(round.id, player.participantId, checked, teeId) + }} + className="size-4 shrink-0 rounded border-border text-primary outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50" + /> + {assigned ? ( + ) : ( + )}
- - - - + +
+ + + +