From 319ea22293464ae8b7828070089de79d24529c45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 1 Sep 2021 15:43:56 +0200
Subject: [PATCH] Adjust main navigation layout on frontpage

---
 .../Assets/scss/components/_herounit.scss     |   1 -
 .../Private/Layouts/Page/Frontpage.html       |   2 +-
 .../Private/Partials/HeaderSlider.html        | 142 +++++++++---------
 .../Resources/Private/Partials/Mainnav.html   |   8 +-
 .../Resources/Private/Partials/Topnav.html    |   2 +-
 5 files changed, 76 insertions(+), 79 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss
index 8aec6fad..8398e429 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss
@@ -33,7 +33,6 @@
         }
         @screen lg {
             width: auto;
-            top: 16px;
             right: 90px;
         }
     }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html
index a280a432..49d60be8 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html
@@ -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}">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
index 294ef084..a09e0f86 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
@@ -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>
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
index cc58dab2..0d521ea2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
@@ -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"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
index 271f3792..0430b771 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
@@ -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&amp;P">
                             <svg class="w-5 h-5"><use href="#icon-home"/></svg>