From 92082bd04533397d43d61556bd2409ebdffb3a2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 9 Mar 2022 16:30:47 +0100
Subject: [PATCH] Avoid unstyled content in case linked page is unavaible

---
 .../Private/Partials/HeaderSlider.html        | 41 +++++++++----------
 .../Private/Partials/HeaderSliderSmall.html   | 41 +++++++++----------
 .../Private/Partials/SubpageHeader.html       | 41 +++++++++----------
 3 files changed, 60 insertions(+), 63 deletions(-)

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 822b562c..88ff0a66 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
@@ -44,32 +44,31 @@
                             <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 parameter="{settings.skipassPageUid}" title="Skipass inklusive">
+                                            <div 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>
+                                            </div>
                                         </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}">
-                                                <span class="block text-center text-white uppercase font-bold leading-none">
-                                                    {badgeData.subtitle -> f:format.raw()}
-                                                </span>
-                                                    </f:if>
+                                                             title="{badgeData.title}">
+                                                <div 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}">
+                                                            <span class="block text-center text-white uppercase font-bold leading-none">{badgeData.subtitle -> f:format.raw()}</span>
+                                                        </f:if>
+                                                    </div>
                                                 </div>
                                             </f:link.typolink>
                                         </f:alias>
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 c2b164de..f8f2086e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
@@ -38,32 +38,31 @@
             <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" 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 parameter="{settings.skipassPageUid}" title="Skipass inklusive">
+                            <div 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>
+                            </div>
                         </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}">
-                                <span class="block text-center text-white uppercase font-bold leading-none">
-                                    {badgeData.subtitle -> f:format.raw()}
-                                </span>
-                                    </f:if>
+                                             title="{badgeData.title}">
+                                <div 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}">
+                                            <span class="block text-center text-white uppercase font-bold leading-none">{badgeData.subtitle -> f:format.raw()}</span>
+                                        </f:if>
+                                    </div>
                                 </div>
                             </f:link.typolink>
                         </f:alias>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
index 81edd1d2..adc39f63 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
@@ -33,32 +33,31 @@
         <f:if condition="{settings.showSkipassBadge} || {badge}">
             <div class="herounit__badge-wrapper">
                 <f:if condition="{settings.showSkipassBadge}">
-                    <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 parameter="{settings.skipassPageUid}" title="Skipass inklusive">
+                        <div 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>
+                        </div>
                     </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}">
-                                                <span class="block text-center text-white uppercase font-bold leading-none">
-                                                    {badgeData.subtitle -> f:format.raw()}
-                                                </span>
-                                </f:if>
+                                         title="{badgeData.title}">
+                            <div 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}">
+                                        <span class="block text-center text-white uppercase font-bold leading-none">{badgeData.subtitle -> f:format.raw()}</span>
+                                    </f:if>
+                                </div>
                             </div>
                         </f:link.typolink>
                     </f:alias>