Streamline page headers
This commit is contained in:
@@ -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="{
|
||||
|
||||
Reference in New Issue
Block a user