From ddf3b64aaeed7b82c56bec294bfa66e3b99f6b2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Mon, 5 Sep 2022 11:11:06 +0200
Subject: [PATCH] Adjust layout of city detail page

---
 .../Private/Partials/City/Details.html        | 70 ++++++++++++++++++-
 .../Private/Templates/City/Detail.html        | 64 +----------------
 2 files changed, 69 insertions(+), 65 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Details.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Details.html
index 9a959899..4608080c 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Details.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Details.html
@@ -1,5 +1,6 @@
+{namespace ep=EP\EpTheme\ViewHelpers}
 <div class="space-y-2">
-    <div class="odd:bg-zinc-50 p-4" data-rte-content>
+    <div class="odd:bg-zinc-50 p-4">
         <f:if condition="{bars}">
             <f:then>
                 <div class="headline--3 headline--underlined">
@@ -12,8 +13,73 @@
                 </h2>
             </f:else>
         </f:if>
-        {city.description -> f:format.html()}
+        <div data-rte-content>
+            {city.description -> f:format.html()}
+        </div>
     </div>
+    <f:if condition="{teasers}">
+        <div class="bg-zinc-50 p-4 mb-4">
+            <a id="teasers" class="anchor"></a>
+            <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"
+                            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 xl: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>
+                </div>
+            </div>
+            <f:if condition="{settings.hideMoreLink}">
+                <f:else>
+                    <f:link.typolink class="button bg-button ml-4"
+                                     parameter="{settings.defaultSearchPageUid}"
+                                     additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"
+                                     additionalAttributes="{rel: 'nofollow'}">
+                        Alle anzeigen
+                    </f:link.typolink>
+                </f:else>
+            </f:if>
+        </div>
+    </f:if>
+    <f:if condition="{city.descriptionExtended}">
+        <div class="odd:bg-zinc-50 p-4" data-rte-content>
+            {city.descriptionExtended -> f:format.html()}
+        </div>
+    </f:if>
     <f:if condition="{city.images -> f:count()} > 0">
         <f:render partial="ImageGallery" arguments="{images: city.images, id: 'city-{city.uid}', thumbnails: 1}"/>
     </f:if>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Detail.html
index e43e9b07..e9709b7d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Detail.html
@@ -26,69 +26,7 @@
                       arguments="{layout: 8, subheader: city.name, header: city.headline}"/>
             <div class="grid grid-cols-3 gap-8">
                 <div class="col-span-3 lg:col-span-2">
-                    <f:render partial="City/Details" arguments="{city: city}"/>
-                    <f:if condition="{teasers}">
-                        <a id="teasers" class="anchor"></a>
-                        <div class="bg-zinc-50 p-4 mb-4"
-                             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"
-                                        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 xl: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>
-                            </div>
-                        </div>
-                        <f:if condition="{settings.hideMoreLink}">
-                            <f:else>
-                                <f:link.typolink class="button bg-button ml-4"
-                                                 parameter="{settings.defaultSearchPageUid}"
-                                                 additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"
-                                                 additionalAttributes="{rel: 'nofollow'}">
-                                    Alle anzeigen
-                                </f:link.typolink>
-                            </f:else>
-                        </f:if>
-                    </f:if>
-                    <f:if condition="{city.descriptionExtended}">
-                        <div class="p-4 mt-4" data-rte-content>
-                            {city.descriptionExtended -> f:format.html()}
-                        </div>
-                    </f:if>
+                    <f:render partial="City/Details" arguments="{city: city, teasers: teasers}"/>
                 </div>
                 <div class="col-span-3 lg:col-span-1">
                     <f:if condition="{teasers}">