From 921a55635c6b16c45bb3b75891850aeca8e3d5cf Mon Sep 17 00:00:00 2001 From: fs Date: Fri, 31 Jul 2026 21:54:10 +0200 Subject: [PATCH] =?UTF-8?q?Wartelisten-Hinweis=20f=C3=BCr=20Tiger=20und=20?= =?UTF-8?q?H=C3=BChner,=20=C3=BCber=20dem=20Anfrageformular?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Die Turnabteilung (Maxi) beantwortet laufend Anfragen nach einem Wartelistenplatz für „Tiger" und „Hühner", den es nicht gibt. Auf der alten Seite stand der Hinweis direkt über dem Anfrageformular, hier fehlte er. Schlimmer: an der Stelle stand das GEGENTEIL. Der bisherige Hinweis lautete "Aktuell sind alle Kinderturngruppen belegt. Bei Interesse setzen wir sie gerne auf die Warteliste." — für alle Kindergruppen, also auch für die beiden, die keine Liste führen. Der Satz hat einen Teil der Anfragen vermutlich erst erzeugt. Er ist nicht gelöscht, sondern auf die übrigen Gruppen eingegrenzt und aufs Du umgestellt (Haus-Stil; vorher stand dort klein "sie"). Der Text steht genau EINMAL, in data/turnen.json unter disciplines.eltern-kind-turnen.notice + notice_title. Zwei Stellen lesen ihn: die rote Kachel auf /turnen/eltern-kind-turnen (gab es schon) und neu ein Block direkt über dem Formular auf /turnen. Ändert die Abteilung die Lage, ist das eine Zeile in einer Datei. Umsetzung: - notice_title ist neu, weil eine rote Fläche ohne Überschrift wie eine Fehlermeldung liest. Abel statt Coolvetica, der Schnitt ist bei ~19px in Versalien unleserlich (CLAUDE.md, Design). - Der Block steht AUSSERHALB des
und damit außerhalb der role="status"-Region: ein dauerhafter Hinweis, keine Rückmeldung zum Absenden. In der Live-Region läse ihn ein Screenreader bei jeder Formularmeldung erneut vor. Kein role="alert", er steht schon beim Laden da. - Überschrift als h3 unter der h2 des Intro-Blocks, damit die Folge nicht springt. - .contact__notice übernimmt bewusst die Optik von .turnen-dash__notice, damit beide Stellen als derselbe Hinweis erkennbar sind. Weiß auf --clr-accent erreicht 4,92:1 und trägt damit Fließtext (WCAG 1.4.3). Kommt ein dritter Ort dazu, gehören die gemeinsamen Eigenschaften in eine geteilte .notice-Klasse; für zwei wäre das verfrüht. Gemessen: Hinweisbreite gleich Formularbreite (720px bei 1280, 347px bei 390), kein Überlauf. preflight ohne neue Meldungen. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7 --- app/components/contact-form.php | 25 +++++++++++++++ app/components/group-schedule.php | 12 ++++++- app/pages/turnen-eltern-kind.php | 3 +- app/pages/turnen.php | 15 +++++++-- data/turnen.json | 3 +- public/assets/css/components.css | 52 +++++++++++++++++++++++++++++++ 6 files changed, 104 insertions(+), 6 deletions(-) diff --git a/app/components/contact-form.php b/app/components/contact-form.php index 0cf65d9..b416d63 100644 --- a/app/components/contact-form.php +++ b/app/components/contact-form.php @@ -9,6 +9,15 @@ declare(strict_types=1); * $return string optional — Slug der absendenden Seite (Default '' = Startseite). Die Action * leitet nach PRG hierher zurück (whitelist-validiert), damit /kontakt nicht auf die * Startseite springt. + * $notice string optional — hervorgehobener Hinweis DIREKT über dem Formular, plus + * $noticeTitle für die Überschrift dazu. Für Dinge, die man wissen muss, BEVOR + * man schreibt (Wartelisten-Status der Turnabteilung). Steht bewusst außerhalb + * des und damit außerhalb der role="status"-Region: das ist ein + * dauerhafter Hinweis, keine Rückmeldung zum Absenden — in der Live-Region + * würde ihn ein Screenreader bei jeder Formularmeldung erneut vorlesen. + * Der Text selbst gehört in die data/*.json der aufrufenden Seite, damit er + * nicht zweimal existiert (auf /turnen ist es derselbe Hinweis, den + * group-schedule.php auf der Kinderturn-Unterseite als Kachel zeigt). * $department string optional — '' (allgemein) oder 'turnen'. Steuert Auswahlliste, * Empfänger und Feldregeln über contact_variant() (helpers.php, einzige Quelle). * Die Turn-Variante geht an die Abteilung statt an info@ und braucht keinen @@ -21,6 +30,8 @@ declare(strict_types=1); $club = json_load('club'); $return = $return ?? ''; $intro = $intro ?? null; +$notice = $notice ?? ''; +$noticeTitle = $noticeTitle ?? ''; $variant = contact_variant((string) ($department ?? '')); $interests = $variant['interests']; @@ -68,6 +79,20 @@ $f = [

Oder direkt per Mail an

+ + + + diff --git a/app/components/group-schedule.php b/app/components/group-schedule.php index f041062..81a448b 100644 --- a/app/components/group-schedule.php +++ b/app/components/group-schedule.php @@ -7,6 +7,10 @@ declare(strict_types=1); * $location array{venue, street?, zip?, city?} (optional) — Trainingsort + „Route planen" * $lead string (optional) — verantwortliche Übungsleitung (Akzent-Kachel) * $notice string (optional) — hervorgehobener Hinweis (z. B. Wartelisten-Status) + * $noticeTitle string (optional) — Überschrift dazu. Ohne sie liest sich die rote Kachel + * wie eine Fehlermeldung; mit ihr ist auf einen Blick klar, dass es eine + * Information ist. Dieselben zwei Felder rendert contact-form.php über dem + * Formular, damit der Hinweis nur EINMAL in data/turnen.json steht. * $groups array von Gruppen: * { name, level?, intro?, details?:[{heading,text}], recommendation?, note?, * trainers?:[…], sessions:[{ label?, day, time, note?, trainers?:[…] }] } @@ -22,6 +26,7 @@ $anchor = $anchor ?? 'training'; $groupsTitle = $groupsTitle ?? 'Unsere Gruppen'; $lead = $lead ?? ''; $notice = $notice ?? ''; +$noticeTitle = $noticeTitle ?? ''; $footnote = $footnote ?? ''; $groups = $groups ?? []; $location = $location ?? []; @@ -80,7 +85,12 @@ $soleNote = $single ? ($groups[0]['note'] ?? '') : '';
-

+
+ +

+ +

+
diff --git a/app/pages/turnen-eltern-kind.php b/app/pages/turnen-eltern-kind.php index a042a53..6e2c0ce 100644 --- a/app/pages/turnen-eltern-kind.php +++ b/app/pages/turnen-eltern-kind.php @@ -27,7 +27,8 @@ component('hero', ['hero' => $d['hero']]); component('group-schedule', [ 'location' => $d['location'] ?? [], 'lead' => $d['lead'] ?? '', - 'notice' => $d['notice'] ?? '', + 'notice' => $d['notice'] ?? '', + 'noticeTitle' => $d['notice_title'] ?? '', 'groups' => $d['groups'] ?? [], 'footnote' => $data['footnote'] ?? '', ]); \ No newline at end of file diff --git a/app/pages/turnen.php b/app/pages/turnen.php index 4d99fe3..093ca02 100644 --- a/app/pages/turnen.php +++ b/app/pages/turnen.php @@ -94,8 +94,17 @@ component('team-cards', [ $page['faq'] ?? []]); +/* Der Wartelisten-Hinweis steht DIREKT über dem Formular, so wie auf der alten Seite. + Grund ist Arbeitsaufwand in der Abteilung, kein Design: fuer „Tiger" und „Huehner" + kommen laufend Anfragen nach einem Wartelistenplatz, den es nicht gibt, und jede muss + einzeln beantwortet werden. Wer hier schreibt, soll es vorher lesen. Der Text kommt aus + derselben Stelle wie die Kachel auf der Kinderturn-Unterseite + (disciplines.eltern-kind-turnen.notice), ein Hinweis und eine Quelle. */ +$kinderturnen = json_load('turnen')['disciplines']['eltern-kind-turnen'] ?? []; component('contact-form', [ - 'intro' => $page['contact'], - 'return' => 'turnen', - 'department' => 'turnen', + 'intro' => $page['contact'], + 'return' => 'turnen', + 'department' => 'turnen', + 'notice' => $kinderturnen['notice'] ?? '', + 'noticeTitle' => $kinderturnen['notice_title'] ?? '', ]); diff --git a/data/turnen.json b/data/turnen.json index b1b43a8..c311f59 100644 --- a/data/turnen.json +++ b/data/turnen.json @@ -104,7 +104,8 @@ "layout": "blocks", "location": { "venue": "Mäximum Gym", "street": "Thurnauer Str. 51", "zip": "95326", "city": "Kulmbach" }, "lead": "Annelie Frisque", - "notice": "Aktuell sind alle Kinderturngruppen belegt. Bei Interesse setzen wir sie gerne auf die Warteliste.", + "notice_title": "Hinweis zur Warteliste", + "notice": "Für die Gruppen „Tiger“ und „Hühner“ (ab 8 Jahre) können wir derzeit leider keine neuen Mitglieder aufnehmen und führen deshalb aktuell keine Warteliste. Die übrigen Kinderturngruppen sind ebenfalls belegt, dort nehmen wir dein Kind aber gerne auf die Warteliste.", "groups": [ { "name": "Eltern-Kind-Turnen", diff --git a/public/assets/css/components.css b/public/assets/css/components.css index 6488a08..3a9a138 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -1771,6 +1771,47 @@ margin-top: var(--space-s); } +/* Hinweis direkt über dem Formular (Wartelisten-Status). Bewusst dieselbe Optik wie + .turnen-dash__notice, damit es auf /turnen und der Kinderturn-Unterseite als ein und + derselbe Hinweis erkennbar ist. Kommt ein dritter Ort dazu, gehören die gemeinsamen + Eigenschaften in eine geteilte .notice-Klasse; für zwei wäre das verfrüht. + Weiß auf --clr-accent erreicht 4,92:1 und trägt damit Fließtext (WCAG 1.4.3); + die Breite folgt dem Formular (.form max-width: 720px), sonst stünde der Kasten + sichtbar über die Feldkante hinaus. */ +.contact__notice { + display: flex; + align-items: flex-start; + gap: var(--space-xs); + width: 100%; + max-width: 720px; + padding: var(--pad-card); + border-radius: var(--radius-card); + background: var(--clr-accent); + color: #fff; +} + +.contact__notice-icon { + flex: none; + margin-top: 0.15em; + font-size: var(--icon-inline-lg); +} + +.contact__notice-title { + margin: 0 0 var(--space-3xs); + font-family: var(--ff-body); + font-size: var(--fs-600); + letter-spacing: var(--ls-caps); + text-transform: uppercase; + color: #fff; +} + +.contact__notice p { + margin: 0; + max-width: none; + font-size: var(--fs-600); + line-height: 1.5; +} + .form { display: grid; gap: var(--space-m); @@ -2683,6 +2724,17 @@ line-height: 1.5; } +/* Abel statt Coolvetica: die Zeile ist mit ~19px weit unter den 28px, ab denen der + Condensed-Schnitt in Versalien lesbar bleibt (siehe CLAUDE.md, Design). */ +.turnen-dash__notice-title { + margin: 0 0 var(--space-3xs); + font-family: var(--ff-body); + font-size: var(--fs-600); + letter-spacing: var(--ls-caps); + text-transform: uppercase; + color: #fff; +} + .turnen-dash__notice-icon { flex: none; margin-top: 0.1em;