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:
70
app/components/match-feature.php
Normal file
70
app/components/match-feature.php
Normal file
@@ -0,0 +1,70 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Aufmacher des „Nächste Spiele"-Bands: das zeitlich nächste Spiel — strukturgleich
|
||||
* mit match-row (Heim über Gast, linksbündig), nur groß. Ein Bauprinzip für das
|
||||
* ganze Band; die Wirkung kommt aus der Größe, nicht aus Badges oder Icons.
|
||||
* Drei Schriftrollen: Meta-Zeile (Abel, gesperrt) · Vereinsnamen (Coolvetica) ·
|
||||
* Anstoßzeile (Abel). Props:
|
||||
* $match Eintrag aus data/matchcenter.json → upcoming[]
|
||||
* $team_name Name der eigenen Mannschaft („1. Mannschaft")
|
||||
* $league Liganame der Mannschaft (für die Meta-Zeile)
|
||||
* $href Sprungmarke zur Mannschafts-Sektion (optional; macht den
|
||||
* Mannschaftsnamen in der Meta-Zeile zum Link)
|
||||
*/
|
||||
$m = $match;
|
||||
$isHome = !empty($m['is_home']);
|
||||
$teamName = (string) ($team_name ?? '');
|
||||
$league = (string) ($league ?? '');
|
||||
$href = $href ?? null;
|
||||
$when = match_when((string) ($m['kickoff'] ?? ''));
|
||||
|
||||
// Meta-Zeile: Mannschaft · Wettbewerb · Heim/Auswärts (leere Teile fallen weg).
|
||||
$competition = match_competition_label((string) ($m['competition'] ?? ''), $league);
|
||||
$meta = array_values(array_filter([
|
||||
$teamName,
|
||||
$competition,
|
||||
$isHome ? 'Heimspiel' : 'Auswärtsspiel',
|
||||
], static fn (string $part): bool => $part !== ''));
|
||||
|
||||
$datetime = trim(($m['date_display'] ?? '') . ' · ' . ($m['time_display'] ?? ''), ' ·');
|
||||
?>
|
||||
<article class="match-feature">
|
||||
<?php if ($meta !== []): ?>
|
||||
<p class="match-feature__meta">
|
||||
<?php foreach ($meta as $i => $part): ?>
|
||||
<?php if ($i > 0): ?>
|
||||
<span class="match-feature__sep" aria-hidden="true">·</span>
|
||||
<?php endif; ?>
|
||||
<?php if ($i === 0 && $href !== null): ?>
|
||||
<a href="<?= e($href) ?>"><?= e($part) ?></a>
|
||||
<?php else: ?>
|
||||
<span><?= e($part) ?></span>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
<div class="match-feature__fixture">
|
||||
<span class="match-feature__side<?= $isHome ? ' is-own' : '' ?>">
|
||||
<?php component('crest', ['src' => $m['home_crest'] ?? null, 'name' => $m['home'] ?? '']); ?>
|
||||
<span class="match-feature__club"><?= e($m['home'] ?? '') ?></span>
|
||||
</span>
|
||||
<span class="match-feature__side<?= !$isHome ? ' is-own' : '' ?>">
|
||||
<?php component('crest', ['src' => $m['away_crest'] ?? null, 'name' => $m['away'] ?? '']); ?>
|
||||
<span class="match-feature__club"><?= e($m['away'] ?? '') ?></span>
|
||||
</span>
|
||||
</div>
|
||||
<p class="match-feature__when">
|
||||
<?php if ($when['iso'] !== ''): ?>
|
||||
<time datetime="<?= e($when['iso']) ?>"><?= e($datetime) ?></time>
|
||||
<?php else: ?>
|
||||
<span><?= e($datetime) ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($when['countdown'] !== ''): ?>
|
||||
<span class="match-feature__sep" aria-hidden="true">·</span>
|
||||
<span class="match-feature__countdown" data-countdown="<?= e($when['iso']) ?>"><?= e($when['countdown']) ?></span>
|
||||
<?php endif; ?>
|
||||
</p>
|
||||
</article>
|
||||
Reference in New Issue
Block a user