Mobile overhaul: round-picker bracket, 5-tab nav + More sheet, real icons
- Bracket on phones: a segmented round picker with full-width cards replaces the 1040px sideways scroll; desktop keeps the columns. - Odds table: sticky team column; the three lowest-value columns hide on phones so Team/QF/SF/Final/Champion fit without scrolling. - Bottom nav: 4 primary tabs + a More sheet (vs Markt, Modell, Story, Teams, Daten, plus language & theme toggles) — 7 tabs were cramped. - Emoji → icons: timeline events use a ball icon, card-shaped color chips and substitution arrows; unknown-team fallbacks use a shield. Country-flag emojis stay (intentional). - Readability: bigger scores on match cards, minimum text sizes bumped, probability-number triple hides on the narrowest screens (the bar carries the information). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link, useParams } from '@tanstack/react-router';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { ArrowLeft, Shield } from 'lucide-react';
|
||||
import { Card, CardBody, CardHeader } from '@/components/ui/Card';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { teamFlag } from '@/lib/teams';
|
||||
@@ -21,7 +21,7 @@ function FixtureRow({ f, team }: { f: Fixture; team: string }) {
|
||||
<Link to="/match/$num" params={{ num: String(f.num) }} className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-elevated">
|
||||
<span className="w-10 text-xs text-faint">{f.group ? fmt(t.team.groupShort, { group: f.group }) : f.stage !== 'group' ? t.team.stageShort[f.stage] : f.round}</span>
|
||||
<span className="text-faint">{isHome ? t.common.vs : t.team.awayIndicator}</span>
|
||||
<span aria-hidden>{opp.team ? teamFlag(opp.team) : '⚽'}</span>
|
||||
<span aria-hidden className="grid w-5 place-items-center">{opp.team ? teamFlag(opp.team) : <Shield size={14} className="text-faint" />}</span>
|
||||
<span className="truncate text-ink">{opp.label}</span>
|
||||
<span className="ml-auto tnum text-faint">
|
||||
{done && us != null ? <span className="text-ink">{us}–{them}</span> : `${kickoffDay(f.kickoff)} ${kickoffTime(f.kickoff)}`}
|
||||
|
||||
Reference in New Issue
Block a user