fs
eacf9449e0
Dritter Teil. .btn hatte nur primary + outline + sm/lg, daneben lebten mehrere Controls als Eigenbau — teils zeichengleich dupliziert. Tabs: .group-tabs__tab und .filter-bar__tab waren bis auf flex-shrink und 4px Innenabstand identisch. Beide laufen jetzt über eine gemeinsame .tab-Basis, die aria-pressed (Filter) und aria-selected (Tabs) gleich behandelt; von den BEM-Klassen bleibt nur das jeweilige Delta. Innenabstand vereinheitlicht auf --space-m, die Gruppen-Tabs verlieren dadurch 4px pro Seite. Icon-Buttons: .ad-banner__nav-btn und .ad-banner__toggle waren vollständige Duplikate voneinander. Sie tragen jetzt .btn .btn--icon und behalten nur die Glas-Optik als Delta. Der Selektor schreibt .btn mit — utilities.css lädt nach components.css, bei gleicher Spezifität gewänne sonst die rote .btn-Fläche. Trefferflächen auf 44px (WCAG 2.5.5): .btn bekommt min-height und wird inline-flex, damit Icon und Label ohne Zusatz-Markup zentriert liegen. Bezeichnend auch hier — .department-choice__btn hatte inline-flex, align-items und exakt denselben gap bereits selbst deklariert und gibt sie jetzt ab. Controls, die optisch klein bleiben sollen, strecken die Fläche stattdessen unsichtbar per Pseudo-Element (.tap-target, automatisch auch für .btn--sm) — gewertet wird die Trefferfläche, nicht die gezeichnete. Der Banner-Indikator brauchte einen anderen Weg: er trug overflow: hidden, um den Fortschrittsbalken zu beschneiden, was jede Erweiterung wieder abgeschnitten hätte. Der sichtbare 6px-Balken liegt jetzt im ::before, der Fortschritt ist selbst rund — overflow entfällt, der Button ist 48x44px. Haupt-Nav-Links, Dropdown-Trigger und Footer-Social-Links bekommen min-height statt einer Pseudo-Erweiterung: sie stehen in Reihen, wo überlappende Trefferflächen den Nachbarn verdecken würden. In der 60px hohen Kopfleiste ist die Höhe ohnehin nicht sichtbar. Bewusst unverändert: die Formular-Checkbox bleibt bei 24px (WCAG 2.5.8). <input> ist ein Replaced Element, dort greift ::after nicht zuverlässig — und das zugehörige <label> ist klickbar und liefert die große Fläche. .btn--ghost ist angelegt, hat aber aktuell keinen Abnehmer: die vermuteten nackten Links sind bei näherem Hinsehen Bildkarten (.instagram__link), Wrapper (.split__cta) oder eigenständige Karten-Affordanzen (.team-card__cta), keine tertiären Buttons. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
77 lines
4.0 KiB
PHP
77 lines
4.0 KiB
PHP
<?php
|
||
|
||
declare(strict_types=1);
|
||
|
||
/**
|
||
* Matchcenter-Sektion einer Mannschaft (kicker-Stil): Kopf (Name + Liga + Link zur
|
||
* Mannschaftsseite), darunter die aktuelle Saison (Tabelle + Spiele) via
|
||
* matchcenter-season. Liegt eine archivierte Vorsaison vor, sind beide Saisons über
|
||
* eine Stripe-Tabbar umschaltbar (wiederverwendetes group-tabs-Pattern, ohne JS
|
||
* gestapelt sichtbar). Props: $team (data/matchcenter.json → teams[]).
|
||
*/
|
||
$team = $team ?? [];
|
||
$next = $team['next_matches'] ?? [];
|
||
$results = $team['last_results'] ?? [];
|
||
$table = $team['table'] ?? [];
|
||
$league = $team['league'] ?? null;
|
||
$name = (string) ($team['name'] ?? '');
|
||
$season = (string) ($team['season'] ?? '');
|
||
$previous = $team['previous'] ?? null;
|
||
$hasPrevious = is_array($previous)
|
||
&& (($previous['last_results'] ?? []) !== [] || ($previous['table'] ?? []) !== []);
|
||
$key = preg_replace('/[^a-z0-9-]+/', '', strtolower((string) ($team['key'] ?? '')));
|
||
|
||
$curCaption = 'Tabelle ' . $name . ($season !== '' ? ' · ' . $season : ($league ? ' · ' . $league : ''));
|
||
$tabCur = $season !== '' ? $season : 'Aktuelle Saison';
|
||
?>
|
||
<section class="section matchcenter-team" id="team-<?= e($key) ?>">
|
||
<div class="container">
|
||
<div class="matchcenter-team__head">
|
||
<div class="matchcenter-team__heading">
|
||
<h2><?= e($name) ?></h2>
|
||
<?php if ($league): ?>
|
||
<p class="matchcenter-team__league"><?= icon('trophy', 'matchcenter-team__league-icon') ?><?= e($league) ?></p>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php if (!empty($team['slug'])): ?>
|
||
<a class="btn btn--outline" href="<?= e(url($team['slug'])) ?>">Zur Mannschaft</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php if (!$hasPrevious): ?>
|
||
<?php component('matchcenter-season', [
|
||
'next' => $next, 'results' => $results, 'table' => $table, 'caption' => $curCaption,
|
||
]); ?>
|
||
<?php else: ?>
|
||
<?php
|
||
$prevSeason = (string) ($previous['season'] ?? '');
|
||
$prevLeague = $previous['league'] ?? $league;
|
||
$tabPrev = $prevSeason !== '' ? $prevSeason : 'Vorsaison';
|
||
$prevCaption = 'Tabelle ' . $name . ($prevSeason !== '' ? ' · ' . $prevSeason : '');
|
||
?>
|
||
<div class="matchcenter-team__seasons group-tabs" data-group-tabs>
|
||
<div class="group-tabs__bar matchcenter-team__seasons-bar" role="tablist" aria-label="Saison wählen – <?= e($name) ?>">
|
||
<button class="tab group-tabs__tab" role="tab" type="button"
|
||
id="mc-tab-<?= e($key) ?>-cur" aria-controls="mc-panel-<?= e($key) ?>-cur" aria-selected="true"
|
||
><?= e($tabCur) ?></button>
|
||
<button class="tab group-tabs__tab" role="tab" type="button"
|
||
id="mc-tab-<?= e($key) ?>-prev" aria-controls="mc-panel-<?= e($key) ?>-prev" aria-selected="false"
|
||
><?= e($tabPrev) ?></button>
|
||
</div>
|
||
<div class="matchcenter-team__season-panel" role="tabpanel"
|
||
id="mc-panel-<?= e($key) ?>-cur" aria-labelledby="mc-tab-<?= e($key) ?>-cur" tabindex="0">
|
||
<?php component('matchcenter-season', [
|
||
'next' => $next, 'results' => $results, 'table' => $table, 'caption' => $curCaption,
|
||
]); ?>
|
||
</div>
|
||
<div class="matchcenter-team__season-panel" role="tabpanel"
|
||
id="mc-panel-<?= e($key) ?>-prev" aria-labelledby="mc-tab-<?= e($key) ?>-prev" tabindex="0">
|
||
<?php component('matchcenter-season', [
|
||
'results' => $previous['last_results'] ?? [], 'table' => $previous['table'] ?? [],
|
||
'caption' => $prevCaption, 'is_previous' => true,
|
||
]); ?>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</section>
|