feat: lägg till refresh-knapp i mobil-kortvyn (endast utfällt läge) #26

New Issue

2026-06-08T08:12:17+02:00

shcizo commented

2026-06-08 08:12:17 +02:00

Beskrivning

Refresh-knappen som finns i desktop-tabellen saknas helt i mobil-vyn. Användaren har ingen möjlighet att uppdatera en spelares rating/round history från mobil.

Önskat: en något större refresh-knapp placerad bredvid spelarnamnet i mobil-kortet, men endast synlig när kortet är utfällt (.is-open).

Teknisk orsak

Mobil och desktop renderas via två separata EJS-templates. Refresh-knappen finns bara i desktop-varianten:

Desktop: views/partials/ratings-table.ejs:82-84 — <button class="icon-btn refresh-icon" onclick="refreshPlayerData(...)">
Mobil: views/partials/ratings-cards.ejs — kortets huvud (.m-card__head, rad ~58-70) innehåller rank-chip, namn-stack och chevron, men ingen refresh-knapp.

public/css/mobile.css:61-65 döljer hela desktop-tabellen (#ratings-table table { display: none }) under brytpunkten, så desktop-knappen är inte tillgänglig på mobil. Knappen är alltså inte CSS-dold — den existerar aldrig i mobil-markupen.

Design / lösning

Markup (ratings-cards.ejs): Lägg en refresh-knapp i .m-card__head, bredvid .m-card__name-stack. Återanvänd refresh-icon-mönstret med fa-sync-alt. onclick måste ha event.stopPropagation() så att klick inte triggar kortets expand/collapse (toggleMobilePlayerCard).
CSS (mobile.css): Dölj knappen som default, visa endast i utfällt läge:
```
.m-card__head .refresh-icon { display: none; }
.m-card.is-open .m-card__head .refresh-icon { display: inline-flex; }
```
Gör knappen något större än desktop (touch-target, ≥44px rekommenderat).
JS (public/js/players.js): refreshPlayerData() (rad 135-149) är hårdkodad mot desktop — den slår upp ikonen via #row-${pdgaNumber} .cell-actions .refresh-icon och swappar om #ratings-table via HTMX. På mobil finns varken den ikonen eller den tabellen. Funktionen behöver en mobil-medveten gren som:
- hittar spinner-ikonen i mobil-kortet (#m-card-${pdgaNumber} .refresh-icon)
- re-renderar mobil-kort-partialen (/partials/ratings-cards → #ratings-cards el. motsv.) istället för desktop-tabellen
- bevarar utfällt tillstånd efter swap om möjligt
Refresh-beteendet ska vara samma som desktop: uppdatera rating + prediction + round history parallellt (Promise.allSettled mot /api/refresh-player och /api/refresh-round-history). Notera 24h-cooldown på round history (src/routes/players.js).

Scope

Ingår: refresh-knapp i mobil-kort, synlig endast i utfällt läge, samma kombinerade refresh som desktop, mobil-anpassad JS-gren.

Ingår inte: ändringar i desktop-knappen, ändringar i cooldown-logiken, refaktorering av de två templatesarna till en gemensam.

## Beskrivning Refresh-knappen som finns i desktop-tabellen saknas helt i mobil-vyn. Användaren har ingen möjlighet att uppdatera en spelares rating/round history från mobil. Önskat: en något större refresh-knapp placerad **bredvid spelarnamnet** i mobil-kortet, men endast synlig när kortet är **utfällt** (`.is-open`). ## Teknisk orsak Mobil och desktop renderas via två separata EJS-templates. Refresh-knappen finns bara i desktop-varianten: - **Desktop:** `views/partials/ratings-table.ejs:82-84` — `<button class="icon-btn refresh-icon" onclick="refreshPlayerData(...)">` - **Mobil:** `views/partials/ratings-cards.ejs` — kortets huvud (`.m-card__head`, rad ~58-70) innehåller rank-chip, namn-stack och chevron, men **ingen** refresh-knapp. `public/css/mobile.css:61-65` döljer hela desktop-tabellen (`#ratings-table table { display: none }`) under brytpunkten, så desktop-knappen är inte tillgänglig på mobil. Knappen är alltså inte CSS-dold — den existerar aldrig i mobil-markupen. ## Design / lösning 1. **Markup** (`ratings-cards.ejs`): Lägg en refresh-knapp i `.m-card__head`, bredvid `.m-card__name-stack`. Återanvänd `refresh-icon`-mönstret med `fa-sync-alt`. `onclick` måste ha `event.stopPropagation()` så att klick inte triggar kortets expand/collapse (`toggleMobilePlayerCard`). 2. **CSS** (`mobile.css`): Dölj knappen som default, visa endast i utfällt läge: ```css .m-card__head .refresh-icon { display: none; } .m-card.is-open .m-card__head .refresh-icon { display: inline-flex; } ``` Gör knappen något större än desktop (touch-target, ≥44px rekommenderat). 3. **JS** (`public/js/players.js`): `refreshPlayerData()` (rad 135-149) är hårdkodad mot desktop — den slår upp ikonen via `#row-${pdgaNumber} .cell-actions .refresh-icon` och swappar om `#ratings-table` via HTMX. På mobil finns varken den ikonen eller den tabellen. Funktionen behöver en mobil-medveten gren som: - hittar spinner-ikonen i mobil-kortet (`#m-card-${pdgaNumber} .refresh-icon`) - re-renderar mobil-kort-partialen (`/partials/ratings-cards` → `#ratings-cards` el. motsv.) istället för desktop-tabellen - bevarar utfällt tillstånd efter swap om möjligt Refresh-beteendet ska vara **samma som desktop**: uppdatera rating + prediction + round history parallellt (`Promise.allSettled` mot `/api/refresh-player` och `/api/refresh-round-history`). Notera 24h-cooldown på round history (`src/routes/players.js`). ## Scope **Ingår:** refresh-knapp i mobil-kort, synlig endast i utfällt läge, samma kombinerade refresh som desktop, mobil-anpassad JS-gren. **Ingår inte:** ändringar i desktop-knappen, ändringar i cooldown-logiken, refaktorering av de två templatesarna till en gemensam.

shcizo added the enhancement label 2026-06-08 08:12:17 +02:00

shcizo referenced this issue from a commit

2026-06-08 08:24:20 +02:00

feat: add refresh button to mobile player card (#26)

shcizo referenced this issue from a commit

2026-06-08 08:44:58 +02:00

fix: spin only the icon glyph in mobile refresh button (#26)

shcizo referenced a pull request that will close this issue

2026-06-08 08:45:57 +02:00

feat: add refresh button to mobile player card (#26) #27

shcizo closed this issue

2026-06-08 08:46:16 +02:00