Matchcenter: „Nächste Spiele" als Band statt Autoplay-Slider

Der Bereich wirkte deplatziert: der Track war auf 620px begrenzt und zeigte
eine Folie, wodurch die Karte auf breiten Fenstern in ~840px Totraum schwebte;
dazu derselbe Hintergrund wie der Hero direkt darüber, kein Akzent, und ein
einsames „:" zwischen den Wappen, das wie ein fehlendes Ergebnis aussah.

Neu als abgesetztes Band (.section--sunken, nutzt endlich das dafür
vorgesehene, bisher unbenutzte Token --clr-bg-deep) mit roter Oberkante:
links der Aufmacher (match-feature), rechts die folgenden Termine als
verlinkte match-row-Zeilen ohne Kartenfläche.

Der Aufmacher ist die große Variante der Terminzeile — Heim über Gast,
linksbündig, gleiche Struktur wie die Zeilen daneben. Bewusst nur drei
typografische Rollen (Meta-Zeile · Vereinsnamen in Coolvetica · Anstoßzeile
mit Countdown) statt der acht der ersten Fassung, ohne Badges, Icons oder
Button. Die eigene Mannschaft wird über Helligkeit markiert, nicht über
font-weight — Coolvetica hat nur einen Schnitt, bold wäre synthetisch.

match-row bekommt optionale $href/$meta-Props; Raster und Innenabstand liegen
jetzt im __link-Wrapper, damit als Link die ganze Zeilenfläche klickbar ist.
Neue Helper match_when() (ISO + deutscher Countdown, explizit Europe/Berlin,
weil PHP global auf UTC läuft) und match_competition_label().

match-slider.php und match-card.php entfallen — Letztere wurde
ausschließlich vom Slider genutzt. carousel.js treibt damit nur noch den
Banner-Slider der Startseite und wird im Matchcenter nicht mehr geladen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-27 00:39:57 +02:00
parent bee19a2ddc
commit 66c402d9f7
10 changed files with 461 additions and 401 deletions

View File

@@ -3,36 +3,60 @@
declare(strict_types=1);
/**
* Kompakte Spielzeile für die Matchcenter-Seitenspalte (kicker-Stil): Datum oben,
* darunter Heim über Gast (Wappen + Name, lange Namen werden mit … gekürzt), rechts
* das Ergebnis bzw. — bei anstehenden Spielen — die Anstoßzeit. Heim steht immer
* oben/links. Props: $match (Eintrag aus data/matchcenter.json).
* Kompakte Spielzeile (kicker-Stil): Datum oben, darunter Heim über Gast (Wappen +
* Name, lange Namen werden mit … gekürzt), rechts das Ergebnis bzw. — bei
* anstehenden Spielen — die Anstoßzeit. Heim steht immer oben. Props:
* $match Eintrag aus data/matchcenter.json (next_matches[]/last_results[]/upcoming[])
* $meta optionale Angabe neben dem Datum (im „Nächste Spiele"-Band: die Mannschaft)
* $href optionales Ziel — dann ist die ganze Zeile ein Link
* Der innere __link-Wrapper trägt Raster und Innenabstand, damit als Link die
* komplette Zeilenfläche klickbar ist (und ohne Link nichts anders aussieht).
*/
$m = $match;
$hasResult = isset($m['goals_home'], $m['goals_away']);
$isHome = !empty($m['is_home']);
$meta = (string) ($meta ?? '');
$href = $href ?? null;
?>
<li class="match-row">
<?php if (!empty($m['date_display'])): ?>
<span class="match-row__date"><?= e($m['date_display']) ?></span>
<?php endif; ?>
<div class="match-row__teams">
<span class="match-row__team<?= $isHome ? ' is-own' : '' ?>">
<?php component('crest', ['src' => $m['home_crest'] ?? null, 'name' => $m['home'] ?? '']); ?>
<span class="match-row__name" title="<?= e($m['home'] ?? '') ?>"><?= e($m['home'] ?? '') ?></span>
</span>
<span class="match-row__team<?= !$isHome ? ' is-own' : '' ?>">
<?php component('crest', ['src' => $m['away_crest'] ?? null, 'name' => $m['away'] ?? '']); ?>
<span class="match-row__name" title="<?= e($m['away'] ?? '') ?>"><?= e($m['away'] ?? '') ?></span>
</span>
</div>
<span class="match-row__outcome">
<?php if ($hasResult): ?>
<span class="match-row__score"><?= (int) $m['goals_home'] ?>:<?= (int) $m['goals_away'] ?></span>
<?php elseif (!empty($m['time_display'])): ?>
<span class="match-row__time"><?= e($m['time_display']) ?></span>
<?php if ($href !== null): ?>
<a class="match-row__link" href="<?= e($href) ?>">
<?php else: ?>
<span class="match-row__time" aria-hidden="true"></span>
<div class="match-row__link">
<?php endif; ?>
<?php if (!empty($m['date_display']) || $meta !== ''): ?>
<span class="match-row__head">
<?php if (!empty($m['date_display'])): ?>
<span class="match-row__date"><?= e($m['date_display']) ?></span>
<?php endif; ?>
<?php if ($meta !== ''): ?>
<span class="match-row__meta"><?= e($meta) ?></span>
<?php endif; ?>
</span>
<?php endif; ?>
<span class="match-row__teams">
<span class="match-row__team<?= $isHome ? ' is-own' : '' ?>">
<?php component('crest', ['src' => $m['home_crest'] ?? null, 'name' => $m['home'] ?? '']); ?>
<span class="match-row__name" title="<?= e($m['home'] ?? '') ?>"><?= e($m['home'] ?? '') ?></span>
</span>
<span class="match-row__team<?= !$isHome ? ' is-own' : '' ?>">
<?php component('crest', ['src' => $m['away_crest'] ?? null, 'name' => $m['away'] ?? '']); ?>
<span class="match-row__name" title="<?= e($m['away'] ?? '') ?>"><?= e($m['away'] ?? '') ?></span>
</span>
</span>
<span class="match-row__outcome">
<?php if ($hasResult): ?>
<span class="match-row__score"><?= (int) $m['goals_home'] ?>:<?= (int) $m['goals_away'] ?></span>
<?php elseif (!empty($m['time_display'])): ?>
<span class="match-row__time"><?= e($m['time_display']) ?></span>
<?php else: ?>
<span class="match-row__time" aria-hidden="true"></span>
<?php endif; ?>
</span>
<?php if ($href !== null): ?>
<span class="visually-hidden"> zur Mannschaft</span>
</a>
<?php else: ?>
</div>
<?php endif; ?>
</span>
</li>