Adjust main navigation layout on frontpage
This commit is contained in:
Björn Fromme
@@ -33,7 +33,6 @@
|
||||
}
|
||||
@screen lg {
|
||||
width: auto;
|
||||
top: 16px;
|
||||
right: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
|
||||
<f:render partial="FacebookPixelCode"/>
|
||||
<div class="lg:mt-16">
|
||||
<div class="lg:mt-8">
|
||||
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
|
||||
<f:render partial="HeaderSlider" arguments="{_all}"/>
|
||||
<f:if condition="{data.tx_eptheme_hide_searchbar}">
|
||||
|
||||
@@ -2,85 +2,83 @@
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="lg:-mt-8">
|
||||
<div class="splide"
|
||||
data-controller="slider"
|
||||
data-slider-preset-value="header">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<f:for each="{slides}" as="slide" iteration="iteration">
|
||||
<li class="splide__slide">
|
||||
<div class="herounit">
|
||||
<f:alias map="{image: slide.image.0}">
|
||||
<f:if condition="{image}">
|
||||
<div class="herounit__image">
|
||||
<picture class="w-full h-full">
|
||||
<source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeaderHome')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeaderHome')}" media="(max-width: 767px)">
|
||||
<f:image image="{image}" height="320" class="w-full h-full object-cover" alt="{image.alternative}"/>
|
||||
</picture>
|
||||
</div>
|
||||
</f:if>
|
||||
</f:alias>
|
||||
<div class="absolute left-0 bottom-0 inset-x-0 px-4 py-8 w-full md:bottom-1/2 md:transform md:translate-y-1/2">
|
||||
<div class="lg:container px-0">
|
||||
<div class="p-4 bg-ep-primary-80 sbw:bg-sbw-primary-80 mb-4 md:p-8 md:max-w-2xl">
|
||||
<span class="block text-2xl md:text-4xl lg:text-5xl max-w-sm md:max-w-none font-black text-white uppercase mb-8">
|
||||
{slide.headline}
|
||||
</span>
|
||||
<span class="hidden md:block md:text-lg font-light text-white mb-8">
|
||||
{slide.subline}
|
||||
</span>
|
||||
<f:if condition="{slide.button}">
|
||||
<f:link.typolink parameter="{slide.page_uid}"
|
||||
class="hidden md:inline-block button">
|
||||
{slide.button}
|
||||
</f:link.typolink>
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="splide"
|
||||
data-controller="slider"
|
||||
data-slider-preset-value="header">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<f:for each="{slides}" as="slide" iteration="iteration">
|
||||
<li class="splide__slide">
|
||||
<div class="herounit">
|
||||
<f:alias map="{image: slide.image.0}">
|
||||
<f:if condition="{image}">
|
||||
<div class="herounit__image">
|
||||
<picture class="w-full h-full">
|
||||
<source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeaderHome')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeaderHome')}" media="(max-width: 767px)">
|
||||
<f:image image="{image}" height="320" class="w-full h-full object-cover" alt="{image.alternative}"/>
|
||||
</picture>
|
||||
</div>
|
||||
</f:if>
|
||||
</f:alias>
|
||||
<div class="absolute left-0 bottom-0 inset-x-0 px-4 py-8 w-full md:bottom-1/2 md:transform md:translate-y-1/2">
|
||||
<div class="lg:container px-0">
|
||||
<div class="p-4 bg-ep-primary-80 sbw:bg-sbw-primary-80 mb-4 md:p-8 md:max-w-2xl">
|
||||
<span class="block text-2xl md:text-4xl lg:text-5xl max-w-sm md:max-w-none font-black text-white uppercase mb-8">
|
||||
{slide.headline}
|
||||
</span>
|
||||
<span class="hidden md:block md:text-lg font-light text-white mb-8">
|
||||
{slide.subline}
|
||||
</span>
|
||||
<f:if condition="{slide.button}">
|
||||
<f:link.typolink parameter="{slide.page_uid}" class="button w-full justify-start md:hidden">
|
||||
<f:link.typolink parameter="{slide.page_uid}"
|
||||
class="hidden md:inline-block button">
|
||||
{slide.button}
|
||||
</f:link.typolink>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
<f:if condition="{slide.skipass}">
|
||||
<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="herounit__badge herounit__badge--skipass" />
|
||||
</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">
|
||||
<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:if condition="{slide.button}">
|
||||
<f:link.typolink parameter="{slide.page_uid}" class="button w-full justify-start md:hidden">
|
||||
{slide.button}
|
||||
</f:link.typolink>
|
||||
</f:alias>
|
||||
</f:if>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
<f:if condition="{slide.skipass}">
|
||||
<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="herounit__badge herounit__badge--skipass" />
|
||||
</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">
|
||||
<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>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -5,17 +5,17 @@
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
|
||||
|
||||
<f:section name="Main">
|
||||
<div class="relative z-40 lg:container shadow-lg bg-white">
|
||||
<div class="flex items-center lg:items-end justify-between px-4 pt-4">
|
||||
<div class="relative z-40 lg:container bg-white">
|
||||
<div class="flex items-center lg:items-end justify-between px-4 py-2 lg:pt-4 lg:pb-0">
|
||||
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
|
||||
class="block pb-4"
|
||||
class="block lg:pb-4"
|
||||
title="{settings.defaultTitle}">
|
||||
<img class="block h-10 lg:h-12 w-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
|
||||
</a>
|
||||
<div class="hidden lg:block">
|
||||
<f:render section="FirstLevel" arguments="{_all}"/>
|
||||
</div>
|
||||
<div class="flex lg:hidden items-center space-x-4 pb-4">
|
||||
<div class="flex lg:hidden items-center space-x-4">
|
||||
<f:if condition="{data.tx_eptheme_hide_searchbar}">
|
||||
<f:else>
|
||||
<button class="focus:outline-none text-gray-800"
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<f:if condition="{settings.hideAreaNavigation}">
|
||||
<f:else>
|
||||
<div class="hidden lg:block w-full fixed top-0 inset-x-0 z-50 bg-cover bg-center" style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/polygon.jpg')})">
|
||||
<div class="container px-0">
|
||||
<div class="container">
|
||||
<nav role="navigation" class="flex justify-between m-0 p-0 w-full divide-x divide-gray-300 border-r border-l">
|
||||
<f:link.typolink parameter="9" class="flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary" title="E&P">
|
||||
<svg class="w-5 h-5"><use href="#icon-home"/></svg>
|
||||
|
||||
Reference in New Issue
Block a user