From f971f416dbd487ca40dd5e6c93009eb1cd8c2032 Mon Sep 17 00:00:00 2001 From: Kevin Adametz Date: Thu, 3 Sep 2026 10:00:39 +0000 Subject: [PATCH] Akkordeons weicher aufklappen, starken Hover entfernen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Die Klappelemente sprangen auf und zu: x-show gibt dem Element sofort die volle Hoehe und blendet nur den Inhalt ein. Ersetzt durch eine Animation von grid-template-rows 0fr → 1fr ueber 500 ms mit cubic-bezier(0.33, 1, 0.68, 1), die die tatsaechliche Hoehe bewegt – ohne das Alpine-Collapse-Plugin, das in diesem Projekt nicht registriert ist. - Der zugeklappte Zustand steht auch statisch im class-Attribut, damit vor dem Start von Alpine nichts aufgeklappt aufblitzt. - aria-hidden haengt am Zustand, weil der Inhalt jetzt dauerhaft im DOM steht. - Hover: die Flaechenaufhellung (hover:bg-muted/30) ist raus, geblieben ist ein feiner Farbwechsel der Ueberschrift. Im FAQ entfaellt zusaetzlich der Hintergrundwechsel am Icon-Kreis. - Der Pfeil dreht in derselben Dauer und Kurve wie das Aufklappen. Betrifft beide Akkordeons – die Vertiefungen der Markenseiten und das FAQ. Tests: 861 gruen (3189 Assertions), Pint sauber, npm run build:b2in gebaut. Co-Authored-By: Claude Opus 5 --- dev/2026-08-28/deploy/dateiliste.txt | 1 + dev/2026-08-28/entwicklungsplan.md | 29 ++++++- .../sections/brand-detail.blade.php | 37 +++++---- .../web/components/sections/f-a-q.blade.php | 82 +++++++++++-------- tests/Feature/BrandPageSectionsTest.php | 20 +++++ 5 files changed, 115 insertions(+), 54 deletions(-) diff --git a/dev/2026-08-28/deploy/dateiliste.txt b/dev/2026-08-28/deploy/dateiliste.txt index 30253488..b69f787f 100644 --- a/dev/2026-08-28/deploy/dateiliste.txt +++ b/dev/2026-08-28/deploy/dateiliste.txt @@ -66,6 +66,7 @@ resources/views/livewire/web/components/sections/brand-detail.blade.php resources/views/livewire/web/components/sections/brand-overview.blade.php resources/views/livewire/web/components/sections/core-brands.blade.php resources/views/livewire/web/components/sections/display-feed.blade.php +resources/views/livewire/web/components/sections/f-a-q.blade.php resources/views/livewire/web/components/sections/immobilien-teaser.blade.php resources/views/livewire/web/components/sections/magazin-list.blade.php resources/views/livewire/web/components/sections/marken-cta.blade.php diff --git a/dev/2026-08-28/entwicklungsplan.md b/dev/2026-08-28/entwicklungsplan.md index 66567b90..4b7037fd 100644 --- a/dev/2026-08-28/entwicklungsplan.md +++ b/dev/2026-08-28/entwicklungsplan.md @@ -19,7 +19,7 @@ eingearbeitet. Offen: Bildmaterial, Rechtstexte und die Herstellerfreigaben. **Stand 03.09.2026:** T1 und B1–B13 abgearbeitet, **alle Arbeitspakete AP0–AP6 umgesetzt**, die Bestandsinhalte auf den Interior-Auftritt umgestellt, die Seite abgestimmt und alle vier Punkte der Abstimmungsrunde vom 03.09. umgesetzt (Nachtrag 5). Alle drei Markenseiten haben jetzt einen -ausführlichen Text. `php artisan test --compact`: **859 grün** (3180 Assertions), Pint sauber, +ausführlichen Text. `php artisan test --compact`: **861 grün** (3189 Assertions), Pint sauber, `npm run build:b2in` gebaut. **Die Seite ist testbereit** – die ausstehenden Zulieferungen trägt Marcel selbst im CMS nach. @@ -986,6 +986,28 @@ Textlink. Neu: Die Textinhalte kommen unverändert aus dem CMS (`cta_title` / `cta_text`) – Punkt 4 der Liste war inhaltlich bereits durch die neuen Texte erledigt („Ihre Küche. Persönlich geplant."). +#### 5 · Akkordeons weicher (Nachreichung aus derselben Runde) + +Rückmeldung: Die Klappelemente springen zu schnell auf und zu, der Hover-Effekt ist zu stark. + +Ursache war `x-show` mit einer Opacity-Bewegung: Das Element nimmt sofort seine volle Höhe ein +und blendet nur den Inhalt ein – es sieht aus wie ein Sprung. Ersetzt durch eine Animation von +`grid-template-rows: 0fr → 1fr` über 500 ms mit `cubic-bezier(0.33, 1, 0.68, 1)`, die die +tatsächliche Höhe bewegt. Das Alpine-Collapse-Plugin ist in diesem Projekt nicht registriert; +diese Lösung kommt ohne neue Abhängigkeit aus. + +- Der zugeklappte Zustand steht **auch statisch im `class`-Attribut**, damit vor dem Start von + Alpine nichts aufgeklappt aufblitzt. Die Objekt-Schreibweise von `x-bind:class` entfernt ihn + beim Öffnen wieder. +- `aria-hidden` hängt am Zustand, weil der Inhalt jetzt dauerhaft im DOM steht. +- **Hover:** Die Flächenaufhellung (`hover:bg-muted/30`) ist raus. Geblieben ist ein feiner + Farbwechsel der Überschrift auf die Sekundärfarbe. Im FAQ entfällt zusätzlich der + Hintergrundwechsel am Icon-Kreis. +- Der Pfeil dreht in derselben Dauer und Kurve wie das Aufklappen, damit beides zusammenläuft. + +Betrifft **beide** Akkordeons – die Vertiefungen auf den Markenseiten und das FAQ; sie hatten +dasselbe Verhalten. + #### Tests `BrandPageSectionsTest` und `BrandPageTest` erweitert: @@ -1000,8 +1022,11 @@ inhaltlich bereits durch die neuen Texte erledigt („Ihre Küche. Persönlich g erscheint auf der deutschen Seite. - Demogalerien tragen keinen „BEISPIEL"-Vermerk mehr, dafür durchgehend eine Kategorie. - Der Normalizer entfernt den Vermerk, ohne Bild, Kategorie oder Reihenfolge zu verändern. +- Jede Vertiefung rendert zugeklappt und mit der Höhen-Animation; die alte Sprung-Bewegung ist + weg. +- Weder Markenseite noch FAQ verwenden noch den Flächen-Hover. -`php artisan test --compact`: **859 grün** (3180 Assertions), Pint sauber, `npm run build:b2in` +`php artisan test --compact`: **861 grün** (3189 Assertions), Pint sauber, `npm run build:b2in` gebaut. --- diff --git a/resources/views/livewire/web/components/sections/brand-detail.blade.php b/resources/views/livewire/web/components/sections/brand-detail.blade.php index da484244..46f440fe 100644 --- a/resources/views/livewire/web/components/sections/brand-detail.blade.php +++ b/resources/views/livewire/web/components/sections/brand-detail.blade.php @@ -88,27 +88,32 @@ - {{-- x-transition statt x-collapse: das Collapse-Plugin ist in diesem - Projekt nicht registriert, dieselbe Bewegung wie im FAQ-Akkordeon. --}} -
-
- @foreach ($section['detail']['paragraphs'] as $paragraph) -

{{ $paragraph }}

- @endforeach + {{-- Weiches Auf- und Zuklappen ueber grid-template-rows (0fr → 1fr): + das animiert die tatsaechliche Hoehe, waehrend x-show den Inhalt + schlagartig einblendet. Das Alpine-Collapse-Plugin ist in diesem + Projekt nicht registriert, dies kommt ohne Abhaengigkeit aus. --}} + {{-- Der zugeklappte Zustand steht auch im statischen class-Attribut, + damit vor dem Start von Alpine nichts aufgeklappt aufblitzt. Die + Objekt-Schreibweise von x-bind:class entfernt ihn beim Oeffnen. --}} +
+
+
+ @foreach ($section['detail']['paragraphs'] as $paragraph) +

{{ $paragraph }}

+ @endforeach +
diff --git a/resources/views/livewire/web/components/sections/f-a-q.blade.php b/resources/views/livewire/web/components/sections/f-a-q.blade.php index 665b18ad..98909124 100644 --- a/resources/views/livewire/web/components/sections/f-a-q.blade.php +++ b/resources/views/livewire/web/components/sections/f-a-q.blade.php @@ -25,34 +25,39 @@
-
-
-

- {{ $faq['answer'] }} -

+ {{-- grid-template-rows 0fr → 1fr animiert die tatsaechliche Hoehe. Der + zugeklappte Zustand steht auch statisch im class-Attribut, damit vor + dem Start von Alpine nichts aufgeklappt aufblitzt. --}} +
+
+
+
+

+ {{ $faq['answer'] }} +

+
+
@@ -80,34 +85,39 @@
-
-
-

- {{ $faq['answer'] }} -

+ {{-- grid-template-rows 0fr → 1fr animiert die tatsaechliche Hoehe. Der + zugeklappte Zustand steht auch statisch im class-Attribut, damit vor + dem Start von Alpine nichts aufgeklappt aufblitzt. --}} +
+
+
+
+

+ {{ $faq['answer'] }} +

+
+
diff --git a/tests/Feature/BrandPageSectionsTest.php b/tests/Feature/BrandPageSectionsTest.php index 8a6de44b..64cf0ea2 100644 --- a/tests/Feature/BrandPageSectionsTest.php +++ b/tests/Feature/BrandPageSectionsTest.php @@ -53,6 +53,26 @@ it('turns every marked deepening into a collapsible area', function () { ->and($html)->toContain('NEW DIMENSIONS'); }); +it('renders every deepening collapsed and animates its height', function () { + $html = $this->get('/marken/rotpunkt')->assertSuccessful()->getContent(); + + // Der zugeklappte Zustand muss im statischen class-Attribut stehen, sonst blitzt der Inhalt + // vor dem Start von Alpine aufgeklappt auf. + expect(substr_count($html, 'grid grid-rows-[0fr] opacity-0 transition-all'))->toBe(4) + // grid-template-rows animiert die tatsaechliche Hoehe – die alte Bewegung blendete den + // Inhalt nur ein und sprang dabei auf die volle Hoehe. + ->and($html)->not->toContain('x-transition:enter-start="opacity-0 -translate-y-2"') + ->and($html)->toContain("'grid-rows-[1fr] opacity-100': open"); +}); + +it('uses no full-surface hover on the accordion buttons', function () { + foreach (['/marken/rotpunkt', '/faq'] as $path) { + $html = $this->get($path)->assertSuccessful()->getContent(); + + expect($html)->not->toContain('hover:bg-muted/30'); + } +}); + it('merges the two sustainability sections as the corrected version requires', function () { $html = $this->get('/marken/rotpunkt')->assertSuccessful()->getContent();