From 4f49ab6f6ad67cfbb740151b622a7ee32eb4a966 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 8 Mar 2022 11:36:15 +0100
Subject: [PATCH] Fix colliding badges in herounit slider on frontpage

---
 .../Assets/scss/components/_herounit.scss     | 29 +++--------
 .../Private/Partials/HeaderSlider.html        | 52 ++++++++++---------
 2 files changed, 35 insertions(+), 46 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss
index a10b83f7..8b2bd2c5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss
@@ -2,33 +2,18 @@
     @apply relative w-full max-w-screen-2xl mx-auto overflow-hidden;
 }
 
+.herounit__badge-wrapper {
+    @apply absolute top-0 right-0 lg:right-32 w-full px-4 md:w-auto md:px-0 flex flex-row-reverse justify-between md:flex-col md:items-center md:space-y-4;
+}
+
 .herounit__badge {
-    @apply absolute bg-badge-gradient text-white py-8 px-2;
+    @apply text-white;
 
     &--skipass {
-        top: 0;
-        right: 16px;
-        @screen lg {
-            right: 90px;
-        }
+        @apply bg-badge-gradient py-8 px-2;
     }
 
     &--custom {
-        width: 200px;
-        height: 200px;
-        top: 16px;
-        right: auto;
-        left: 16px;
-
-        @screen md {
-            top: 45px;
-            left: auto;
-            right: 17%;
-        }
-
-        @screen lg {
-            top: 75px;
-            right: 20%;
-        }
+        @apply mt-4 w-40 transform rotate-6;
     }
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
index 4233434a..1a98a0a2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
@@ -41,36 +41,40 @@
                                     </div>
                                 </div>
                             </div>
-                            <f:if condition="{slide.skipass}">
-                                <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>
-                            </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="{slide.skipass}">
+                                        <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>
+                                    </f:if>
+                                    <f:if condition="{badge}">
+                                        <f:alias map="{badgeData: badge.0.data}">
+                                            <f:link.typolink parameter="{badgeData.link}"
+                                                             title="{badgeData.title}"
+                                                             class="herounit__badge herounit__badge--custom">
+                                                <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>
                         </div>
                     </li>