From f958f50b24218c89453506c978f8de15d43d829d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Mon, 14 Mar 2022 17:40:16 +0100
Subject: [PATCH] Streamline teasergroup rendering

---
 .../Private/Assets/scss/base/_typography.scss |  2 +-
 .../Private/Templates/City/Teasergroup.html   | 15 +++---
 .../Templates/Concept/Teasergroup.html        | 18 ++++----
 .../Private/Templates/Hotel/Teasergroup.html  | 20 ++++----
 .../Templates/Product/Teasergroup.html        |  7 +--
 .../Private/Templates/Region/Teasergroup.html | 46 +++++++++++++------
 6 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_typography.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_typography.scss
index d66bf1f0..00e43219 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_typography.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_typography.scss
@@ -10,7 +10,7 @@ h2,
 
 h3,
 .headline--3 {
-    @apply block text-xl md:text-2xl text-gray-800 font-bold;
+    @apply block text-xl md:text-2xl text-gray-800 font-bold leading-6;
 }
 
 h4,
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Teasergroup.html
index 62643fd1..fc2e0e5e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Teasergroup.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Teasergroup.html
@@ -7,11 +7,12 @@
 
     <f:section name="Main">
         <ep:container data="{data}">
-            <f:render partial="Header/Header" arguments="{_all}"/>
-            <div data-controller="teasergrid"
-                 data-teasergrid-grid-class="grid-cols-2"
-                 data-teasergrid-disabled-value="false">
-                <f:if condition="{teasers}">
+            <f:if condition="{teasers}">
+                <div class="container"
+                     data-controller="teasergrid"
+                     data-teasergrid-grid-class="grid-cols-2"
+                     data-teasergrid-disabled-value="false">
+                    <f:render partial="Header/Header" arguments="{_all}"/>
                     <div class="flex items-center space-x-1 mb-2 sm:hidden">
                         <button type="button"
                                 class="opacity-50"
@@ -35,8 +36,8 @@
                             <f:render partial="City/Teaser" section="Teaser" arguments="{_all}"/>
                         </f:for>
                     </div>
-                </f:if>
-            </div>
+                </div>
+            </f:if>
         </ep:container>
     </f:section>
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Teasergroup.html
index d46b0b70..bf2b2fb1 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Teasergroup.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Teasergroup.html
@@ -6,12 +6,12 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <ep:container data="{data}">
-            <f:render partial="Header/Header" arguments="{_all}"/>
-            <div data-controller="teasergrid"
-                 data-teasergrid-grid-class="grid-cols-2"
-                 data-teasergrid-disabled-value="false">
-                <f:if condition="{teasers}">
+        <f:if condition="{teasers}">
+            <ep:container data="{data}">
+                <f:render partial="Header/Header" arguments="{_all}"/>
+                <div data-controller="teasergrid"
+                     data-teasergrid-grid-class="grid-cols-2"
+                     data-teasergrid-disabled-value="false">
                     <div class="flex items-center space-x-1 mb-2 sm:hidden">
                         <button type="button"
                                 class="opacity-50"
@@ -35,9 +35,9 @@
                             <f:render partial="Concept/Teaser" section="Teaser" arguments="{_all}"/>
                         </f:for>
                     </div>
-                </f:if>
-            </div>
-        </ep:container>
+                </div>
+            </ep:container>
+        </f:if>
     </f:section>
 
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Teasergroup.html
index 288e142f..468df69a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Teasergroup.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Teasergroup.html
@@ -5,16 +5,12 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <f:if condition="{data.header}">
-            <ep:container data="{data}" cssClasses="mb-8">
+        <f:if condition="{bookable} || {nonBookable}">
+            <ep:container data="{data}">
                 <f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
-            </ep:container>
-        </f:if>
-        <ep:container data="{data}">
-            <div data-controller="teasergrid"
-                 data-teasergrid-grid-class="grid-cols-2"
-                 data-teasergrid-disabled-value="false">
-                <f:if condition="{bookable} || {nonBookable}">
+                <div data-controller="teasergrid"
+                     data-teasergrid-grid-class="grid-cols-2"
+                     data-teasergrid-disabled-value="false">
                     <div class="flex items-center space-x-1 mb-2 sm:hidden">
                         <button type="button"
                                 class="opacity-50"
@@ -47,9 +43,9 @@
                             }"/>
                         </f:for>
                     </div>
-                </f:if>
-            </div>
-        </ep:container>
+                </div>
+            </ep:container>
+        </f:if>
     </f:section>
 
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
index 2749b70e..355243c5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
@@ -6,15 +6,12 @@
 
     <f:section name="Main">
         <div class="py-8 bg-ep-primary-bg">
-            <f:if condition="{data.header}">
-                <div class="container mb-8">
-                    <f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
-                </div>
-            </f:if>
             <div class="container"
                  data-controller="teasergrid"
                  data-teasergrid-grid-class="grid-cols-2"
                  data-teasergrid-disabled-value="false">
+                <f:render partial="Header/Header"
+                          arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
                 <f:if condition="{teasers}">
                     <div class="flex items-center space-x-1 mb-2 sm:hidden">
                         <button type="button"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Teasergroup.html
index 18cb4337..15a7bb51 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Teasergroup.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Teasergroup.html
@@ -6,23 +6,39 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <div>
-            <ep:container data="{data}">
-                <div class="splide"
-                     data-controller="slider"
-                     data-slider-preset-value="teasers">
-                    <div class="splide__track">
-                        <ul class="splide__list">
-                            <f:for each="{teasers}" as="region">
-                                <li class="splide__slide">
-                                    <f:render partial="Region/Teaser" section="Teaser" arguments="{_all}"/>
-                                </li>
-                            </f:for>
-                        </ul>
+        <ep:container data="{data}">
+            <f:if condition="{teasers}">
+                <div class="container"
+                     data-controller="teasergrid"
+                     data-teasergrid-grid-class="grid-cols-2"
+                     data-teasergrid-disabled-value="false">
+                    <f:render partial="Header/Header" arguments="{_all}"/>
+                    <div class="flex items-center space-x-1 mb-2 sm:hidden">
+                        <button type="button"
+                                class="opacity-50"
+                                data-action="teasergrid#grid"
+                                data-teasergrid-target="button">
+                            <svg class="w-5 h-5 text-ep-primary">
+                                <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
+                            </svg>
+                        </button>
+                        <button type="button"
+                                data-action="teasergrid#block"
+                                data-teasergrid-target="button">
+                            <svg class="w-5 h-5 text-ep-primary">
+                                <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
+                         data-teasergrid-target="container">
+                        <f:for each="{teasers}" as="region">
+                            <f:render partial="Region/Teaser" section="Teaser" arguments="{_all}"/>
+                        </f:for>
                     </div>
                 </div>
-            </ep:container>
-        </div>
+            </f:if>
+        </ep:container>
     </f:section>
 
 </html>