From a66dbaf043b847acd8b66234f34c2a78eaa67074 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= Date: Thu, 29 Jul 2021 17:34:17 +0200 Subject: [PATCH] WIP Exorcise legacy css --- package-lock.json | 5 + package.json | 1 + .../TypoScript/Page/Main.typoscript | 23 +- .../TypoScript/constants.typoscript | 2 + .../Configuration/TypoScript/setup.typoscript | 1 + .../Private/Assets/images/flags/at.svg | 6 + .../Private/Assets/images/flags/ch.svg | 9 + .../Private/Assets/images/flags/de.svg | 5 + .../Private/Assets/images/flags/fr.svg | 7 + .../Private/Assets/images/flags/gb.svg | 7 + .../Resources/Private/Assets/js/_app.js | 7 + .../Resources/Private/Assets/scss/main.scss | 12 +- .../Private/Layouts/Page/Frontpage.html | 8 +- .../Private/Partials/HeaderSlider.html | 2 +- .../Private/Partials/HeaderSliderSmall.html | 2 +- .../Resources/Private/Partials/Icons.html | 17 ++ .../Resources/Private/Partials/Mainnav.html | 211 +++++++++--------- .../Resources/Private/Partials/Mobilenav.html | 70 ++++++ .../Resources/Private/Partials/Topnav.html | 58 +++-- tailwind.config.js | 31 ++- 20 files changed, 341 insertions(+), 143 deletions(-) create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/at.svg create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/ch.svg create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/de.svg create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/fr.svg create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/gb.svg create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html diff --git a/package-lock.json b/package-lock.json index b7561867..ea58ced8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index c09b58bf..e695f358 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript index 670de4f8..b823a7d6 100644 --- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript +++ b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript @@ -6,7 +6,7 @@ page { } bodyTagCObject = TEXT - bodyTagCObject.stdWrap.wrap = + bodyTagCObject.stdWrap.noTrimWrap = || 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 diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript index 0471090f..5283ec0b 100644 --- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript +++ b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript @@ -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 diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript index 1eb3eb8c..f9dfd682 100644 --- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript +++ b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript @@ -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} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/at.svg b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/at.svg new file mode 100644 index 00000000..e63fb2e2 --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/at.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/ch.svg b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/ch.svg new file mode 100644 index 00000000..f5ec8d46 --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/ch.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/de.svg b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/de.svg new file mode 100644 index 00000000..1acf302d --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/de.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/fr.svg b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/fr.svg new file mode 100644 index 00000000..712c8a5d --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/fr.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/gb.svg b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/gb.svg new file mode 100644 index 00000000..132dbedb --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/flags/gb.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js index ca485796..b9e4b281 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js @@ -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) diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss index 3bf3bda0..6a5a4d7d 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss @@ -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%); } 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 a487c58d..e1b7bf23 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 @@ -5,9 +5,8 @@ -
- - +
+ @@ -18,5 +17,8 @@
+ + + 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 71497e9f..472bc3cc 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html @@ -2,7 +2,7 @@ xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> -
+
    diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html index 9bc95bf5..c0073da6 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html @@ -1,7 +1,7 @@ {namespace v=FluidTYPO3\Vhs\ViewHelpers} {slides -> v:iterator.first() -> v:variable.set(name: 'slide')} -
    +
    diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html new file mode 100644 index 00000000..a641134f --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html @@ -0,0 +1,17 @@ + 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 11fed0dc..2b4c1ce9 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html @@ -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"> - -
    -
    - - {settings.defaultTitle} - - -
    - -
    -
    - - - - - - + +
    +
    +
    + + {settings.defaultTitle} + + +
    + + + + + + +
    -
    -
    +     - - - - - - - - - - - -
  • {subsubitem.title}
    • -     - -
  • {subsubitem.title}
    • -     -     -     -     -     - - - + + + + +
  • + + {subsubitem.title} + +
    • +     + +
  • + + {subsubitem.title} + +
    • +     +     +     +     + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html new file mode 100644 index 00000000..15bf8769 --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html @@ -0,0 +1,70 @@ + + +
    +
    +
    + +
    + +
    + +
    +
    +

    Du hast Fragen?

    +

    Wir können helfen!

    + Anrufen + Whatsapp + + FAQ + +
    +
    + + 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 7043bd1d..4acf88bb 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html @@ -1,35 +1,27 @@ {namespace v=FluidTYPO3\Vhs\ViewHelpers} {namespace ep=EP\EpTheme\ViewHelpers} -
    -
    - - - - - Bereich wechseln - - - - - -
    -
    + + + + + diff --git a/tailwind.config.js b/tailwind.config.js index 4193a041..1e26198d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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` + }) + }) + }), ], }