From 146471bae80a9b4ba7b7d758a41d49668f05e367 Mon Sep 17 00:00:00 2001 From: fs Date: Fri, 31 Jul 2026 22:56:21 +0200 Subject: [PATCH] Wettkampfturnen: Karten offen untereinander statt hinter Tabs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bei zwei Gruppen verstecken Tabs mehr Inhalt als sie ordnen, und die offene Kartenreihe hält den Bento-Eindruck der Seite (Entscheidung Felix). Das Kinderturnen bleibt bei Tabs, dort sind es drei textreiche Gruppen — die Flamingos-Karte allein ist am Handy 2142px hoch. .group-list--stacked lag vollständig im CSS, wurde aber von KEINEM PHP ausgegeben: totes CSS aus der Zeit vor den Tabs, das heute morgen sogar noch meine minmax(0, …)-Korrektur mitbekommen hat, ohne dass es jemand sehen konnte. Jetzt ist es lebendig. Dritter toter Rest heute: "layout": "blocks" in data/turnen.json las ebenfalls niemand, ist raus. Der Karteninhalt steht dafür jetzt einmal statt zweimal. Er wird in zwei Fassungen gebraucht (Tab-Panel mit role/aria und gestapelt ohne) und ist deshalb eine Closure geworden — eine zweite Kopie wäre die Stelle, an der beide in einem halben Jahr auseinanderlaufen. Die Überschrift ist visually-hidden, nicht entfernt: sonst hätte die Sektion keinen zugänglichen Namen und die Überschriften-Gliederung eine Lücke. Dasselbe Muster wie $title_hidden in team-cards. Damit braucht die Seite auch kein group-tabs.js mehr, das ich zwei Commits vorher erst dazugeschrieben hatte. Zwei Nachbesserungen, beide gemessen: - Die versteckte Überschrift hinterließ ein Loch. Zwischen Dashboard und erster Karte standen 160px (80 unten von der einen Sektion, 80 oben von der anderen), in denen nur nackte Hintergrund-Textur zu sehen war — vorher füllte die Überschrift diesen Raum. .group-list-section--tight nimmt das obere Padding weg, jetzt 80px. - Die gestapelten Karten hatten feste 40px Innenabstand; auf --pad-card-lg umgestellt, dieselbe Korrektur wie heute morgen beim Tab-Panel. Am Desktop unverändert 40px, am Handy 28px. Nicht behoben, weil kein Fehler: die Hintergrund-Textur wirkt in leeren Flächen weich. Sie ist 1920x2545 groß und wird bei 1478px Fensterbreite auf Faktor 0,77 VERKLEINERT, ist also nicht unscharf gerechnet. Sichtbar wurde sie durch den Leerraum plus background-attachment: fixed, das sie beim Scrollen stehen lässt. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7 --- app/components/group-schedule.php | 117 +++++++++++++++++---------- app/pages/turnen-wettkampfturnen.php | 21 +++-- data/turnen.json | 1 - public/assets/css/components.css | 13 ++- 4 files changed, 100 insertions(+), 52 deletions(-) diff --git a/app/components/group-schedule.php b/app/components/group-schedule.php index 2a9b929..756aba4 100644 --- a/app/components/group-schedule.php +++ b/app/components/group-schedule.php @@ -24,6 +24,13 @@ declare(strict_types=1); * das Label kennt das Geschlecht der Person nicht (Haus-Stil Paarformen). * $footnote string (optional) — Erläuterung (z. B. zur Sternchen-Kennzeichnung) * $groupsTitle string (optional, Default 'Unsere Gruppen') + * $groupsTitleHidden bool (optional) — H2 bleibt im DOM (Dokumentgliederung für + * Screenreader, Sektion behält ihren Namen), ist aber visuell versteckt. + * Dasselbe Muster wie $title_hidden in team-cards. NICHT die Überschrift + * weglassen: dann hätte die Sektion keinen zugänglichen Namen mehr. + * $layout 'tabs' (Default) | 'stacked' — greift nur bei beschreibenden Gruppen. + * 'stacked' zeigt alle Karten offen untereinander (wenige Gruppen), + * 'tabs' ordnet viele textreiche Gruppen (Kinderturnen). * $anchor string (optional, Default 'training') * * Eine Gruppe → Trainingszeiten landen als Bento-Kachel im Dashboard. @@ -32,6 +39,8 @@ declare(strict_types=1); */ $anchor = $anchor ?? 'training'; $groupsTitle = $groupsTitle ?? 'Unsere Gruppen'; +$groupsTitleHidden = $groupsTitleHidden ?? false; +$layout = ($layout ?? 'tabs') === 'stacked' ? 'stacked' : 'tabs'; $lead = $lead ?? ''; $notice = $notice ?? ''; $noticeTitle = $noticeTitle ?? ''; @@ -86,6 +95,56 @@ $renderSession = static function (array $s): void { drumherum). Als Closure, + * weil es diese Karte in zwei Fassungen gibt: als Tab-Panel (mit role/aria) und gestapelt + * (ohne). Vorher stand das Markup nur in der Tab-Fassung; eine zweite Kopie daneben wäre + * die Stelle, an der beide auseinanderlaufen. + */ +$renderCardBody = static function (array $g) use ($renderSession): void { + ?> +
+
+

+ +

+ +
+ +

+ + + +

+ + +

+ + + +

+ +
+ +
+

Trainingszeiten

+
    + +
+ +

Kontakt:

+ + +

Übungsleitung:

+ + +

+ +
+ + @@ -150,10 +209,22 @@ $soleNote = $single ? ($groups[0]['note'] ?? '') : ''; -
+
-

- +

+ + +
+ +
+ +
+ +
+
$g): ?> @@ -170,45 +241,7 @@ $soleNote = $single ? ($groups[0]['note'] ?? '') : ''; aria-labelledby="gtab-" tabindex="0" > -
-
-

- -

- -
- -

- - - -

- - -

- - - -

- -
- -
-

Trainingszeiten

-
    - -
- -

Kontakt:

- - -

Übungsleitung:

- - -

- -
- +
diff --git a/app/pages/turnen-wettkampfturnen.php b/app/pages/turnen-wettkampfturnen.php index b86f459..f896568 100644 --- a/app/pages/turnen-wettkampfturnen.php +++ b/app/pages/turnen-wettkampfturnen.php @@ -6,10 +6,10 @@ declare(strict_types=1); * Turnen → Wettkampfturnen. Inhalt: data/turnen.json (disciplines.wettkampfturnen). * Struktur: Hero → Gruppen/Trainingszeiten. * - * Zwei Gruppen: das Wettkampftraining selbst und die Flamingos, die am 31.07.2026 vom - * Kinderturnen hierher gezogen sind. Dadurch läuft die Seite nicht mehr im - * Einzelgruppen-Layout (Trainingszeiten als Kachel im Dashboard), sondern zeigt die - * Gruppen darunter als Tabs — deshalb group-tabs.js und die Sternchen-Fußnote. + * Zwei Gruppen: die Flamingos, die am 31.07.2026 vom Kinderturnen hierher gezogen sind, + * und das Leistungsturnen. Dadurch läuft die Seite nicht mehr im Einzelgruppen-Layout + * (Trainingszeiten als Kachel im Dashboard), sondern zeigt die Gruppen darunter als + * offene Kartenreihe (layout => 'stacked') — deshalb die Sternchen-Fußnote. */ $slug = 'turnen/wettkampfturnen'; $data = json_load('turnen'); @@ -19,10 +19,6 @@ $meta = [ 'title' => 'Wettkampfturnen in Kulmbach', 'description' => 'Leistungsorientiertes Gerätturnen mit Training und Wettkämpfen: Wettkampfturnen beim TSV 08 Kulmbach im Mäximum Gym. Trainingszeiten und Kontakt im Überblick.', 'og_image' => 'img/pages/vereinsgelaende-1600.jpg', - // Seit die Flamingos hier stehen, sind es zwei Gruppen, davon eine mit - // Beschreibung — group-schedule rendert dann eine Tab-Leiste, und die braucht - // dieses Skript. Ohne es wären die Tab-Knöpfe tote Schaltflächen. - 'scripts' => ['group-tabs.js'], 'schema' => page_schema([ ['name' => 'Startseite', 'slug' => ''], ['name' => 'Turnen', 'slug' => 'turnen'], @@ -35,6 +31,15 @@ component('group-schedule', [ 'location' => $d['location'] ?? [], 'lead' => $d['lead'] ?? '', 'groups' => $d['groups'] ?? [], + // Zwei Gruppen, beide offen untereinander statt hinter Tabs: bei so wenigen + // Gruppen verstecken Tabs mehr Inhalt als sie ordnen, und die offene Kartenreihe + // hält den Bento-Eindruck der Seite. Damit braucht die Seite auch kein + // group-tabs.js mehr. Das Kinderturnen bleibt bei Tabs, dort sind es drei + // textreiche Gruppen. + 'layout' => 'stacked', + // Überschrift „Unsere Gruppen" nur für Screenreader: die Karten erklären sich + // selbst, und ohne die Zeile bleibt der Bento-Fluss ruhiger. + 'groupsTitleHidden' => true, // Drei Flamingos-Trainerinnen tragen ein Sternchen. Ohne die Fußnote stünden // hier drei unerklärte Sterne auf der Seite. 'footnote' => $data['footnote'] ?? '', diff --git a/data/turnen.json b/data/turnen.json index 11ba0c6..831e486 100644 --- a/data/turnen.json +++ b/data/turnen.json @@ -101,7 +101,6 @@ "image": { "base": "img/pages/vereinsgelaende", "widths": [640, 1000, 1600], "alt": "Luftaufnahme unserer Hans-Rausch-Sportanlage im Katzbachtal" }, "ctas": [] }, - "layout": "blocks", "location": { "venue": "Mäximum Gym", "street": "Thurnauer Str. 51", "zip": "95326", "city": "Kulmbach" }, "lead": "Annelie Frisque", "notice_tone": "stop", diff --git a/public/assets/css/components.css b/public/assets/css/components.css index ef9a808..a8c7d1e 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -2869,6 +2869,14 @@ } } +/* Versteckte Überschrift: dann fehlt der Zeile, die den Raum zwischen Dashboard und + erster Karte gefüllt hat, ihr Inhalt. Übrig blieben 160px (80 unten von der + Dashboard-Sektion + 80 oben von dieser), in denen nur nackte Hintergrund-Textur stand + — gemessen und als Loch aufgefallen (31.07.2026). Die 80px des Dashboards reichen. */ +.group-list-section--tight { + padding-top: 0; +} + /* Schlichte Gruppen (z. B. Kurse) als Raster, beschreibende Gruppen gestapelt. */ .group-list--grid { display: grid; @@ -2901,7 +2909,10 @@ grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4xl); align-items: start; - padding: var(--space-3xl) var(--space-3xl); + /* --pad-card-lg statt fester 40px, dieselbe Korrektur wie beim Tab-Panel: + auf schmalen Handys stapeln sich Container- und Kartenabstand sonst so, dass + dem Inhalt kaum Breite bleibt. Obergrenze ist der bisherige Wert. */ + padding: var(--pad-card-lg) var(--pad-card-lg); } @media (max-width: 768px) {