From 54a61d97b4623cbbaa5ce38902ea4135f69ebc5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 9 Mar 2022 12:18:28 +0100
Subject: [PATCH] Streamline teaser rendering on detail pages

---
 .../Private/Partials/Hotel/Details.html       | 74 +++++++++++++------
 .../Private/Partials/Region/Details.html      |  2 +-
 2 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html
index 5ffcbc6d..e68b5fd2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html
@@ -19,29 +19,61 @@
     <f:if condition="{teasers}">
         <f:then>
             <a id="teasers" class="anchor"></a>
-            <div class="splide"
-                 data-controller="slider"
-                 data-slider-preset-value="teasers">
-                <div class="splide__track">
-                    <ul class="splide__list">
-                        <f:for each="{teasers}" as="teaser">
-                            <li class="splide__slide">
-                                <f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser}"/>
-                            </li>
+            <div class="bg-gray-50 p-4"
+                 data-controller="teasergrid"
+                 data-teasergrid-grid-class="grid-cols-2"
+                 data-teasergrid-disabled-value="false">
+                <f:if condition="{teasers}">
+                    <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="teaser" iteration="iteration">
+                            <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                concept: teaser.concept,
+                                hotel: teaser.hotel,
+                                product: teaser.product,
+                                country: teaser.country,
+                                region: teaser.region,
+                                productImage: teaser.product.images.original.0,
+                                nights: teaser.nights,
+                                board: teaser.board,
+                                minPrice: teaser.minPrice,
+                                daytrip: teaser.daytrip,
+                                season: teaser.season,
+                                forceHotelUid: teaser.forceHotelUid,
+                                dateFrom: dateFrom,
+                                dateTo: dateTo,
+                                index: iteration.index
+                            }"/>
                         </f:for>
-                    </ul>
-                </div>
+                    </div>
+                    <f:if condition="{settings.showMoreLink}">
+                        <div class="text-right mt-4">
+                            <f:link.action pageUid="{settings.defaultStaticSearchPageUid}" class="button"
+                                           action="staticresult" controller="Search"
+                                           arguments="{encodedFilterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}">
+                                Alle anzeigen
+                            </f:link.action>
+                        </div>
+                    </f:if>
+                </f:if>
             </div>
-            <f:if condition="{settings.showMoreLink}">
-                <p class="text-right">
-                    <f:link.action pageUid="{settings.defaultStaticSearchPageUid}" class="button"
-                                   action="staticresult" controller="Search"
-                                   arguments="{encodedFilterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}"
-                                   additionalAttributes="{rel: 'nofollow'}">
-                        Alle anzeigen
-                    </f:link.action>
-                </p>
-            </f:if>
         </f:then>
         <f:else>
             <f:if condition="{showNonBookableHint}">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html
index 6e750c42..0fa749c0 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html
@@ -57,7 +57,7 @@
         <f:if condition="{teasers}">
             <f:then>
                 <a id="teasers" class="anchor"></a>
-                <div class="container"
+                <div class="bg-gray-50 p-4"
                      data-controller="teasergrid"
                      data-teasergrid-grid-class="grid-cols-2"
                      data-teasergrid-disabled-value="false">