Improve mobilenav layout
This commit is contained in:
Björn Fromme
@@ -22,6 +22,7 @@
|
||||
<symbol id="icon-phone" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></symbol>
|
||||
<symbol id="icon-email" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></symbol>
|
||||
<symbol id="icon-tag" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></symbol>
|
||||
<symbol id="icon-faq" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
|
||||
<symbol id="icon-bed" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></symbol>
|
||||
<symbol id="icon-bus" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"/></symbol>
|
||||
<symbol id="icon-location-marker" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></symbol>
|
||||
|
||||
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
@@ -37,7 +37,7 @@
|
||||
</div>
|
||||
<div class="h-full w-full overflow-y-scroll">
|
||||
<div class="relative bg-ep-primary">
|
||||
<ul>
|
||||
<ul class="divide-y divide-ep-primary-dark">
|
||||
<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')}"
|
||||
@@ -55,33 +55,50 @@
|
||||
<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">
|
||||
<div class="px-4 py-4 mt-4">
|
||||
<p class="text-lg text-white uppercase font-bold mb-1">
|
||||
Du hast Fragen?
|
||||
</p>
|
||||
<p class="text-xl text-white uppercase mb-4">
|
||||
<p class="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
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
|
||||
class="button button--primary flex items-center space-x-2"
|
||||
title="Anrufen"
|
||||
rel="nofollow">
|
||||
<svg class="w-6 h-6 text-white">
|
||||
<use href="#icon-phone"></use>
|
||||
</svg>
|
||||
<span class="hidden sm:block">
|
||||
Anrufen
|
||||
</span>
|
||||
</a>
|
||||
</f:if>
|
||||
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}"
|
||||
class="button button--primary flex items-center space-x-2"
|
||||
title="WhatsApp"
|
||||
rel="nofollow"
|
||||
target="_blank">
|
||||
<svg class="w-6 h-6 text-white">
|
||||
<use href="#icon-whatsapp"></use>
|
||||
</svg>
|
||||
<span class="hidden sm:block">
|
||||
Whatsapp
|
||||
</span>
|
||||
</a>
|
||||
<f:if condition="{settings.faqPageUid}">
|
||||
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}"
|
||||
class="button button--primary flex items-center space-x-2"
|
||||
title="FAQ">
|
||||
<svg class="w-6 h-6 text-white">
|
||||
<use href="#icon-faq"></use>
|
||||
</svg>
|
||||
<span class="hidden sm:block">
|
||||
FAQ
|
||||
</span>
|
||||
</a>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,13 +123,16 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="transform"
|
||||
<div class="transform pt-2"
|
||||
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"
|
||||
class="flex items-center space-x-2 text-lg leading-loose text-white hover:text-white focus:text-white"
|
||||
title="{subsubitem.title}">
|
||||
{subsubitem.title}
|
||||
<svg class="w-4 h-4 text-white">
|
||||
<use href="#icon-chevron-right"></use>
|
||||
</svg>
|
||||
<span>{subsubitem.title}</span>
|
||||
</a>
|
||||
</f:for>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user