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

WIP Migrate filter panel

Browse Source
This commit is contained in:
Björn Fromme
2021-10-12 16:03:52 +02:00
parent 33cda815ce
commit c6bb54e8de
2 changed files with 289 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+90 -30
View File
@@ -8,15 +8,12 @@
pluginName="Ajax" pluginName="Ajax"
data="{'search-target': 'form'}"> data="{'search-target': 'form'}">
<div class="p-8 bg-cover text-white" <div class="mb-4 p-4 bg-ep-primary text-white"
style="background-image: url( {f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/winter.jpg')} )">
<div class="mb-4"
data-controller="collapse" data-controller="collapse"
data-collapse-collapsed-value="true"> data-collapse-collapsed-value="true">
<button data-action="click->collapse#toggle" <button data-action="click->collapse#toggle"
class="flex items-center justify-between w-full"> class="flex items-center justify-between w-full">
<span class="uppercase font-bold text-lg"> <span class="uppercase font-bold">
Reisezeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)} Reisezeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
</span> </span>
<svg class="w-6 h-6 text-white transform" <svg class="w-6 h-6 text-white transform"
@@ -24,7 +21,8 @@
<use href="#icon-arrow-right"></use> <use href="#icon-arrow-right"></use>
</svg> </svg>
</button> </button>
<div data-collapse-target="container"> <div data-collapse-target="container"
class="pt-2">
<f:form.hidden property="dateFrom" <f:form.hidden property="dateFrom"
data="{'search-target': 'dateFrom'}"/> data="{'search-target': 'dateFrom'}"/>
<f:form.hidden property="dateTo" <f:form.hidden property="dateTo"
@@ -63,11 +61,12 @@
</div> </div>
</div> </div>
<div data-controller="collapse" <div class="mb-4 p-4 bg-ep-primary text-white"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
<button data-action="click->collapse#toggle" <button data-action="click->collapse#toggle"
class="flex items-center justify-between w-full"> class="flex items-center justify-between w-full">
<span class="uppercase font-bold text-lg"> <span class="uppercase font-bold">
Reisekonzepte Reisekonzepte
</span> </span>
<svg class="w-6 h-6 text-white transform" <svg class="w-6 h-6 text-white transform"
@@ -75,27 +74,38 @@
<use href="#icon-arrow-right"></use> <use href="#icon-arrow-right"></use>
</svg> </svg>
</button> </button>
<div data-collapse-target="container"> <div data-collapse-target="container"
<ul class="mb-0 p-0"> class="pt-2">
<ul class="mb-0 p-0 space-y-2">
<f:for each="{filterOptions.concepts}" as="concept"> <f:for each="{filterOptions.concepts}" as="concept">
<li> <li>
<f:form.checkbox class="mr-2 rounded-full w-6 h-6 border-0 ring-0 focus:border-0 focus:ring-0" <label>
<f:form.checkbox class="mr-2 rounded-full w-5 h-5 border-white ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="conceptUids" property="conceptUids"
data="{action: 'search#filter'}" data="{action: 'search#filter'}"
value="{concept.uid}"/> value="{concept.uid}"/>
{concept.name} {concept.name}
</label>
</li> </li>
</f:for> </f:for>
</ul> </ul>
</div> </div>
</div> </div>
</div> <div class="px-4 divide-y">
<div data-controller="collapse" <div class="py-2"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}">
<button data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle"
class="flex items-center justify-between w-full">
<span class="uppercase font-bold">
Reiseziel Reiseziel
</span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="#icon-arrow-right"></use>
</svg>
</button> </button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<ul class="mb-0 p-0"> <ul class="mb-0 p-0">
@@ -125,10 +135,18 @@
</div> </div>
</div> </div>
<div data-controller="collapse" <div class="py-2"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}">
<button data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle"
class="flex items-center justify-between w-full">
<span class="uppercase font-bold">
Preis Preis
</span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="#icon-arrow-right"></use>
</svg>
</button> </button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<ul class="mb-0 p-0"> <ul class="mb-0 p-0">
@@ -147,10 +165,18 @@
</div> </div>
</div> </div>
<div data-controller="collapse" <div class="py-2"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.pax} > 1', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.pax} > 1', then: 'false', else: 'true')}">
<button data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle"
class="flex items-center justify-between w-full">
<span class="uppercase font-bold">
Personen Personen
</span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="#icon-arrow-right"></use>
</svg>
</button> </button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<div class="border rounded"> <div class="border rounded">
@@ -168,11 +194,19 @@
4: 'Gästehaus', 4: 'Gästehaus',
5: 'Pension' 5: 'Pension'
}"/> }"/>
<div data-controller="collapse" <div class="py-2"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.hotelTypes}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.hotelTypes}', then: 'false', else: 'true')}">
<label data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle"
class="flex items-center justify-between w-full">
<span class="uppercase font-bold">
Unterkunft Unterkunft
</label> </span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="#icon-arrow-right"></use>
</svg>
</button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<ul class="mb-0 p-0"> <ul class="mb-0 p-0">
<f:for each="{filterOptions.hotelTypes}" as="type"> <f:for each="{filterOptions.hotelTypes}" as="type">
@@ -190,11 +224,19 @@
</div> </div>
</div> </div>
<div data-controller="collapse" <div class="py-2"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.boardTypes}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.boardTypes}', then: 'false', else: 'true')}">
<label data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle"
class="flex items-center justify-between w-full">
<span class="uppercase font-bold">
Verpflegung Verpflegung
</label> </span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="#icon-arrow-right"></use>
</svg>
</button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<ul class="mb-0 p-0"> <ul class="mb-0 p-0">
<f:for each="{filterOptions.boardTypes}" as="type"> <f:for each="{filterOptions.boardTypes}" as="type">
@@ -222,11 +264,19 @@
5: 'ab 5 Pers.', 5: 'ab 5 Pers.',
6: 'mit anderen' 6: 'mit anderen'
}"/> }"/>
<div data-controller="collapse" <div class="py-2"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.roomTypes}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.roomTypes}', then: 'false', else: 'true')}">
<label data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle"
class="flex items-center justify-between w-full">
<span class="uppercase font-bold">
Zimmerarten/Apart. Zimmerarten/Apart.
</label> </span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="#icon-arrow-right"></use>
</svg>
</button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<ul class="mb-0 p-0 p-0"> <ul class="mb-0 p-0 p-0">
<f:for each="{filterOptions.roomTypes}" as="type"> <f:for each="{filterOptions.roomTypes}" as="type">
@@ -245,11 +295,19 @@
</div> </div>
<f:if condition="{filterOptions.busAvailable}"> <f:if condition="{filterOptions.busAvailable}">
<div data-controller="collapse" <div class="py-2"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: filterSettings.bus, then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: filterSettings.bus, then: 'false', else: 'true')}">
<label data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle"
class="flex items-center justify-between w-full">
<span class="uppercase font-bold">
Anreise Anreise
</label> </span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="#icon-arrow-right"></use>
</svg>
</button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<ul class="mb-0 p-0"> <ul class="mb-0 p-0">
<li> <li>
@@ -266,6 +324,8 @@
</div> </div>
</f:if> </f:if>
</div>
</f:form> </f:form>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
+3 -3
View File
@@ -6,13 +6,13 @@
<div class="col-span-3 lg:col-span-1 relative" <div class="col-span-3 lg:col-span-1 relative"
data-controller="collapse" data-controller="collapse"
data-collapse-until-value="991"> data-collapse-until-value="991">
<div class="lg:block bg-white" <div class="lg:block bg-white p-4"
data-collapse-target="container"> data-collapse-target="container">
<h3 class="headline headline--underlined px-8 py-4"> <h3 class="headline headline--underlined mb-4">
Filter Filter
</h3> </h3>
<f:render partial="Search/FilterPanel" arguments="{_all}"/> <f:render partial="Search/FilterPanel" arguments="{_all}"/>
<div class="px-8 py-4"> <div class="mt-4">
<button class="button button--secondary w-full" <button class="button button--secondary w-full"
data-action="search#reset"> data-action="search#reset">
Filter zurücksetzen Filter zurücksetzen