From 39d9e7d2e297923098a739263ec4808825f807cf Mon Sep 17 00:00:00 2001 From: Ronny Date: Sun, 12 Apr 2026 13:55:00 +0200 Subject: [PATCH] style: badges centered to flags, wider dashboard, mobile header actions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit MatchCard: - Badges (group, countdown, LIVE, BEENDET) now vertically centered to flag height, positioned left/right of the teams - Removed separate topRow — all in one matchBlock flex layout Dashboard: - max-width increased to 800px (matches spielplan width) Header: - Theme toggle + admin link moved to headerActions (always visible) - Theme toggle icon in gold color (was too dark in dark mode) - Admin link brighter (text-secondary instead of text-muted) Co-Authored-By: Claude Opus 4.6 (1M context) --- frontend/src/App.module.css | 15 ++-- frontend/src/App.tsx | 4 +- frontend/src/components/MatchCard.module.css | 25 ++++--- frontend/src/components/MatchCard.tsx | 73 ++++++++++---------- frontend/src/pages/DashboardPage.module.css | 4 +- 5 files changed, 70 insertions(+), 51 deletions(-) diff --git a/frontend/src/App.module.css b/frontend/src/App.module.css index 4b91282..a7346a7 100644 --- a/frontend/src/App.module.css +++ b/frontend/src/App.module.css @@ -85,8 +85,8 @@ font-size: 16px; cursor: pointer; transition: background 0.15s, transform 0.1s; - margin-left: 6px; flex-shrink: 0; + color: var(--gold); } .themeToggle:hover { background: var(--primary-dim); } .themeToggle:active { transform: scale(0.92); } @@ -106,19 +106,26 @@ } } -/* Hide header nav on mobile */ +/* Header actions — always visible (theme toggle + admin) */ +.headerActions { + display: flex; + align-items: center; + gap: 4px; +} + +/* Hide header nav on mobile, keep actions */ @media (max-width: 767px) { .nav { display: none; } } -/* Admin link: icon only, subtle */ +/* Admin link: icon only */ .adminLink { display: flex; align-items: center; padding: 4px; - color: var(--text-muted); + color: var(--text-secondary); text-decoration: none; transition: color 0.2s; } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index cfb7329..7b0c536 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -93,6 +93,8 @@ export default function App() { isActive ? styles.navLinkActive : styles.navLink}> Mein Profil + +
@@ -104,7 +106,7 @@ export default function App() { > {theme === 'dark' ? : } - +
diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css index 923eac3..5bf3526 100644 --- a/frontend/src/components/MatchCard.module.css +++ b/frontend/src/components/MatchCard.module.css @@ -21,14 +21,21 @@ inset 0 1px 0 rgba(255,255,255,0.07) !important; } -/* Top row — badges inset to align near flag inner edges */ -.topRow { +/* Badge columns — vertically centered to flags */ +.badgeLeft, .badgeRight { display: flex; align-items: center; - gap: 8px; - margin-bottom: 12px; - margin-left: 8px; - margin-right: 8px; + align-self: flex-start; + height: 56px; /* match flag height */ + min-width: 0; +} + +.badgeLeft { + justify-content: flex-start; +} + +.badgeRight { + justify-content: flex-end; } .status { @@ -116,12 +123,12 @@ 0 0 16px rgba(254, 174, 50, 0.25); } -/* Match row — Teams + Score/Time */ -.matchRow { +/* Match block — badges + teams + time/score */ +.matchBlock { display: flex; align-items: flex-start; justify-content: center; - gap: 10px; + gap: 6px; margin-bottom: 16px; } diff --git a/frontend/src/components/MatchCard.tsx b/frontend/src/components/MatchCard.tsx index 811b838..d4ed19f 100644 --- a/frontend/src/components/MatchCard.tsx +++ b/frontend/src/components/MatchCard.tsx @@ -84,41 +84,18 @@ export default function MatchCard({ match, onTip }: Props) { return (
- {/* Top row: Group left + Status/Countdown right */} -
- {match.group && ( - - {match.group.replace('GROUP_', 'Gruppe ')} - - )} - - {isLive && ( - - - LIVE - - )} - {isFinished && ( - {STATUS_LABELS[match.status] ?? match.status} - )} - {(state === 'open' || state === 'tipped') && match.tippable && ( - - {match.minutesUntilKickoff < 60 - ? `Noch ${remainingMins} Min!` - : (() => { - const h = Math.floor(match.minutesUntilKickoff / 60); - if (h < 24) return `in ${h}h`; - const d = Math.floor(h / 24); - return `in ${d} Tag${d > 1 ? 'en' : ''}`; - })() - } - - )} -
+ {/* Main layout: badges + teams + time/score in one block */} +
+ {/* Left badge — group */} +
+ {match.group && ( + + {match.group.replace('GROUP_', 'Gr. ')} + + )} +
- {/* Teams + Center (time or score) */} -
- {/* Home */} + {/* Home team */}
{match.homeTeam.shortName} @@ -135,11 +112,37 @@ export default function MatchCard({ match, onTip }: Props) { )}
- {/* Away */} + {/* Away team */}
{match.awayTeam.shortName}
+ + {/* Right badge — status/countdown */} +
+ {isLive && ( + + + LIVE + + )} + {isFinished && ( + {STATUS_LABELS[match.status] ?? match.status} + )} + {(state === 'open' || state === 'tipped') && match.tippable && ( + + {match.minutesUntilKickoff < 60 + ? `${remainingMins}m` + : (() => { + const h = Math.floor(match.minutesUntilKickoff / 60); + if (h < 24) return `${h}h`; + const d = Math.floor(h / 24); + return `${d}d`; + })() + } + + )} +
{/* Tipp area — wird zum farbigen Banner wenn Punkte ausgewertet */} diff --git a/frontend/src/pages/DashboardPage.module.css b/frontend/src/pages/DashboardPage.module.css index 9de5c1f..d565730 100644 --- a/frontend/src/pages/DashboardPage.module.css +++ b/frontend/src/pages/DashboardPage.module.css @@ -1,6 +1,6 @@ .dashboard { - padding: 16px; - max-width: 600px; + padding: 12px; + max-width: 800px; margin: 0 auto; display: flex; flex-direction: column;