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

WIP Always use mobile navigation on touch devices

Browse Source
This commit is contained in:
Björn Fromme
2022-08-13 10:33:19 +02:00
parent 8fbb115a52
commit 0df7fa730b
4 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+3 -3
View File
@@ -5,7 +5,7 @@
<f:section name="Main">
<div class="fixed top-0 left-0 inset-x-0 z-40 lg:relative lg:container bg-white shadow-md lg:shadow-none">
<div class="flex items-center lg:items-end justify-between px-4 py-2 lg:px-0 lg:pt-4 lg:pb-0">
<div class="flex items-center hover-hover:lg:items-end justify-between px-4 py-2 lg:px-0 lg:pt-4 lg:pb-0">
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
class="block lg:pb-4"
title="{settings.defaultTitle}">
@@ -13,10 +13,10 @@
class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\', ser: \'h-10 lg:h-12\'}', key: settings.themekey)}"
alt="{settings.defaultTitle}"/>
</a>
<div class="hidden lg:block">
<div class="hidden hover-hover:lg:block">
<f:render section="FirstLevel" arguments="{_all}"/>
</div>
<div class="flex lg:hidden items-center space-x-4">
<div class="flex hover-hover:lg:hidden items-center space-x-4">
<f:if condition="{settings.hideSearchbar}">
<f:else>
<button type="button"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+2 -2
View File
@@ -5,7 +5,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<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-zinc-700 hidden"
<div class="fixed hover-hover:lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 hover-none:lg:pt-20 pb-10 z-50 bg-zinc-700 hidden"
data-controller="overlay-toggle"
data-overlay-toggle-id-value="mobilenav"
data-overlay-toggle-target="overlay"
@@ -16,7 +16,7 @@
title="{settings.defaultTitle}">
<f:image class="block h-10 lg:h-12 w-auto" src="{settings.logoImage}" alt="{settings.defaultTitle}"/>
</a>
<div class="flex lg:hidden items-center space-x-4">
<div class="flex hover-hover:lg:hidden items-center space-x-4">
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<button type="button"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/MobileSearch.html
+1 -1
View File
@@ -2,7 +2,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
data-namespace-typo3-fluid="true">
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-zinc-700 hidden"
<div class="fixed hover-hover:lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-zinc-700 hidden"
data-controller="mobile-search"
data-mobile-search-uri-value="{ep:uri.ajax(controller: 'AjaxFilterPanel', action: 'index', pageUid: settings.defaultAjaxUid, format: 'html')}"
data-mobile-search-init-uri-value="{ep:uri.ajax(controller: 'AjaxFilterPanel', action: 'index', pageUid: settings.defaultAjaxUid, arguments: '{filterSettings: filterSettings}', format: 'html')}"
tailwind.config.js
+17 -4
View File
@@ -1,3 +1,4 @@
const postcss = require('postcss')
const plugin = require('tailwindcss/plugin')
const tinycolor = require('tinycolor2')
@@ -168,20 +169,32 @@ module.exports = {
variants: ['sbw', 'snz', 'uch', 'ser'],
}),
plugin(function ({addVariant, e}) {
addVariant('hover-hover', ({ container, separator }) => {
const hoverHover = postcss.atRule({ name: 'media', params: '(hover: hover)' })
hoverHover.append(container.nodes)
container.append(hoverHover)
hoverHover.walkRules(rule => {
rule.selector = `.${e(`hover-hover${separator}${rule.selector.slice(1)}`)}`
})
})
addVariant('hover-none', ({ container, separator }) => {
const hoverNone = postcss.atRule({ name: 'media', params: '(hover: none)' })
hoverNone.append(container.nodes)
container.append(hoverNone)
hoverNone.walkRules(rule => {
rule.selector = `.${e(`hover-none${separator}${rule.selector.slice(1)}`)}`
})
})
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`
})
})
}),
plugin(function ({addVariant, e}) {
addVariant('reduced', ({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.reduced .${e(`reduced${separator}${className}`)}`