WIP Exorcise legacy css
This commit is contained in:
Björn Fromme
Generated
+5
@@ -7567,6 +7567,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"tailwindcss-multi-theme": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss-multi-theme/-/tailwindcss-multi-theme-1.0.4.tgz",
|
||||
"integrity": "sha512-iwq4c039Urx6q2j9YDvGF5GmOs6vx5AMIQdscSIH9cPHmDhQE38eE7/4SeoZxB+6TY+xvZeLa/6UV9iRovoEuA=="
|
||||
},
|
||||
"tapable": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
"querystringify": "^2.2.0",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"sticky-js": "^1.3.0",
|
||||
"tailwindcss-multi-theme": "^1.0.4",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.2",
|
||||
"vue-scrollto": "^2.20.0",
|
||||
|
||||
@@ -6,7 +6,7 @@ page {
|
||||
}
|
||||
|
||||
bodyTagCObject = TEXT
|
||||
bodyTagCObject.stdWrap.wrap = <body class="|">
|
||||
bodyTagCObject.stdWrap.noTrimWrap = |<body class="antialiased text-gray-800 font-sans |">|
|
||||
bodyTagCObject.stdWrap.field = tx_eptheme_bodyclass
|
||||
bodyTagCObject.stdWrap.override = {$plugin.tx_eptheme.settings.defaultBodyclass}
|
||||
bodyTagCObject.stdWrap.override.if.isFalse.field = tx_eptheme_bodyclass
|
||||
@@ -117,6 +117,27 @@ page {
|
||||
negate = 1
|
||||
}
|
||||
}
|
||||
40 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
|
||||
40 {
|
||||
levels = 1
|
||||
as = topnav
|
||||
}
|
||||
50 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
|
||||
50 {
|
||||
special = directory
|
||||
special.value = {$plugin.tx_eptheme.settings.mainNavPid}
|
||||
levels = 3
|
||||
titleField = title
|
||||
as = mainnav
|
||||
}
|
||||
60 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
|
||||
60 {
|
||||
special = directory
|
||||
special.value = {$plugin.tx_eptheme.settings.mobileNavPid}
|
||||
levels = 3
|
||||
titleField = title
|
||||
as = mobilenav
|
||||
}
|
||||
}
|
||||
|
||||
settings < plugin.tx_eptheme.settings
|
||||
|
||||
@@ -10,6 +10,8 @@
|
||||
|
||||
plugin.tx_eptheme {
|
||||
settings {
|
||||
# cat=eptheme/200/10; type=string; label=Theme key
|
||||
themekey = ep
|
||||
# cat=eptheme/200/100; type=string; label=Top navigation PID
|
||||
topNavPid =
|
||||
# cat=eptheme/200/110; type=string; label=Main navigation PID
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
plugin.tx_eptheme {
|
||||
settings < lib.contentElement.settings
|
||||
settings {
|
||||
themekey = {$plugin.tx_eptheme.settings.themekey}
|
||||
footerNavPid = {$plugin.tx_eptheme.settings.footerNavPid}
|
||||
mainNavPid = {$plugin.tx_eptheme.settings.mainNavPid}
|
||||
mobileNavPid = {$plugin.tx_eptheme.settings.mobileNavPid}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-at" viewBox="0 0 640 480">
|
||||
<g fill-rule="evenodd">
|
||||
<path fill="#fff" d="M640 480H0V0h640z"/>
|
||||
<path fill="#ed2939" d="M640 480H0V320h640zm0-319.9H0V.1h640z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 240 B |
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-ch" viewBox="0 0 640 480">
|
||||
<g fill-rule="evenodd" stroke-width="1pt">
|
||||
<path fill="#d52b1e" d="M0 0h640v480H0z"/>
|
||||
<g fill="#fff">
|
||||
<path d="M170 195h300v90H170z"/>
|
||||
<path d="M275 90h90v300h-90z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 297 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-de" viewBox="0 0 640 480">
|
||||
<path fill="#ffce00" d="M0 320h640v160H0z"/>
|
||||
<path d="M0 0h640v160H0z"/>
|
||||
<path fill="#d00" d="M0 160h640v160H0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 213 B |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-fr" viewBox="0 0 640 480">
|
||||
<g fill-rule="evenodd" stroke-width="1pt">
|
||||
<path fill="#fff" d="M0 0h640v480H0z"/>
|
||||
<path fill="#00267f" d="M0 0h213.3v480H0z"/>
|
||||
<path fill="#f31830" d="M426.7 0H640v480H426.7z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 292 B |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gb" viewBox="0 0 640 480">
|
||||
<path fill="#012169" d="M0 0h640v480H0z"/>
|
||||
<path fill="#FFF" d="M75 0l244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z"/>
|
||||
<path fill="#C8102E" d="M424 281l216 159v40L369 281h55zm-184 20l6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z"/>
|
||||
<path fill="#FFF" d="M241 0v480h160V0H241zM0 160v160h640V160H0z"/>
|
||||
<path fill="#C8102E" d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 538 B |
@@ -46,6 +46,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
searchBox: false,
|
||||
mobileNav: false,
|
||||
modal: null,
|
||||
toggleMobileNav() {
|
||||
this.mobileNav = !this.mobileNav
|
||||
console.log(this.mobileNav)
|
||||
},
|
||||
toggleSearchBox() {
|
||||
this.searchBox = !this.searchBox
|
||||
}
|
||||
})
|
||||
Alpine.store('watchlist', storedWatchlist)
|
||||
Alpine.store('filterSettings', defaultFilterSettings)
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
@import "remix/base";
|
||||
@import "remix/badges";
|
||||
@import "remix/buttons";
|
||||
@import "remix/area-nav";
|
||||
//@import "remix/area-nav";
|
||||
@import "remix/pagehead";
|
||||
@import "remix/slider";
|
||||
@import "remix/header";
|
||||
@@ -59,7 +59,7 @@
|
||||
@import "modal";
|
||||
|
||||
//components
|
||||
@import "mainnavi";
|
||||
//@import "mainnavi";
|
||||
@import "footer";
|
||||
@import "searchbar";
|
||||
@import "searchbox";
|
||||
@@ -85,6 +85,14 @@
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.underlined {
|
||||
@apply relative mb-4;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
@apply absolute top-100 left-0 mt-2 mb-2 border-b-4 border-ep-primary-dark w-48;
|
||||
}
|
||||
}
|
||||
.-translate-xy-1\/2 {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@@ -5,9 +5,8 @@
|
||||
|
||||
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
|
||||
<f:render partial="FacebookPixelCode"/>
|
||||
<div id="app">
|
||||
<f:render partial="Topnav" arguments="{_all}"/>
|
||||
<f:render partial="Mainnav" section="Mainnav" arguments="{_all}"/>
|
||||
<div class="lg:mt-16 theme-{settings.themekey}">
|
||||
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
|
||||
<f:render partial="HeaderSlider" arguments="{_all}"/>
|
||||
<f:if condition="{data.tx_eptheme_hide_searchbar}">
|
||||
<f:else>
|
||||
@@ -18,5 +17,8 @@
|
||||
<f:render partial="Footer" arguments="{_all}"/>
|
||||
<f:render partial="ContactBar" arguments="{_all}"/>
|
||||
</div>
|
||||
<f:render partial="Topnav" arguments="{_all}"/>
|
||||
<f:render partial="Mobilenav" arguments="{_all}"/>
|
||||
<f:render partial="Config" arguments="{_all}" />
|
||||
<f:render partial="Icons" arguments="{_all}"/>
|
||||
</html>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="pagehead">
|
||||
<div class="relative lg:mt-24">
|
||||
<div class="splide slider slider--header" data-slider="header">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
|
||||
{slides -> v:iterator.first() -> v:variable.set(name: 'slide')}
|
||||
<f:if condition="{slide}">
|
||||
<div class="pagehead">
|
||||
<div class="relative lg:mt-64">
|
||||
<f:alias map="{image: slide.image.0}">
|
||||
<div class="pagehead__image">
|
||||
<picture class="w-full h-full">
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
<svg class="hidden">
|
||||
<!-- Symbols -->
|
||||
<symbol id="icon-menu" 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="M4 6h16M4 12h16M4 18h16"></path></symbol>
|
||||
<symbol id="icon-chevron-down" 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="M19 9l-7 7-7-7"></path></symbol>
|
||||
<symbol id="icon-chevron-up" 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="M5 15l7-7 7 7"></path></symbol>
|
||||
<symbol id="icon-home" 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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></symbol>
|
||||
<symbol id="icon-user" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></symbol>
|
||||
<symbol id="icon-search" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></symbol>
|
||||
<symbol id="icon-close" 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="M6 18L18 6M6 6l12 12"></path></symbol>
|
||||
<symbol id="icon-heart" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></symbol>
|
||||
<!-- Flags -->
|
||||
<symbol id="icon-flag-at" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd"><path fill="#fff" d="M640 480H0V0h640z"/><path fill="#ed2939" d="M640 480H0V320h640zm0-319.9H0V.1h640z"/></g></symbol>
|
||||
<symbol id="icon-flag-ch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#d52b1e" d="M0 0h640v480H0z"/><g fill="#fff"><path d="M170 195h300v90H170z"/><path d="M275 90h90v300h-90z"/></g></g></symbol>
|
||||
<symbol id="icon-flag-de" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><path fill="#ffce00" d="M0 320h640v160H0z"/><path d="M0 0h640v160H0z"/><path fill="#d00" d="M0 160h640v160H0z"/></symbol>
|
||||
<symbol id="icon-flag-fr" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#fff" d="M0 0h640v480H0z"/><path fill="#00267f" d="M0 0h213.3v480H0z"/><path fill="#f31830" d="M426.7 0H640v480H426.7z"/></g></symbol>
|
||||
<symbol id="icon-flag-gb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><path fill="#012169" d="M0 0h640v480H0z"/><path fill="#FFF" d="M75 0l244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z"/><path fill="#C8102E" d="M424 281l216 159v40L369 281h55zm-184 20l6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z"/><path fill="#FFF" d="M241 0v480h160V0H241zM0 160v160h640V160H0z"/><path fill="#C8102E" d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z"/></symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -2,121 +2,130 @@
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers" >
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
|
||||
|
||||
<f:section name="Mainnav">
|
||||
<div class="absolute top-0 left-0 w-full z-20 mt-12" x-data>
|
||||
<div class="relative bg-white flex items-end justify-between py-2 px-4 md:max-w-screen-xl md:mx-auto shadow-lg">
|
||||
<f:section name="Main">
|
||||
<div class="relative lg:absolute lg:left-0 lg:top-0 lg:mt-8 w-full z-50">
|
||||
<div class="lg:container px-4 py-4 shadow-lg bg-white">
|
||||
<div class="relative flex items-end justify-between">
|
||||
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}" title="">
|
||||
<img class="w-32 md:w-48 lg:w-56 h-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{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 md:block">
|
||||
<f:render section="FirstLevel" arguments="{navPid: settings.mainNavPid, mobile: 0}"/>
|
||||
<div class="hidden lg:block">
|
||||
<f:render section="FirstLevel" arguments="{_all}"/>
|
||||
</div>
|
||||
<div class="block md:hidden">
|
||||
<f:render section="FirstLevel" arguments="{navPid: settings.mobileNavPid, mobile: 1}"/>
|
||||
</div>
|
||||
<div class="flex md:hidden items-center space-x-4">
|
||||
<div class="flex lg:hidden items-center space-x-4" x-data>
|
||||
<f:if condition="{data.tx_eptheme_hide_searchbar}">
|
||||
<f:else>
|
||||
<button x-on:click.prevent="$store.show.searchBox = !$store.show.searchBox" class="block md:hidden focus:outline-none text-black">
|
||||
<svg class="w-10 h-10" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
||||
<button x-on:click.prevent="$store.show.toggleSearchBox()" class="focus:outline-none text-gray-800">
|
||||
<svg class="w-10 h-10 text-gray-800">
|
||||
<use href="#icon-search"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<button x-on:click.prevent="$store.show.mobileNav = !$store.show.mobileNav" class="block md:hidden focus:outline-none text-black">
|
||||
<svg class="w-10 h-10" 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="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
<button x-on:click.prevent="$store.show.toggleMobileNav()" class="focus:outline-none text-gray-800">
|
||||
<svg class="w-10 h-10 text-gray-800">
|
||||
<use href="#icon-menu"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
<f:section name="FirstLevel">
|
||||
<div class="flex items-center justify-end space-x-4"{f:if(condition: mobile, then: ' x-show="$store.show.mobileNav" x-cloak')}>
|
||||
<ul class="nav navbar-nav">
|
||||
<v:menu pageUid="{navPid}" entryLevel="1" useShortcutUid="true">
|
||||
<f:for each="{menu}" as="topitem" iteration="outerIteration">
|
||||
<li class="dropdown">
|
||||
<f:if condition="{topitem.hasSubPages}">
|
||||
<nav role="menu">
|
||||
<ul class="m-0 p-0 list-none flex items-center justify-end space-x-4">
|
||||
<f:for each="{mainnav}" as="topitem">
|
||||
<li class="group">
|
||||
<f:if condition="{topitem.children}">
|
||||
<f:then>
|
||||
<a href="{f:uri.typolink(parameter: topitem.data.uid)}"
|
||||
class="text-gray-800 uppercase lg:text-lg flex items-center"
|
||||
title="{topitem.title}">
|
||||
<span>{topitem.title}</span>
|
||||
<svg class="ml-1 w-4 h-4 transform group-hover:rotate-180">
|
||||
<use href="#icon-chevron-down"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<f:render section="SecondLevel" arguments="{topitem: topitem}"/>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<a href="{topitem.link}"{f:if(condition: '{topitem.doktype} == 3', then: ' target="_blank"')} title="{topitem.linktext}">{topitem.title}</a>
|
||||
<a href="{topitem.link}"{f:if(condition: '{topitem.doktype} == 3', then: ' target="_blank"')} title="{topitem.title}">
|
||||
{topitem.title}
|
||||
</a>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</li>
|
||||
</f:for>
|
||||
</v:menu>
|
||||
</ul>
|
||||
<f:render section="QandA" arguments="{_all}"/>
|
||||
</div>
|
||||
</nav>
|
||||
</f:section>
|
||||
|
||||
<f:section name="SecondLevel">
|
||||
<a href="{f:uri.typolink(parameter: topitem.uid)}" data-target="#"
|
||||
class="dropdown-toggle" role="button" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false"
|
||||
title="{topitem.linktext}">{topitem.title}<span class="glyphicon glyphicon-chevron-down"></span></a>
|
||||
<v:menu pageUid="{topitem.uid}" useShortcutUid="true">
|
||||
<div>
|
||||
<ul class="dropdown-menu">
|
||||
<f:for each="{menu}" as="subitem" iteration="iteration">
|
||||
<f:if condition="{iteration.cycle} == 5">
|
||||
</ul>
|
||||
<ul class="dropdown-menu">
|
||||
</f:if>
|
||||
<li class="col-md-{f:if(condition: '{menu -> f:count()} > 3', then: '3', else: '4')}">
|
||||
<ul>
|
||||
<li class="sectionhead">
|
||||
<div class="absolute top-100 left-0 inset-x-0 pt-6 hidden group-hover:block">
|
||||
<div class="bg-white grid grid-cols-3 lg:grid-cols-4 gap-8 py-4 px-4 shadow-lg">
|
||||
<f:for each="{topitem.children}" as="subitem">
|
||||
<ul class="m-0 p-0 list-none">
|
||||
<li>
|
||||
<f:if condition="{subitem.doktype} == 3">
|
||||
<f:then>
|
||||
<a href="{subitem.url}" target="_blank" title="{subitem.linktext}">
|
||||
{f:if(condition: '{subitem.tx_eptheme_context_country_code}', then: '{f:image(src: \'{ep:flagiconSource(countryCode: subitem.tx_eptheme_context_country_code)}\', alt: subitem.tx_eptheme_context_country_code)}')}<span class="headline headline--4 headline--nav">{subitem.title}</span>
|
||||
<a href="{subitem.link}" target="_blank" title="{subitem.title}">
|
||||
<f:if condition="{subitem.data.tx_eptheme_context_country_code}">
|
||||
<svg class="block w-8 h-6"><use href="#icon-flag-{subitem.data.tx_eptheme_context_country_code -> f:format.case(mode: 'lower')}"/></svg>
|
||||
</f:if>
|
||||
<span class="text-gray-800 uppercase lg:text-lg">
|
||||
{subitem.title}
|
||||
</span>
|
||||
</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<a href="{f:uri.typolink(parameter: subitem.uid)}">
|
||||
{f:if(condition: '{subitem.tx_eptheme_context_country_code}', then: '{f:image(src: \'{ep:flagiconSource(countryCode: subitem.tx_eptheme_context_country_code)}\', alt: subitem.tx_eptheme_context_country_code)}')}<span class="headline headline--4 headline--nav">{subitem.title}</span>
|
||||
<a href="{f:uri.typolink(parameter: subitem.data.uid)}"
|
||||
class="flex items-center space-x-2 underlined"
|
||||
title="{subitem.title}">
|
||||
<f:if condition="{subitem.data.tx_eptheme_context_country_code}">
|
||||
<svg class="block w-8 h-6"><use href="#icon-flag-{subitem.data.tx_eptheme_context_country_code -> f:format.case(mode: 'lower')}"/></svg>
|
||||
</f:if>
|
||||
<span class="text-gray-800 uppercase lg:text-lg">
|
||||
{subitem.title}
|
||||
</span>
|
||||
</a>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</li>
|
||||
<f:render section="ThirdLevel" arguments="{subitem: subitem}"/>
|
||||
</ul>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</v:menu>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
<f:section name="ThirdLevel">
|
||||
<v:menu pageUid="{subitem.uid}" useShortcutUid="true">
|
||||
<f:for each="{menu}" as="subsubitem">
|
||||
<f:for each="{subitem.children}" as="subsubitem">
|
||||
<f:if condition="{subsubitem.doktype} == 3">
|
||||
<f:then>
|
||||
<li><a href="{subsubitem.url}" target="_blank" title="{subsubitem.linktext}">{subsubitem.title}</a></li>
|
||||
<li>
|
||||
<a href="{subsubitem.link}"
|
||||
class="text-gray-800 text-lg"
|
||||
target="_blank"
|
||||
title="{subsubitem.title}">
|
||||
{subsubitem.title}
|
||||
</a>
|
||||
</li>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<li><a href="{f:uri.typolink(parameter: subsubitem.uid)}" title="{subsubitem.linktext}">{subsubitem.title}</a></li>
|
||||
<li>
|
||||
<a href="{f:uri.typolink(parameter: subsubitem.data.uid)}"
|
||||
class="text-gray-800 text-lg"
|
||||
title="{subsubitem.title}">
|
||||
{subsubitem.title}
|
||||
</a>
|
||||
</li>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:for>
|
||||
</v:menu>
|
||||
</f:section>
|
||||
|
||||
<f:section name="QandA">
|
||||
<div class="hidden-md hidden-lg">
|
||||
<div>Du hast Fragen?</div>
|
||||
<div>Wir können helfen!</div>
|
||||
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" class="btn btn-warning" rel="nofollow">Anrufen</a>
|
||||
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}" class="btn btn-warning" rel="nofollow" target="_blank">Whatsapp</a>
|
||||
<f:if condition="{settings.faqPageUid}">
|
||||
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}" class="btn btn-warning">FAQ</a>
|
||||
</f:if>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
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 z-100 overflow-y-scroll bg-cover bg-gray-700"
|
||||
x-data
|
||||
x-cloak
|
||||
x-show="$store.show.mobileNav"
|
||||
x-transition.opacity>
|
||||
<div class="relative bg-ep-primary">
|
||||
<div class="fixed top-0 left-0 inset-x-0 px-8 py-2 flex justify-end bg-ep-primary">
|
||||
<button class="focus:outline-none" x-on:click="$store.show.toggleMobileNav()">
|
||||
<svg class="w-10 h-10 text-white">
|
||||
<use href="#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<ul class="m-0 px-0 pb-4 pt-12">
|
||||
<f:for each="{topnav}" as="topitem">
|
||||
<li class="py-2 px-8 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 px-8 py-4 divide-y divide-overlay-white">
|
||||
<f:for each="{mobilenav}" as="subitem">
|
||||
<li class="py-2 pr-4" x-data="{ visible: false }">
|
||||
<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" x-on:click.prevent="visible = !visible">
|
||||
<svg class="h-6 w-6 transform text-white" x-bind:class="visible && 'rotate-180'">
|
||||
<use href="#icon-chevron-down"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="visible" x-transition>
|
||||
<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>
|
||||
<div class="px-8 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="btn btn--secondary block mb-1" rel="nofollow">Anrufen</a>
|
||||
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}" class="btn btn--secondary block mb-1" rel="nofollow" target="_blank">Whatsapp</a>
|
||||
<f:if condition="{settings.faqPageUid}">
|
||||
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}" class="btn btn--secondary block">FAQ</a>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
@@ -1,35 +1,27 @@
|
||||
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
|
||||
{namespace ep=EP\EpTheme\ViewHelpers}
|
||||
<div class="area-nav fixed top-0 left-0 z-50">
|
||||
<div class="area-nav__inner" x-data="{ open: false }">
|
||||
<f:spaceless>
|
||||
<f:if condition="{settings.hideAreaNavigation}">
|
||||
<f:if condition="{settings.hideAreaNavigation}">
|
||||
<f:else>
|
||||
<a class="area-nav__trigger area-nav__link" href="#" x-on:click.prevent="open = !open">
|
||||
Bereich wechseln <i class="area-nav__trigger-icon fa fa-lg fa-caret-down"></i>
|
||||
<div class="hidden lg:block w-full fixed top-0 inset-x-0 z-100 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">
|
||||
<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-6 h-6"><use href="#icon-home"/></svg>
|
||||
</f:link.typolink>
|
||||
<f:for each="{topnav}" as="menuitem">
|
||||
<a class="block flex flex-grow h-8 justify-center items-center uppercase leading-none text-white hover:text-white focus:text-white hover:bg-ep-secondary{f:if(condition: '{menuitem.active} or {menuitem.data.uid} == {settings.forceActiveTopnavUid}', then: ' bg-ep-secondary')}"
|
||||
href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}
|
||||
title="{menuitem.title}">
|
||||
{menuitem.title -> ep:topnavItem()}
|
||||
</a>
|
||||
<nav role="navigation">
|
||||
<ul class="area-nav__list" x-bind:class="open && 'open'" x-show="open" x-transition x-cloak>
|
||||
<v:menu levels="1" useShortcutUid="1" pageUid="{settings.topNavPid}">
|
||||
<f:for each="{menu}" as="menuitem">
|
||||
<li class="area-nav__list-item">
|
||||
<a class="area-nav__link{f:if(condition: menuitem.active, then: ' active')}{f:if(condition: '{menuitem.uid} == {settings.forceActiveTopnavUid}', then: ' active')}"
|
||||
href="{menuitem.link}"{f:if(condition: '{menuitem.doktype} == 3 || {menuitem.tx_eptheme_new_tab}', then: ' target="_blank"')}
|
||||
title="{menuitem.linktext}">{menuitem.title -> ep:topnavItem()}</a>
|
||||
</li>
|
||||
</f:for>
|
||||
</v:menu>
|
||||
<f:if condition="{settings.myEpPageUid}">
|
||||
<li class="area-nav__list-item area-nav__list-item--icon">
|
||||
<f:link.typolink parameter="{settings.myEpPageUid}" class="area-nav__link" title="My E&P">
|
||||
<i class="fa fa-user"></i><span class="hidden-md hidden-lg"> My E&P</span>
|
||||
<f:link.typolink parameter="{settings.myEpPageUid}" class="flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary" title="My E&P">
|
||||
<svg class="w-6 h-6"><use href="#icon-user"/></svg>
|
||||
</f:link.typolink>
|
||||
</li>
|
||||
</f:if>
|
||||
</ul>
|
||||
</nav>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:spaceless>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
+30
-1
@@ -1,3 +1,4 @@
|
||||
const plugin = require('tailwindcss/plugin')
|
||||
const tinycolor = require('tinycolor2')
|
||||
|
||||
module.exports = {
|
||||
@@ -65,6 +66,7 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
}),
|
||||
themeVariants: [ 'ep', 'sbw', 'snz', 'uch' ],
|
||||
extend: {
|
||||
colors: {
|
||||
'overlay': {
|
||||
@@ -75,6 +77,7 @@ module.exports = {
|
||||
'primary': '#009fe3',
|
||||
'secondary': '#f0bc44',
|
||||
'primary-light': '#009fff',
|
||||
'primary-dark': '#006db6',
|
||||
'primary-10': tinycolor('#009fe3').setAlpha(0.1).toRgbString(),
|
||||
'primary-80': tinycolor('#009fe3').setAlpha(0.8).toRgbString(),
|
||||
},
|
||||
@@ -109,8 +112,34 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {},
|
||||
variants: {
|
||||
display: ({ after }) => after(['group-hover']),
|
||||
opacity: ({ after }) => after(['group-hover']),
|
||||
rotate: ({ after }) => after(['group-hover']),
|
||||
},
|
||||
plugins: [
|
||||
require('tailwindcss-multi-theme'),
|
||||
require('@tailwindcss/custom-forms'),
|
||||
plugin(function ({addVariant, e}) {
|
||||
addVariant('subpage', ({modifySelectors, separator}) => {
|
||||
modifySelectors(({className}) => {
|
||||
return `.subpage .${e(`subpage${separator}${className}`)}`
|
||||
})
|
||||
})
|
||||
}),
|
||||
plugin(function ({addVariant, e}) {
|
||||
addVariant('first-type', ({modifySelectors, separator}) => {
|
||||
modifySelectors(({className}) => {
|
||||
return `.${e(`first-type${separator}${className}`)}:first-of-type`
|
||||
})
|
||||
})
|
||||
}),
|
||||
plugin(function ({addVariant, e}) {
|
||||
addVariant('last-type', ({modifySelectors, separator}) => {
|
||||
modifySelectors(({className}) => {
|
||||
return `.${e(`last-type${separator}${className}`)}:last-of-type`
|
||||
})
|
||||
})
|
||||
}),
|
||||
],
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user