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

Streamline page headers

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_misc.scss
+4
View File
@@ -1,3 +1,7 @@
.headerbar { .headerbar {
@apply bg-ep-primary-light sbw:bg-sbw-primary text-white uppercase font-semibold py-2 px-4 mb-4; @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;
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+4 -11
View File
@@ -8,21 +8,14 @@
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'transform -translate-y-2 text-white'}"/> <f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'transform -translate-y-2 text-white'}"/>
</f:if> </f:if>
<div class="py-4 relative"> <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"> <f:for each="{footernav}" as="menuheader">
<div data-controller="collapse" <div>
data-collapse-until-value="991"> <span class="headline--4 text-white">
<span class="headline--4 text-white hidden md:block">
{menuheader.title} {menuheader.title}
</span> </span>
<button type="button"
class="headline--4 text-white md:hidden"
data-action="collapse#toggle">
{menuheader.title}
</button>
<f:if condition="{menuheader.children}"> <f:if condition="{menuheader.children}">
<ul class="list-disc text-white mb-0 pl-4" <ul class="list-disc text-white mb-0 pl-4">
data-collapse-target="container">
<f:for each="{menuheader.children}" as="submenuitem"> <f:for each="{menuheader.children}" as="submenuitem">
<li> <li>
<a class="text-white" href="{submenuitem.link}"{f:if(condition: '{submenuitem.doktype} == 3', then: ' target="_blank"')} title="{submenuitem.linktext}">{submenuitem.title}</a> <a class="text-white" href="{submenuitem.link}"{f:if(condition: '{submenuitem.doktype} == 3', then: ' target="_blank"')} title="{submenuitem.linktext}">{submenuitem.title}</a>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+3 -3
View File
@@ -38,9 +38,9 @@
<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"> <f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive" class="herounit__badge herounit__badge--skipass">
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png" alt="Skipass inklusive" <p class="uppercase text-4xl font-bold leading-7 mb-2">Ski-<br>Pass</p>
class="absolute top-0 right-8 lg:right-28 w-20 lg:w-auto" /> <p class="uppercase">inklusive</p>
</f:link.typolink> </f:link.typolink>
</f:if> </f:if>
<f:if condition="{badge}"> <f:if condition="{badge}">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
+35 -29
View File
@@ -2,7 +2,7 @@
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> 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:alias map="{headerImage: images.0}">
<f:if condition="{headerImage}"> <f:if condition="{headerImage}">
<picture> <picture>
@@ -27,37 +27,43 @@
</div> </div>
</div> </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}"> <f:if condition="{headerImage.originaldescription}">
<div class="pagehead__picturecredit">{headerImage.description -> f:format.htmlspecialchars()}</div> <div class="pagehead__picturecredit">{headerImage.description -> f:format.htmlspecialchars()}</div>
</f:if> </f:if>
<f:if condition="{badge}"> <f:if condition="{settings.showSkipassBadge} || {badge}">
<f:alias map="{badgeData: badge.0.data}"> <div class="herounit__badge-wrapper">
<f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}" <f:if condition="{settings.showSkipassBadge}">
class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6"> <f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive" class="herounit__badge herounit__badge--skipass">
<svg viewBox="0 0 200 200" <p class="uppercase text-4xl font-bold leading-7 mb-2">Ski-<br>Pass</p>
xmlns="http://www.w3.org/2000/svg" <p class="uppercase">inklusive</p>
preserveAspectRatio="xMinYMin meet" </f:link.typolink>
class="w-full h-full"> </f:if>
<circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/> <f:if condition="{badge}">
<circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/> <f:alias map="{badgeData: badge.0.data}">
</svg> <f:link.typolink parameter="{badgeData.link}"
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8"> title="{badgeData.title}"
<span class="block text-center text-white uppercase font-bold leading-none text-xl"> class="herounit__badge herounit__badge--custom">
{badgeData.title -> f:format.raw()} <svg viewBox="0 0 200 200"
</span> xmlns="http://www.w3.org/2000/svg"
<f:if condition="{badgeData.subtitle}"> preserveAspectRatio="xMinYMin meet"
<span class="block text-center text-white uppercase font-bold leading-none"> class="w-full h-full">
{badgeData.subtitle -> f:format.raw()} <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
</span> <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
</f:if> </svg>
</div> <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
</f:link.typolink> <span class="block text-center text-white uppercase font-bold leading-none text-xl">
</f:alias> {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> </f:if>
</div> </div>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Detail.html
+1
View File
@@ -26,6 +26,7 @@
<div class="col-span-3 lg:col-span-2" data-rte-content> <div class="col-span-3 lg:col-span-2" data-rte-content>
{concept.description -> f:format.html()} {concept.description -> f:format.html()}
<f:if condition="{teasers}"> <f:if condition="{teasers}">
<a class="anchor" id="teasers"></a>
<div class="flex flex-col space-y-4 md:space-y-8"> <div class="flex flex-col space-y-4 md:space-y-8">
<f:for each="{teasers}" as="teaser" iteration="iteration"> <f:for each="{teasers}" as="teaser" iteration="iteration">
<f:render partial="Product/Teaser" section="Teaser" arguments="{ <f:render partial="Product/Teaser" section="Teaser" arguments="{