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

Improve searchbar layout

Browse Source
This commit is contained in:
Björn Fromme
2021-09-01 18:24:01 +02:00
parent e65a3a45eb
commit 912e2c7e5f
3 changed files with 201 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss
+2 -3
View File
@@ -1,8 +1,7 @@
.searchbar { .searchbar {
@apply hidden relative lg:block lg:container lg:px-0 -mt-20 mb-8; @apply hidden relative lg:block lg:container -mt-20 mb-8;
@apply bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark;
&.sticky { &.sticky {
@apply fixed z-50 top-0 left-0 mt-8 mb-0 inset-x-0 max-w-full shadow-lg; @apply fixed z-50 top-0 left-0 mt-8 mb-0 inset-x-0 max-w-full px-0 shadow-lg;
} }
} }
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+1 -1
View File
@@ -74,7 +74,7 @@
<f:section name="SecondLevel"> <f:section name="SecondLevel">
<div class="absolute top-100 left-0 inset-x-0 pt-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-opacity duration-300 ease-in-out"> <div class="absolute top-100 left-0 inset-x-0 pt-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
<div class="bg-white grid grid-cols-3 lg:grid-cols-4 gap-8 p-4 shadow-lg"> <div class="bg-white grid grid-cols-3 lg:grid-cols-4 gap-8 p-4 shadow-lg rounded">
<f:for each="{topitem.children}" as="subitem"> <f:for each="{topitem.children}" as="subitem">
<ul class="m-0 p-0 list-none"> <ul class="m-0 p-0 list-none">
<li> <li>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+6 -4
View File
@@ -24,6 +24,7 @@
</f:else> </f:else>
</f:if> </f:if>
data-searchbar-target="container"> 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="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="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">
@@ -139,7 +140,7 @@
data-collapse-target="container"> data-collapse-target="container">
<div class="grid grid-cols-5 gap-4"> <div class="grid grid-cols-5 gap-4">
<f:for each="{filterOptions.destinations}" as="destination"> <f:for each="{filterOptions.destinations}" as="destination">
<div class="col-span-3"> <div class="col-span-2">
<button class="flex items-center space-x-2" <button class="flex items-center space-x-2"
data-action="searchbar#setDestination" data-action="searchbar#setDestination"
data-option-uid="{destination.country.uid}" data-option-uid="{destination.country.uid}"
@@ -154,7 +155,7 @@
</span> </span>
</button> </button>
</div> </div>
<div class="col-span-2"> <div class="col-span-3 flex flex-col items-start space-y-1">
<f:for each="{destination.regions}" as="region"> <f:for each="{destination.regions}" as="region">
<button data-action="searchbar#setDestination" <button data-action="searchbar#setDestination"
data-option-uid="{region.uid}" data-option-uid="{region.uid}"
@@ -167,12 +168,12 @@
</f:for> </f:for>
</div> </div>
<div class="grid grid-cols-5 gap-4 border-t py-2 my-2"> <div class="grid grid-cols-5 gap-4 border-t py-2 my-2">
<div class="col-span-3"> <div class="col-span-2">
<strong> <strong>
Konzept Konzept
</strong> </strong>
</div> </div>
<div class="col-span-2"> <div class="col-span-3 flex flex-col items-start space-y-1">
<f:for each="{filterOptions.concepts}" as="concept"> <f:for each="{filterOptions.concepts}" as="concept">
<button data-action="searchbar#setDestination" <button data-action="searchbar#setDestination"
data-option-uid="{concept.uid}" data-option-uid="{concept.uid}"
@@ -246,6 +247,7 @@
</button> </button>
</div> </div>
</div> </div>
</div>
</f:form> </f:form>
</div> </div>
</f:section> </f:section>