Großer Card-Design-Rollout: Sticky-Toolbars, Mini-Pager und mobiles Komprimieren auf 14 Seiten
In den letzten zwei Wochen haben wir nahezu jede Listen- und Tabellenseite im Spiel auf das neue Card-System umgestellt: einheitlicher Rahmen, sticky Filter- und Sortierleisten, Mini-Pager direkt neben den Sortier-Pills und ein eigener Mobile-Komprimierungs-Layer unter 640 px. Tabellen mit horizontaler Scroll-Hölle auf dem Handy sind damit endgültig Geschichte.
🃏 Einheitliches Card-Chrome überall
- Alle Cards (Player, Schedule, Standings, Picks, Trades, Achievements, Watchlist, Coins-History, Tickets & Merchandise) teilen jetzt die gleiche Optik: 2 px Border #c8d0dd, weicher Schatten
0 3px 10px, Hover-Lift - User-Team-Highlights laufen überall über das gleiche Pattern: Team-Color-Border + 2 px inset shadow, mit auto-berechnetem Text-Kontrast
- Per-Karten-Akzent in Spezialfällen: Heim/Auswärts auf Tickets (grün/blau), Income/Spend in Coins-History (grün/rot), Kategorie-Top-Border in News (10 Farben)
📌 Sticky-Toolbar-Stack
- Tab-Leisten (team-color t5-tabs) sind jetzt sticky auf team.php, franchise.php, achievements.php, players_watchlist.php, halloffame.php — Navigation bleibt beim Scrollen langer Listen immer erreichbar
- Positions-Filter und Sortierleisten stapeln darunter:
top: calc(var(--team-sticky-top) + var(--t5-tabs-h))sorgt für saubere Stack-Reihenfolge ohne Magic Numbers - Eine kleine JS-IIFE pro Seite misst Header + Newsticker + NotificationBar und schreibt die CSS-Variable — passt sich an jedes Chrome-Setup an
⏪ ⏩ Mini-Pager direkt in der Sortierleiste
- Auf players.php, freeagents.php und draft.php (Draft-Spieler Tab) sitzt rechts in der Sortierleiste ein kompakter Mini-Pager mit
‹ Seite X / Y › - Kein Scrollen mehr bis zum Listenende um die nächste Seite anzusteuern — beide Pager (oben kompakt, unten ausführlich) teilen sich dieselben
goPrev/goNextHandler - Ghost-Buttons mit Navy-Fill bei Hover, automatisch deaktiviert bei leerem Filter
📱 Mobile-Komprimierung unter 640 px
- Eigener Media-Query-Block in
pcard_styles.phpkürzt jedes Toolbar- und Card-Sub-Element auf Mobile: Padding/Gap/Font/Logo/Foto/Position-Badge — eine voll bestückte Player-Card schrumpft von ~200 px auf ~135 px Höhe - t5-Tabs werden in der mobilen Variante schlanker (Padding 0.5→0.35rem, Font 0.72→0.68rem) — Offense/Defense/Special/Practice/Stats Reihe dominiert nicht mehr den halben Bildschirm
- Position-Filter „Alle"/„Keine" wandern auf Mobile als Mini-Pillen direkt neben die Pos-Buttons — keine zusätzliche Zeile mehr
♻️ Neue oder erweiterte umgebaute Seiten
- powerranking.php — Tabelle → Hero-Card-Grid, prominenter Power-Rang-Badge oben links, aufklappbarer „Bestandteile"-Block mit allen 11 Positions-Chips + Faktor-Gewicht in % am Rang
- trade.php selectteamtable — Hero-Cards für Trade-Partner-Auswahl mit prominentem gold „🤝 Angebot machen" CTA
- draft.php Draft-Reihenfolge + Mock-Drafts — Zwei-Zeilen-Karten pro Pick (oben Pick/Team/Wert/Trade, unten gepickter Spieler) statt 13-Spalten DataTable; Mock-Draft-Zellen mit gleichem Card-Chrome
- franchise.php Tickets & Merchandise — Spielzeilen als Cards mit farbcodierter Heim/Auswärts-Border und gold-getöntem User-Anteil
- coins.php Coins-History — Single-Line-Cards mit Season/Week-Pill, signed +/− Pille, Beschreibung und gold Total-Chip
- players_stats.php — Eine filterbare Grid statt OFF/DEF/SPE-Tabs, Stat-Pills in optgroups gruppiert, „📊 Statistiken"-Block standardmäßig aufgeklappt
- players_watchlist.php — Drei Tabs mit Player-Cards via shared
players_pcard.php; sticky Position-Filter + Sort-Bar pro Tab - halloffame.php — Player-Awards und MVPs als pll-cards, gruppiert nach Saison; Game-MVPs paginiert über shared AJAX, optionaler Saison-Filter wenn Saison > 1
- tradehistory.php — Pro Trade eine team-color-Gradient-Karte im simresult-Top-Trade-Stil, mit ⇄ Gegenüberstellung, Saison/Woche/Gesamtwert sortierbar
- news.php — Random Events als News-Cards mit Kategorie-Top-Border, Saison/Woche/Team-Filter, Sortier-Pills (Neueste/Älteste/Wichtigkeit), Filter persistiert in
sessionStorage - achievements.php — Tab-Leiste sticky
- draft.php Scouting Tab — Container-Cards mit verstärkter Border, damit sie sich besser von der Seite abheben
🔁 Geteilte Helper für visuelle Konsistenz
_game_mvp_card.php— extrahierteff_render_game_mvp_card()+ CSS-Emitter, jetzt von player_stats_leaders und halloffame verwendet (Saison-Pille nur in Multi-Saison-View)_player_leaders_card.php—ff_render_player_leaders_css()als standalone-Funktion ausgelagert, damit Sister-Card-Familien (.mvp-card) die pll-* CSS sicher mitziehenpcard_styles.php— bekommt den Mini-Pager und den Mobile-Komprimierungs-Layer, beides automatisch auf allen pcard-Pages aktiv
🐛 Sammelsurium
- Custom-Game „Bestehende Spiele"-Karten auf index.php lesen Team-Farben jetzt aus der hochgeladenen CSV/JSON statt der Stand-In-Defaults — der Gradient passt direkt zur Markenfarbe des importierten Teams
- Schedule-Cards „Noch nicht gespielt": dunklerer Text + dezenter Hintergrund, damit der Hinweis auf jedem User-Team-Hintergrund lesbar bleibt
- Mobile Mock-Draft-Zellen + Standings-Cards: Layout-Cleanups gegen Überlappungen
- Newsticker-Stärke-Pille leicht vergrößert (1.2→1.45rem), damit die Stärke-Zahl bei Trade- und FA-Meldungen lesbar ist
Unterm Strich: ein einheitliches, mobile-first Card-System auf 14 Seiten, ein gemeinsames Helper-Set für Player-/MVP-Cards und ein vorhersagbares Verhalten von Filter/Sort/Paging über die ganze App hinweg. Das Spiel fühlt sich auf dem Handy zum ersten Mal richtig benutzbar an — und auf dem Desktop bleibt die volle Informationsdichte erhalten.