Avoid unstyled content in case linked page is unavaible

This commit is contained in:
Björn Fromme
2022-03-09 16:30:47 +01:00
parent 6301349498
commit 92082bd045
3 changed files with 60 additions and 63 deletions
@@ -44,32 +44,31 @@
<f:if condition="{slide.skipass} || {badge}"> <f:if condition="{slide.skipass} || {badge}">
<div class="herounit__badge-wrapper"> <div class="herounit__badge-wrapper">
<f:if condition="{slide.skipass}"> <f:if condition="{slide.skipass}">
<f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive" class="herounit__badge herounit__badge--skipass"> <f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
<p class="uppercase text-4xl font-bold leading-7 mb-2">Ski-<br>Pass</p> <div class="herounit__badge herounit__badge--skipass">
<p class="uppercase">inklusive</p> <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:link.typolink>
</f:if> </f:if>
<f:if condition="{badge}"> <f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}"> <f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}" <f:link.typolink parameter="{badgeData.link}"
title="{badgeData.title}" title="{badgeData.title}">
class="herounit__badge herounit__badge--custom"> <div class="herounit__badge herounit__badge--custom">
<svg viewBox="0 0 200 200" <svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet" preserveAspectRatio="xMinYMin meet"
class="w-full h-full"> 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-50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/> <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
</svg> </svg>
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8"> <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"> <span class="block text-center text-white uppercase font-bold leading-none text-xl">{badgeData.title -> f:format.raw()}</span>
{badgeData.title -> f:format.raw()} <f:if condition="{badgeData.subtitle}">
</span> <span class="block text-center text-white uppercase font-bold leading-none">{badgeData.subtitle -> f:format.raw()}</span>
<f:if condition="{badgeData.subtitle}"> </f:if>
<span class="block text-center text-white uppercase font-bold leading-none"> </div>
{badgeData.subtitle -> f:format.raw()}
</span>
</f:if>
</div> </div>
</f:link.typolink> </f:link.typolink>
</f:alias> </f:alias>
@@ -38,32 +38,31 @@
<f:if condition="{slide.skipass} || {badge}"> <f:if condition="{slide.skipass} || {badge}">
<div class="herounit__badge-wrapper"> <div class="herounit__badge-wrapper">
<f:if condition="{settings.showSkipassBadge}"> <f:if condition="{settings.showSkipassBadge}">
<f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive" class="herounit__badge herounit__badge--skipass"> <f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
<p class="uppercase text-4xl font-bold leading-7 mb-2">Ski-<br>Pass</p> <div class="herounit__badge herounit__badge--skipass">
<p class="uppercase">inklusive</p> <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:link.typolink>
</f:if> </f:if>
<f:if condition="{badge}"> <f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}"> <f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}" <f:link.typolink parameter="{badgeData.link}"
title="{badgeData.title}" title="{badgeData.title}">
class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6"> <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" <svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet" preserveAspectRatio="xMinYMin meet"
class="w-full h-full"> 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-50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/> <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
</svg> </svg>
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8"> <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"> <span class="block text-center text-white uppercase font-bold leading-none text-xl">{badgeData.title -> f:format.raw()}</span>
{badgeData.title -> f:format.raw()} <f:if condition="{badgeData.subtitle}">
</span> <span class="block text-center text-white uppercase font-bold leading-none">{badgeData.subtitle -> f:format.raw()}</span>
<f:if condition="{badgeData.subtitle}"> </f:if>
<span class="block text-center text-white uppercase font-bold leading-none"> </div>
{badgeData.subtitle -> f:format.raw()}
</span>
</f:if>
</div> </div>
</f:link.typolink> </f:link.typolink>
</f:alias> </f:alias>
@@ -33,32 +33,31 @@
<f:if condition="{settings.showSkipassBadge} || {badge}"> <f:if condition="{settings.showSkipassBadge} || {badge}">
<div class="herounit__badge-wrapper"> <div class="herounit__badge-wrapper">
<f:if condition="{settings.showSkipassBadge}"> <f:if condition="{settings.showSkipassBadge}">
<f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive" class="herounit__badge herounit__badge--skipass"> <f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
<p class="uppercase text-4xl font-bold leading-7 mb-2">Ski-<br>Pass</p> <div class="herounit__badge herounit__badge--skipass">
<p class="uppercase">inklusive</p> <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:link.typolink>
</f:if> </f:if>
<f:if condition="{badge}"> <f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}"> <f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}" <f:link.typolink parameter="{badgeData.link}"
title="{badgeData.title}" title="{badgeData.title}">
class="herounit__badge herounit__badge--custom"> <div class="herounit__badge herounit__badge--custom">
<svg viewBox="0 0 200 200" <svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet" preserveAspectRatio="xMinYMin meet"
class="w-full h-full"> 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-50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/> <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
</svg> </svg>
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8"> <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"> <span class="block text-center text-white uppercase font-bold leading-none text-xl">{badgeData.title -> f:format.raw()}</span>
{badgeData.title -> f:format.raw()} <f:if condition="{badgeData.subtitle}">
</span> <span class="block text-center text-white uppercase font-bold leading-none">{badgeData.subtitle -> f:format.raw()}</span>
<f:if condition="{badgeData.subtitle}"> </f:if>
<span class="block text-center text-white uppercase font-bold leading-none"> </div>
{badgeData.subtitle -> f:format.raw()}
</span>
</f:if>
</div> </div>
</f:link.typolink> </f:link.typolink>
</f:alias> </f:alias>