From 083315195612eebc8824dcc5d7fe7a9ebfcfd542 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 8 Mar 2022 11:50:08 +0100
Subject: [PATCH] Fix position of skipass badge on product detail page

---
 .../Private/Partials/HeaderSliderSmall.html   | 54 ++++++++++---------
 .../Partials/Product/HeaderDetail.html        | 24 +++++----
 2 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
index 1e44fd1e..7a405e66 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
@@ -3,7 +3,7 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <f:if condition="{slide}">
-        <div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8">
+        <div class="herounit h-80 lg:h-96 mb-8">
             <f:alias map="{image: slide.image.0}">
                 <f:if condition="{image}">
                     <picture>
@@ -35,36 +35,40 @@
                     </div>
                 </div>
             </div>
-            <f:if condition="{settings.showSkipassBadge}">
-                <f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
-                    <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png" alt="Skipass inklusive"
-                             class="absolute top-0 right-8 lg:right-28 w-20 lg:w-auto" />
-                </f:link.typolink>
-            </f:if>
-            <f:if condition="{badge}">
-                <f:alias map="{badgeData: badge.0.data}">
-                    <f:link.typolink parameter="{badgeData.link}"
-                                     title="{badgeData.title}"
-                                     class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
-                        <svg viewBox="0 0 200 200"
-                             xmlns="http://www.w3.org/2000/svg"
-                             preserveAspectRatio="xMinYMin meet"
-                             class="w-full h-full">
-                            <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
-                            <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
-                        </svg>
-                        <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
+            <f:if condition="{slide.skipass} || {badge}">
+                <div class="herounit__badge-wrapper">
+                    <f:if condition="{settings.showSkipassBadge}">
+                        <f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
+                            <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png" alt="Skipass inklusive"
+                                     class="absolute top-0 right-8 lg:right-28 w-20 lg:w-auto" />
+                        </f:link.typolink>
+                    </f:if>
+                    <f:if condition="{badge}">
+                        <f:alias map="{badgeData: badge.0.data}">
+                            <f:link.typolink parameter="{badgeData.link}"
+                                             title="{badgeData.title}"
+                                             class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
+                                <svg viewBox="0 0 200 200"
+                                     xmlns="http://www.w3.org/2000/svg"
+                                     preserveAspectRatio="xMinYMin meet"
+                                     class="w-full h-full">
+                                    <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
+                                    <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
+                                </svg>
+                                <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
                             <span class="block text-center text-white uppercase font-bold leading-none text-xl">
                                 {badgeData.title -> f:format.raw()}
                             </span>
-                            <f:if condition="{badgeData.subtitle}">
+                                    <f:if condition="{badgeData.subtitle}">
                                 <span class="block text-center text-white uppercase font-bold leading-none">
                                     {badgeData.subtitle -> f:format.raw()}
                                 </span>
-                            </f:if>
-                        </div>
-                    </f:link.typolink>
-                </f:alias>
+                                    </f:if>
+                                </div>
+                            </f:link.typolink>
+                        </f:alias>
+                    </f:if>
+                </div>
             </f:if>
             <f:if condition="{slide.image.0.description}">
                 <div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
index 0d33bf5a..7ad541bf 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
@@ -9,7 +9,7 @@
             <ul class="splide__list">
                 <f:for each="{product.images}" as="image" iteration="iteration">
                     <li class="splide__slide">
-                        <div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8">
+                        <div class="herounit h-80 lg:h-96 mb-8">
                             <picture>
                                 <source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}" media="(min-width: 768px)">
                                 <source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}" media="(max-width: 767px)">
@@ -62,16 +62,18 @@
                                 <f:render partial="Badge" arguments="{badge: product.badge}"/>
                             </div>
                             <f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
-                                <f:link.typolink parameter="{settings.skipassPageUid}"
-                                                 title="Skipass inklusive"
-                                                 class="herounit__badge herounit__badge--skipass">
-                                    <p class="uppercase text-4xl font-bold leading-7 mb-2">
-                                        Ski-<br>Pass
-                                    </p>
-                                    <p class="uppercase">
-                                        inklusive
-                                    </p>
-                                </f:link.typolink>
+                                <div class="herounit__badge-wrapper">
+                                    <f:link.typolink parameter="{settings.skipassPageUid}"
+                                                     title="Skipass inklusive"
+                                                     class="herounit__badge herounit__badge--skipass">
+                                        <p class="uppercase text-4xl font-bold leading-7 mb-2">
+                                            Ski-<br>Pass
+                                        </p>
+                                        <p class="uppercase">
+                                            inklusive
+                                        </p>
+                                    </f:link.typolink>
+                                </div>
                             </f:if>
                             <f:if condition="{slide.image.0.description}">
                                 <div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700">