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

Adjust mobile navigation layout

Browse Source
This commit is contained in:
Björn Fromme
2021-09-15 13:59:50 +02:00
parent 1d67438a71
commit 08bcbdcc86
11 changed files with 120 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript
-1
View File
@@ -158,7 +158,6 @@ page {
as = mobilenav as = mobilenav
} }
} }
settings < plugin.tx_eptheme.settings settings < plugin.tx_eptheme.settings
} }
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Detail.html
+1 -1
View File
@@ -13,7 +13,7 @@
<f:render partial="Footer" arguments="{_all}"/> <f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/> <f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" 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="Config" arguments="{_all}" />
<f:render partial="Icons" arguments="{_all}"/> <f:render partial="Icons" arguments="{_all}"/>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html
+1 -1
View File
@@ -15,7 +15,7 @@
<f:render partial="Footer" arguments="{_all}"/> <f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/> <f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" 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:cObject typoscriptObjectPath="lib.searchBox"/>
<f:render partial="Config" arguments="{_all}" /> <f:render partial="Config" arguments="{_all}" />
<f:render partial="Icons" arguments="{_all}"/> <f:render partial="Icons" arguments="{_all}"/>
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html
+1 -1
View File
@@ -11,7 +11,7 @@
<f:render partial="Footer" arguments="{_all}"/> <f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/> <f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" 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="Config" arguments="{_all}" />
<f:render partial="Icons" arguments="{_all}"/> <f:render partial="Icons" arguments="{_all}"/>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html
+1 -1
View File
@@ -9,7 +9,7 @@
<f:render partial="Footer" arguments="{_all}"/> <f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/> <f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" 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="Config" arguments="{_all}" />
<f:render partial="Icons" arguments="{_all}"/> <f:render partial="Icons" arguments="{_all}"/>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html
+1 -1
View File
@@ -17,7 +17,7 @@
<f:render partial="Footer" arguments="{_all}"/> <f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/> <f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" 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="Config" arguments="{_all}" />
<f:render partial="Icons" arguments="{_all}"/> <f:render partial="Icons" arguments="{_all}"/>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html
+1 -1
View File
@@ -25,7 +25,7 @@
<f:render partial="Footer" arguments="{_all}"/> <f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/> <f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" 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="Config" arguments="{_all}" />
<f:render partial="Icons" arguments="{_all}"/> <f:render partial="Icons" arguments="{_all}"/>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html
+1 -1
View File
@@ -21,7 +21,7 @@
<f:render partial="Footer" arguments="{_all}"/> <f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/> <f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" 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="Config" arguments="{_all}" />
<f:render partial="Icons" arguments="{_all}"/> <f:render partial="Icons" arguments="{_all}"/>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html
+1 -1
View File
@@ -25,7 +25,7 @@
<f:render partial="Footer" arguments="{_all}"/> <f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/> <f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" 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="Config" arguments="{_all}" />
<f:render partial="Icons" arguments="{_all}"/> <f:render partial="Icons" arguments="{_all}"/>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html
+1 -1
View File
@@ -21,7 +21,7 @@
<f:render partial="Footer" arguments="{_all}"/> <f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/> <f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" 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="Config" arguments="{_all}" />
<f:render partial="Icons" arguments="{_all}"/> <f:render partial="Icons" arguments="{_all}"/>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+111 -101
View File
@@ -3,112 +3,122 @@
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers" xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/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" <f:section name="Main">
data-controller="overlay-toggle" <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-overlay-toggle-id-value="mobilenav" data-controller="overlay-toggle"
data-overlay-toggle-target="overlay" data-overlay-toggle-id-value="mobilenav"
data-action="overlay-toggle:toggle@window->overlay-toggle#toggle"> data-overlay-toggle-target="overlay"
<div class="fixed top-0 left-0 z-100 inset-x-0 px-4 py-2 flex justify-between bg-white shadow-md"> data-action="overlay-toggle:toggle@window->overlay-toggle#toggle">
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}" <div class="fixed top-0 left-0 z-100 inset-x-0 px-4 py-2 flex justify-between bg-white shadow-md">
class="block lg:pb-4" <a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
title="{settings.defaultTitle}"> class="block lg:pb-4"
<img class="block h-10 lg:h-12 w-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}"> title="{settings.defaultTitle}">
</a> <img class="block h-10 lg:h-12 w-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
<div class="flex lg:hidden items-center space-x-4"> </a>
<f:if condition="{data.tx_eptheme_hide_searchbar}"> <div class="flex lg:hidden items-center space-x-4">
<f:else> <f:if condition="{data.tx_eptheme_hide_searchbar}">
<button class="focus:outline-none text-gray-800" <f:else>
data-controller="overlay-toggle" <button class="focus:outline-none text-gray-800"
data-overlay-toggle-id-value="search" data-controller="overlay-toggle"
data-action="overlay-toggle#invokeToggle"> data-overlay-toggle-id-value="search"
<svg class="w-8 h-8 text-gray-800"> data-action="overlay-toggle#invokeToggle">
<use href="#icon-search"></use> <svg class="w-8 h-8 text-gray-800">
</svg> <use href="#icon-search"></use>
</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>
</svg> </svg>
</button> </button>
</div> </f:else>
<div class="transform" </f:if>
data-collapse-target="container"> <button class="focus:outline-none" data-action="overlay-toggle#invokeToggle">
<f:for each="{subitem.children}" as="subsubitem"> <svg class="w-8 h-8">
<a href="{subsubitem.link}"{f:if(condition: '{subsubitem.data.doktype} == 3', then: ' _target="blank"')} <use href="#icon-close"></use>
class="block text-lg leading-loose text-white hover:text-white focus:text-white" </svg>
title="{subsubitem.title}"> </button>
{subsubitem.title} </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> </a>
</f:for> <f:if condition="{topitem.active}">
</div> <f:render section="Subnav" arguments="{_all}"/>
</li> </f:if>
</f:for> </li>
</ul> </f:for>
<div class="px-4 py-4"> </ul>
<div class="border-t-4 border-ep-primary mb-4"></div> </div>
<p class="text-2xl text-white uppercase font-bold mb-1"> <f:if condition="{data.uid} == {settings.defaultHomeUid}">
Du hast Fragen? <f:render section="Subnav" arguments="{_all}"/>
</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> </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> </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> </html>