diff --git a/public/assets/site.css b/public/assets/site.css index e95e7f4..3f11398 100644 --- a/public/assets/site.css +++ b/public/assets/site.css @@ -409,6 +409,10 @@ body.consent-open{padding-bottom:320px} Inline geoeffnet stand es sonst in der schmalen Spalte neben der Marke und schob den ganzen Kopf auseinander - auf dem Telefon sah es aus, als fehle das Menue. */ .site-header{position:relative} +/* Gibt der Kopfbereich seine Flaeche selbst vor, malt der klebende Kopf keine zweite dahinter: + sonst zeigte eine durchsichtige Sektion Weiss statt Seite, und die Schattenlinie liesse sich + weder faerben noch abschalten. Linie und Schatten kommen dann aus Rahmen und Wirkung. */ +.site-header.is-sticky.has-own-surface{background:transparent;box-shadow:none} .site-header .menu-burger[open]>summary{border-radius:8px} .site-header .menu-burger-body{position:absolute;left:0;right:0;top:100%;z-index:30; padding:15px max(16px,calc((100% - var(--k-container,1180px)) / 2 + 16px)) 25px; diff --git a/src/Twig/HeaderExtension.php b/src/Twig/HeaderExtension.php new file mode 100644 index 0000000..1b66d83 --- /dev/null +++ b/src/Twig/HeaderExtension.php @@ -0,0 +1,56 @@ + {% if areas.header|default(null) %} -
+
{% for block in areas.header.blocks %}{% include 'blocks/block.html.twig' with {block: block, postLists: {}, forms: {}, breadcrumbs: [], navigation: navigation|default({}), sections: sections|default({}), richText: true, richHeadings: areas.header.schemaVersion|default(1) >= 17, eagerImage: null} only %}{% endfor %}
{% endif %} diff --git a/templates/page.html.twig b/templates/page.html.twig index c872726..7e3dd51 100644 --- a/templates/page.html.twig +++ b/templates/page.html.twig @@ -77,7 +77,7 @@ {# Header and footer are block documents like any page, so they are built from elements instead of being written into this template. #} {% if areas.header|default(null) %} -
+
{% for block in areas.header.blocks %}{% include 'blocks/block.html.twig' with {block: block, editing: editing|default(false), postLists: {}, forms: {}, breadcrumbs: [], navigation: navigation|default({}), sections: sections|default({}), richText: areas.header.schemaVersion|default(1) >= 12, richHeadings: areas.header.schemaVersion|default(1) >= 17, eagerImage: eagerImage|default(null), inHeader: true} only %}{% endfor %}
{% endif %} diff --git a/tests/CmsTest.php b/tests/CmsTest.php index 5793aa0..0ad3841 100644 --- a/tests/CmsTest.php +++ b/tests/CmsTest.php @@ -810,6 +810,29 @@ final class CmsTest extends TestCase self::assertStringContainsString('class="site-header is-sticky"', $this->request('/')->getContent()); } + /** + * Ein Kopfbereich mit eigener Fläche bekommt keine zweite dahinter. + * + * Beim Nachbau der Tagespflege war die Sektion beim Scrollen auf #ffffff00 gestellt und blieb + * trotzdem weiß: der klebende Kopf malte seine eigene Fläche und Schattenlinie darunter. + */ + public function testAHeaderThatPaintsItsOwnSurfaceGetsNoSecondOne(): void + { + $settings = $this->site->load(); + $this->site->save([...$settings, 'stickyHeader' => true, 'sameAs' => '', 'consentGroups' => $settings['consentGroups']]); + self::assertStringContainsString('class="site-header is-sticky"', $this->request('/')->getContent(), 'Ohne eigene Fläche bleibt die weiße des Kopfes.'); + + self::assertTrue(\App\Twig\HeaderExtension::ownSurface(['blocks' => [['id' => 's', 'type' => 'section', 'style' => ['desktop' => ['scrolled' => ['backgroundColor' => '#ffffff00']]]]]])); + self::assertTrue(\App\Twig\HeaderExtension::ownSurface(['blocks' => [['id' => 's', 'type' => 'section', 'style' => ['mobile' => ['backgroundColor' => '#294655']]]]])); + // Eine Textfarbe ist keine Fläche, und ein Kasten in einer Spalte macht noch keinen Kopf. + self::assertFalse(\App\Twig\HeaderExtension::ownSurface(['blocks' => [['id' => 's', 'type' => 'section', 'style' => ['desktop' => ['color' => '#294655']]]]])); + self::assertFalse(\App\Twig\HeaderExtension::ownSurface(['blocks' => [['id' => 's', 'type' => 'section', 'children' => [['id' => 'c', 'type' => 'column', 'style' => ['desktop' => ['backgroundColor' => '#ffffff']]]]]]])); + self::assertFalse(\App\Twig\HeaderExtension::ownSurface(null)); + + $css = (string) file_get_contents(__DIR__.'/../public/assets/site.css'); + self::assertStringContainsString('.site-header.is-sticky.has-own-surface{background:transparent;box-shadow:none}', $css); + } + /** @return iterable */ public static function imageLinks(): iterable {