EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix colliding badges in herounit slider on frontpage

Browse Source
This commit is contained in:
Björn Fromme
2022-03-08 11:36:15 +01:00
parent 6a1687e625
commit 4f49ab6f6a
2 changed files with 35 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss
+7 -22
View File
@@ -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;
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+28 -24
View File
@@ -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>