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

Finalize searchbar position on different page layouts

Browse Source
This commit is contained in:
Björn Fromme
2021-09-02 15:32:41 +02:00
parent 9e5cedf9ac
commit eb7d91a458
15 changed files with 98 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_products/Classes/Controller/SearchbarController.php
+1 -1
View File
@@ -83,7 +83,7 @@ class SearchbarController extends ActionController
$this->view->assignMultiple([
'filterOptions' => $filterOptions,
'searchParams' => $searchParams,
'fixed' => (bool)$this->settings['fixed'],
'collapsed' => (bool)$this->settings['collapsed'],
]);
}
}
public/typo3conf/ext/ep_theme/Configuration/TypoScript/Library/SearchBar.typoscript
+2 -2
View File
@@ -17,5 +17,5 @@ lib.searchBar {
view =< plugin.tx_epproducts.view
}
lib.searchBarFixed < lib.searchBar
lib.searchBarFixed.settings.fixed = 1
lib.searchBarCollapsed < lib.searchBar
lib.searchBarCollapsed.settings.collapsed = 1
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/searchbar_toggle_controller.js
+14
View File
@@ -0,0 +1,14 @@
import { Controller } from 'stimulus'
import { useDispatch } from 'stimulus-use'
export default class extends Controller {
initialize() {
useDispatch(this)
}
toggle(e) {
e.preventDefault()
this.dispatch('toggle')
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/sticky_controller.js
+7 -4
View File
@@ -5,10 +5,9 @@ export default class extends Controller {
static debounces = [ 'toggle' ]
static classes = [ 'sticky' ]
static values = {
sticky: Boolean,
classes: String,
offset: Number,
disabled: Boolean,
}
@@ -37,7 +36,11 @@ export default class extends Controller {
}
stickyValueChanged() {
let stickyClass = this.hasStickyClass ? this.stickyClass : 'sticky'
this.element.classList.toggle(stickyClass, this.stickyValue)
if (!this.hasClassesValue) {
return
}
this.classesValue.split(' ').forEach(className => {
this.element.classList.toggle(className, this.stickyValue)
})
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss
+5 -1
View File
@@ -2,6 +2,10 @@
@apply hidden relative lg:block lg:container -mt-20 mb-8;
&.sticky {
@apply fixed z-50 top-0 left-0 mt-8 mb-0 inset-x-0 max-w-full px-0 shadow-lg;
@apply fixed z-50 top-0 left-0 mt-8 mb-0 inset-x-0 shadow-lg;
}
&.reduced {
@apply max-w-full px-0 mt-8 mb-0;
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_slider.scss
+1 -1
View File
@@ -1,7 +1,7 @@
@import "~@splidejs/splide/dist/css/splide-core.min.css";
.slider-pagination {
@apply absolute bottom-0 left-1/2 transform -translate-x-1/2 md:mb-4;
@apply absolute bottom-0 left-1/2 transform -translate-x-1/2 md:mb-8;
@apply list-none p-0;
@apply flex items-center space-x-2;
}
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Detail.html
+5 -7
View File
@@ -4,13 +4,11 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/>
<div class="lg:mt-24">
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBarFixed"/>
</f:else>
</f:if>
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<div class="lg:mt-8">
<f:cObject typoscriptObjectPath="lib.searchBarCollapsed"/>
<f:alias map="{searchbarCollapsed: 1}">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
</f:alias>
<f:render section="Content"/>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html
+6 -6
View File
@@ -4,14 +4,14 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/>
<div class="lg:mt-32">
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBarFixed"/>
</f:else>
</f:if>
<div class="lg:mt-8">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Content"/>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html
+5 -5
View File
@@ -5,13 +5,13 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/>
<div class="lg:mt-8">
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBarFixed"/>
</f:else>
</f:if>
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-1">
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html
+6 -6
View File
@@ -4,14 +4,14 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/>
<div class="lg:mt-32">
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBarFixed"/>
</f:else>
</f:if>
<div class="lg:mt-8">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+2 -2
View File
@@ -3,7 +3,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:if condition="{slide}">
<div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8 lg:-mt-8">
<div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8">
<f:alias map="{image: slide.image.0}">
<f:if condition="{image}">
<picture>
@@ -41,7 +41,7 @@
<f:if condition="{settings.showSkipassBadge}">
<f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png" alt="Skipass inklusive"
class="absolute top-0 lg:top-8 right-8 lg:right-28 w-20 lg:w-auto" />
class="absolute top-0 right-8 lg:right-28 w-20 lg:w-auto" />
</f:link.typolink>
</f:if>
<f:if condition="{badge}">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+20 -1
View File
@@ -49,7 +49,7 @@
<f:if condition="{topitem.children}">
<f:then>
<a href="{f:uri.typolink(parameter: topitem.data.uid)}"
class="block text-gray-800 uppercase lg:text-lg flex items-center"
class="block text-gray-800 uppercase lg:text-lg font-bold flex items-center"
title="{topitem.title}">
<span>{topitem.title}</span>
<svg class="ml-1 w-4 h-4 transform group-hover:rotate-180">
@@ -68,6 +68,25 @@
</f:if>
</li>
</f:for>
<li class="pb-4">
<f:if condition="{searchbarCollapsed}">
<f:then>
<button data-controller="searchbar-toggle"
data-action="searchbar-toggle#toggle">
<svg class="w-6 h-6">
<use href="#icon-search"></use>
</svg>
</button>
</f:then>
<f:else>
<f:link.typolink parameter="{settings.defaultSearchPageUid}">
<svg class="w-6 h-6">
<use href="#icon-search"></use>
</svg>
</f:link.typolink>
</f:else>
</f:if>
</li>
</ul>
</nav>
</f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
+1 -1
View File
@@ -6,7 +6,7 @@
<f:if condition="{settings.hideAreaNavigation}">
<f:else>
<div class="hidden lg:block w-full fixed top-0 inset-x-0 z-50 bg-cover bg-center" style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/polygon.jpg')})">
<div class="hidden lg:block w-full fixed top-0 inset-x-0 z-50 bg-cover bg-center shadow" style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/polygon.jpg')})">
<div class="container">
<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&amp;P">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+14 -10
View File
@@ -3,9 +3,11 @@
<f:layout name="Default"/>
<f:section name="Main">
<div data-controller="searchbar"
data-action="datepicker:range-select->searchbar#setDateRange"
data-searchbar-uri-value="{ep:uri.ajax(controller: 'Searchbar', action: 'index', pageUid: settings.defaultAjaxUid, format: 'html')}">
<div data-controller="searchbar collapse"
<f:if condition="{collapsed}">
data-collapse-collapsed-value="true"
</f:if>
data-action="datepicker:range-select->searchbar#setDateRange searchbar-toggle:toggle@window->collapse#toggle">
<f:form action="processSearch" controller="Search" method="post" name="searchParams"
object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
pageUid="{settings.defaultSearchPageUid}" data="{'searchbar-target': 'form'}">
@@ -15,18 +17,20 @@
<f:form.hidden property="destinationUid" data="{'searchbar-target': 'destinationUid'}"/>
<f:form.hidden property="destinationType" data="{'searchbar-target': 'destinationType'}"/>
<f:form.hidden property="priceRange" data="{'searchbar-target': 'priceRange'}"/>
<div class="searchbar{f:if(condition: fixed, then: ' sticky')}"
<f:if condition="{fixed}">
<div class="searchbar{f:if(condition: collapsed, then: ' reduced hidden')}"
data-collapse-target="container"
<f:if condition="{collapsed}">
<f:else>
data-controller="sticky"
data-sticky-offset-value="650"
data-sticky-disabled-value="{fixed -> f:format.json()}"
data-sticky-disabled-value="false"
data-sticky-classes-value="sticky reduced"
</f:else>
</f:if>
data-searchbar-target="container">
<div class="bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark">
<div class="sticky:max-w-screen-xl sticky:mx-auto flex flex-col sticky:flex-row sticky:items-center">
<div class="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">
<div class="reduced:max-w-screen-xl reduced:mx-auto reduced:px-4 flex flex-col reduced:flex-row reduced:items-center">
<div class="flex items-start justify-between reduced:flex-1 pt-8 px-8 reduced:px-0 reduced:py-4">
<div class="flex-1"
data-controller="collapse datepicker"
@@ -232,13 +236,13 @@
</div>
</div>
<button type="submit" class="hidden sticky:block sticky:ml-4">
<button type="submit" class="hidden reduced:block reduced:ml-4">
<svg class="w-8 h-8 text-white">
<use href="#icon-chevron-right"></use>
</svg>
</button>
</div>
<div class="flex justify-end mt-4 sticky:hidden">
<div class="flex justify-end mt-4 reduced:hidden">
<button type="submit" class="w-1/3 text-white uppercase py-2">
Detailsuche
</button>
tailwind.config.js
+9 -9
View File
@@ -118,16 +118,16 @@ module.exports = {
borderWidth: [ 'even', 'odd', 'first', 'last' ],
textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ],
borderColor: [ 'sbw','snz', 'uch' ],
display: ['group-hover', 'sticky'],
display: ['group-hover', 'reduced'],
visibility: [ 'group-hover' ],
opacity: [ 'group-hover' ],
rotate: [ 'group-hover' ],
flex: [ 'sticky' ],
flexDirection: [ 'even', 'odd', 'sticky' ],
alignItems: [ 'sticky' ],
padding: [ 'even', 'odd', 'first', 'last', 'sticky' ],
margin: [ 'even', 'odd', 'first', 'last', 'sticky' ],
maxWidth: [ 'sticky' ],
flex: [ 'reduced' ],
flexDirection: [ 'even', 'odd', 'reduced' ],
alignItems: [ 'reduced' ],
padding: [ 'even', 'odd', 'first', 'last', 'reduced' ],
margin: [ 'even', 'odd', 'first', 'last', 'reduced' ],
maxWidth: [ 'reduced' ],
},
},
plugins: [
@@ -151,9 +151,9 @@ module.exports = {
})
}),
plugin(function ({addVariant, e}) {
addVariant('sticky', ({modifySelectors, separator}) => {
addVariant('reduced', ({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.sticky .${e(`sticky${separator}${className}`)}`
return `.reduced .${e(`reduced${separator}${className}`)}`
})
})
}),