Adjust mobile navigation layout
This commit is contained in:
Björn Fromme
@@ -158,7 +158,6 @@ page {
|
||||
as = mobilenav
|
||||
}
|
||||
}
|
||||
|
||||
settings < plugin.tx_eptheme.settings
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<f:render partial="Footer" arguments="{_all}"/>
|
||||
<f:render partial="ContactBar" arguments="{_all}"/>
|
||||
<f:render partial="Topnav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
|
||||
<f:render partial="Config" arguments="{_all}" />
|
||||
<f:render partial="Icons" arguments="{_all}"/>
|
||||
</html>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<f:render partial="Footer" arguments="{_all}"/>
|
||||
<f:render partial="ContactBar" arguments="{_all}"/>
|
||||
<f:render partial="Topnav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
|
||||
<f:cObject typoscriptObjectPath="lib.searchBox"/>
|
||||
<f:render partial="Config" arguments="{_all}" />
|
||||
<f:render partial="Icons" arguments="{_all}"/>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<f:render partial="Footer" arguments="{_all}"/>
|
||||
<f:render partial="ContactBar" arguments="{_all}"/>
|
||||
<f:render partial="Topnav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
|
||||
<f:render partial="Config" arguments="{_all}" />
|
||||
<f:render partial="Icons" arguments="{_all}"/>
|
||||
</html>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<f:render partial="Footer" arguments="{_all}"/>
|
||||
<f:render partial="ContactBar" arguments="{_all}"/>
|
||||
<f:render partial="Topnav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
|
||||
<f:render partial="Config" arguments="{_all}" />
|
||||
<f:render partial="Icons" arguments="{_all}"/>
|
||||
</html>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<f:render partial="Footer" arguments="{_all}"/>
|
||||
<f:render partial="ContactBar" arguments="{_all}"/>
|
||||
<f:render partial="Topnav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
|
||||
<f:render partial="Config" arguments="{_all}" />
|
||||
<f:render partial="Icons" arguments="{_all}"/>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -25,7 +25,7 @@
|
||||
<f:render partial="Footer" arguments="{_all}"/>
|
||||
<f:render partial="ContactBar" arguments="{_all}"/>
|
||||
<f:render partial="Topnav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
|
||||
<f:render partial="Config" arguments="{_all}" />
|
||||
<f:render partial="Icons" arguments="{_all}"/>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -21,7 +21,7 @@
|
||||
<f:render partial="Footer" arguments="{_all}"/>
|
||||
<f:render partial="ContactBar" arguments="{_all}"/>
|
||||
<f:render partial="Topnav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
|
||||
<f:render partial="Config" arguments="{_all}" />
|
||||
<f:render partial="Icons" arguments="{_all}"/>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -25,7 +25,7 @@
|
||||
<f:render partial="Footer" arguments="{_all}"/>
|
||||
<f:render partial="ContactBar" arguments="{_all}"/>
|
||||
<f:render partial="Topnav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
|
||||
<f:render partial="Config" arguments="{_all}" />
|
||||
<f:render partial="Icons" arguments="{_all}"/>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -21,7 +21,7 @@
|
||||
<f:render partial="Footer" arguments="{_all}"/>
|
||||
<f:render partial="ContactBar" arguments="{_all}"/>
|
||||
<f:render partial="Topnav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
|
||||
<f:render partial="Config" arguments="{_all}" />
|
||||
<f:render partial="Icons" arguments="{_all}"/>
|
||||
</html>
|
||||
|
||||
@@ -3,112 +3,122 @@
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-gray-700 transform hidden"
|
||||
data-controller="overlay-toggle"
|
||||
data-overlay-toggle-id-value="mobilenav"
|
||||
data-overlay-toggle-target="overlay"
|
||||
data-action="overlay-toggle:toggle@window->overlay-toggle#toggle">
|
||||
<div class="fixed top-0 left-0 z-100 inset-x-0 px-4 py-2 flex justify-between bg-white shadow-md">
|
||||
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
|
||||
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="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"
|
||||
data-controller="overlay-toggle"
|
||||
data-overlay-toggle-id-value="search"
|
||||
data-action="overlay-toggle#invokeToggle">
|
||||
<svg class="w-8 h-8 text-gray-800">
|
||||
<use href="#icon-search"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<button class="focus:outline-none" data-action="overlay-toggle#invokeToggle">
|
||||
<svg class="w-8 h-8">
|
||||
<use href="#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full w-full overflow-y-scroll">
|
||||
<div class="relative bg-ep-primary">
|
||||
<ul class="m-0 px-0 py-4">
|
||||
<f:for each="{topnav}" as="topitem">
|
||||
<li class="py-2 px-4 hover:bg-ep-primary-light{f:if(condition: topitem.active, then: ' bg-ep-primary-light')}">
|
||||
<a class="block text-xl text-white hover:text-white hover:text-white focus:text-white uppercase font-bold"
|
||||
href="{topitem.link}"{f:if(condition: '{topitem.data.doktype} == 3', then: ' target="_blank"')}
|
||||
title="{topitem.title}">
|
||||
{topitem.title}
|
||||
</a>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="m-0 p-4 divide-y divide-ep-primary-50">
|
||||
<f:for each="{mobilenav}" as="subitem">
|
||||
<li class="py-2 pr-4"
|
||||
data-controller="collapse"
|
||||
data-collapse-collapsed-value="true">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="{subitemlink}"
|
||||
class="uppercase text-xl text-white hover:text-white focus:text-white"
|
||||
title="{subitem.title}">
|
||||
{subitem.title}
|
||||
</a>
|
||||
<button class="focus:outline-none"
|
||||
data-action="collapse#toggle">
|
||||
<svg class="h-6 w-6 transform text-white" data-collapse-target="icon">
|
||||
<use href="#icon-chevron-down"></use>
|
||||
<f:section name="Main">
|
||||
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-gray-700 transform hidden"
|
||||
data-controller="overlay-toggle"
|
||||
data-overlay-toggle-id-value="mobilenav"
|
||||
data-overlay-toggle-target="overlay"
|
||||
data-action="overlay-toggle:toggle@window->overlay-toggle#toggle">
|
||||
<div class="fixed top-0 left-0 z-100 inset-x-0 px-4 py-2 flex justify-between bg-white shadow-md">
|
||||
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
|
||||
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="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"
|
||||
data-controller="overlay-toggle"
|
||||
data-overlay-toggle-id-value="search"
|
||||
data-action="overlay-toggle#invokeToggle">
|
||||
<svg class="w-8 h-8 text-gray-800">
|
||||
<use href="#icon-search"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="transform"
|
||||
data-collapse-target="container">
|
||||
<f:for each="{subitem.children}" as="subsubitem">
|
||||
<a href="{subsubitem.link}"{f:if(condition: '{subsubitem.data.doktype} == 3', then: ' _target="blank"')}
|
||||
class="block text-lg leading-loose text-white hover:text-white focus:text-white"
|
||||
title="{subsubitem.title}">
|
||||
{subsubitem.title}
|
||||
</f:else>
|
||||
</f:if>
|
||||
<button class="focus:outline-none" data-action="overlay-toggle#invokeToggle">
|
||||
<svg class="w-8 h-8">
|
||||
<use href="#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full w-full overflow-y-scroll">
|
||||
<div class="relative bg-ep-primary">
|
||||
<ul>
|
||||
<f:for each="{topnav}" as="topitem">
|
||||
<li>
|
||||
<a class="block text-xl uppercase font-bold text-white hover:text-white focus:text-white py-2 px-4 hover:bg-ep-primary-light{f:if(condition: topitem.active, then: ' bg-ep-primary-light')}"
|
||||
href="{topitem.link}"{f:if(condition: '{topitem.data.doktype} == 3', then: ' target="_blank"')}
|
||||
title="{topitem.title}">
|
||||
{topitem.title}
|
||||
</a>
|
||||
</f:for>
|
||||
</div>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
<div class="px-4 py-4">
|
||||
<div class="border-t-4 border-ep-primary mb-4"></div>
|
||||
<p class="text-2xl text-white uppercase font-bold mb-1">
|
||||
Du hast Fragen?
|
||||
</p>
|
||||
<p class="text-xl text-white uppercase mb-4">
|
||||
Wir können helfen!
|
||||
</p>
|
||||
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
|
||||
class="button button--primary block mb-1"
|
||||
title="Anrufen"
|
||||
rel="nofollow">
|
||||
Anrufen
|
||||
</a>
|
||||
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}"
|
||||
class="button button--primary block mb-1"
|
||||
title="WhatsApp"
|
||||
rel="nofollow"
|
||||
target="_blank">
|
||||
Whatsapp
|
||||
</a>
|
||||
<f:if condition="{settings.faqPageUid}">
|
||||
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}"
|
||||
class="button button--primary block"
|
||||
title="FAQ">
|
||||
FAQ
|
||||
</a>
|
||||
<f:if condition="{topitem.active}">
|
||||
<f:render section="Subnav" arguments="{_all}"/>
|
||||
</f:if>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
<f:if condition="{data.uid} == {settings.defaultHomeUid}">
|
||||
<f:render section="Subnav" arguments="{_all}"/>
|
||||
</f:if>
|
||||
<div class="px-4 py-4">
|
||||
<p class="text-2xl text-white uppercase font-bold mb-1">
|
||||
Du hast Fragen?
|
||||
</p>
|
||||
<p class="text-xl text-white uppercase mb-4">
|
||||
Wir können helfen!
|
||||
</p>
|
||||
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
|
||||
class="button button--primary block mb-1"
|
||||
title="Anrufen"
|
||||
rel="nofollow">
|
||||
Anrufen
|
||||
</a>
|
||||
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}"
|
||||
class="button button--primary block mb-1"
|
||||
title="WhatsApp"
|
||||
rel="nofollow"
|
||||
target="_blank">
|
||||
Whatsapp
|
||||
</a>
|
||||
<f:if condition="{settings.faqPageUid}">
|
||||
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}"
|
||||
class="button button--primary block"
|
||||
title="FAQ">
|
||||
FAQ
|
||||
</a>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
<f:section name="Subnav">
|
||||
<ul class="m-0 px-4 divide-y divide-ep-primary-50 bg-gray-700">
|
||||
<f:for each="{mobilenav}" as="subitem">
|
||||
<li class="py-2"
|
||||
data-controller="collapse"
|
||||
data-collapse-collapsed-value="true">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="{subitemlink}"
|
||||
class="uppercase text-xl text-white hover:text-white focus:text-white"
|
||||
title="{subitem.title}">
|
||||
{subitem.title}
|
||||
</a>
|
||||
<button class="focus:outline-none"
|
||||
data-action="collapse#toggle">
|
||||
<svg class="h-6 w-6 transform text-white" data-collapse-target="icon">
|
||||
<use href="#icon-chevron-down"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="transform"
|
||||
data-collapse-target="container">
|
||||
<f:for each="{subitem.children}" as="subsubitem">
|
||||
<a href="{subsubitem.link}"{f:if(condition: '{subsubitem.data.doktype} == 3', then: ' _target="blank"')}
|
||||
class="block text-lg leading-loose text-white hover:text-white focus:text-white"
|
||||
title="{subsubitem.title}">
|
||||
{subsubitem.title}
|
||||
</a>
|
||||
</f:for>
|
||||
</div>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user