Streamline page headers

This commit is contained in:
Björn Fromme
2022-03-09 14:21:14 +01:00
parent 1b74bb1087
commit d2c5aedb11
5 changed files with 47 additions and 43 deletions
@@ -1,3 +1,7 @@
.headerbar {
@apply bg-ep-primary-light sbw:bg-sbw-primary text-white uppercase font-semibold py-2 px-4 mb-4;
}
.anchor {
@apply block h-0 w-0 pt-16 -mt-16;
}
@@ -8,21 +8,14 @@
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'transform -translate-y-2 text-white'}"/>
</f:if>
<div class="py-4 relative">
<div class="container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 pb-4">
<div class="container grid grid-cols-2 lg:grid-cols-4 gap-8 pb-4">
<f:for each="{footernav}" as="menuheader">
<div data-controller="collapse"
data-collapse-until-value="991">
<span class="headline--4 text-white hidden md:block">
<div>
<span class="headline--4 text-white">
{menuheader.title}
</span>
<button type="button"
class="headline--4 text-white md:hidden"
data-action="collapse#toggle">
{menuheader.title}
</button>
<f:if condition="{menuheader.children}">
<ul class="list-disc text-white mb-0 pl-4"
data-collapse-target="container">
<ul class="list-disc text-white mb-0 pl-4">
<f:for each="{menuheader.children}" as="submenuitem">
<li>
<a class="text-white" href="{submenuitem.link}"{f:if(condition: '{submenuitem.doktype} == 3', then: ' target="_blank"')} title="{submenuitem.linktext}">{submenuitem.title}</a>
@@ -38,9 +38,9 @@
<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 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}">
@@ -2,7 +2,7 @@
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8 lg:-mt-8">
<div class="herounit h-80 lg:h-96 mb-8">
<f:alias map="{headerImage: images.0}">
<f:if condition="{headerImage}">
<picture>
@@ -27,37 +27,43 @@
</div>
</div>
</div>
<f:if condition="{settings.showSkipassBadge}">
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
alt="Skipass inklusive"
class="absolute top-0 lg:top-8 right-8 lg:right-28 w-20 lg:w-auto" />
</f:if>
<f:if condition="{headerImage.originaldescription}">
<div class="pagehead__picturecredit">{headerImage.description -> f:format.htmlspecialchars()}</div>
</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>
</div>
</f:link.typolink>
</f:alias>
<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>
</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>
</div>
</f:link.typolink>
</f:alias>
</f:if>
</div>
</f:if>
</div>
@@ -26,6 +26,7 @@
<div class="col-span-3 lg:col-span-2" data-rte-content>
{concept.description -> f:format.html()}
<f:if condition="{teasers}">
<a class="anchor" id="teasers"></a>
<div class="flex flex-col space-y-4 md:space-y-8">
<f:for each="{teasers}" as="teaser" iteration="iteration">
<f:render partial="Product/Teaser" section="Teaser" arguments="{