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

WIP Migrate filterpanel

Browse Source
This commit is contained in:
Björn Fromme
2021-10-20 18:46:55 +02:00
parent f75503a52e
commit 71b429eb61
2 changed files with 114 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+113 -69
View File
@@ -10,54 +10,78 @@
<div class="mb-4 p-4 bg-ep-primary text-white" <div class="mb-4 p-4 bg-ep-primary text-white"
data-controller="collapse" data-controller="collapse"
data-collapse-collapsed-value="true"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.dateFrom} || {filterSettings.dateTo}', 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"> <span class="uppercase font-bold">
Reisezeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)} Reisezeitraum
</span> </span>
<svg class="w-6 h-6 text-white transform" <svg class="w-6 h-6 text-white transform"
data-collapse-target="icon"> data-collapse-target="icon">
<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"
data="{'search-target': 'dateTo'}"/> data="{'search-target': 'dateTo'}"/>
<div data-controller="datepicker"
<f:if condition="{filterSettings.dateFrom} && {filterSettings.dateTo}"> <div data-controller="collapse datepicker"
data-datepicker-date-from-value="{filterSettings.dateFrom}" data-datepicker-date-from-value="{filterSettings.dateFrom}"
data-datepicker-date-to-value="{filterSettings.dateTo}" data-datepicker-date-to-value="{filterSettings.dateTo}"
</f:if> data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"> data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
<f:if condition="{settings.datePickerPresets}"> data-collapse-collapsed-value="true">
<div class="flex items-center justify-between pb-2"> <div class="relative">
<f:for each="{settings.datePickerPresets}" as="preset"> <input type="text"
<button class="daterange__preset" data-action="click->collapse#toggle"
data-preset='{preset -> f:format.json()}' class="w-full px-0 bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase cursor-pointer placeholder-white"
data-action="datepicker#selectPreset"> placeholder="Zeitraum"
<span> value="{ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}"
{preset.label} data-searchbar-target="dateRangeLabel"/>
</span> <svg class="w-6 h-6 text-white absolute right-0 top-0 mt-2 cursor-pointer"
</button> data-action="click->collapse#toggle">
</f:for> <use href="#icon-calendar"></use>
</svg>
<div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
data-collapse-target="container">
<div class="flex justify-between divide-x divide-gray-200">
<div class="pr-2">
<input type="hidden"
data-datepicker-target="field">
</div>
<div class="flex-1 flex flex-col justify-between pl-2">
<f:if condition="{settings.datePickerPresets}">
<div class="flex flex-col space-y-4">
<f:for each="{settings.datePickerPresets}" as="preset">
<button class="button button--small button--light w-full"
data-preset='{preset -> f:format.json() -> f:format.raw()}'
data-action="datepicker#selectPreset">
<span>
{preset.label}
</span>
</button>
</f:for>
</div>
</f:if>
<div class="flex flex-col space-y-4">
<button class="button button--small button--light w-full"
data-action="collapse#close">
schließen
</button>
<button class="button button--small button--light w-full"
data-action="datepicker#reset">
zurücksetzen
</button>
</div>
</div>
</div>
</div> </div>
</f:if>
<input type="hidden"
data-datepicker-target="field">
<div class="flex items-center justify-between pt-2">
<button class="daterange__button focus:outline-none">
schließen
</button>
<button class="daterange__button focus:outline-none"
data-action="datepicker#reset">
zurücksetzen
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -108,23 +132,34 @@
</svg> </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 pt-2 space-y-1">
<f:for each="{filterOptions.destinations}" as="destination"> <f:for each="{filterOptions.destinations}" as="destination">
<li> <li>
<f:form.checkbox class="mr-2" <label class="flex items-start">
property="countryUids" <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
data="{action: 'search#filter'}" property="countryUids"
value="{destination.country.uid}"/> data="{action: 'search#filter'}"
{destination.country.label} value="{destination.country.uid}"/>
<svg class="ml-2 w-6 h-4">
<use href="#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"/>
</svg>
<span class="pl-2 leading-none">
{destination.country.label}
</span>
</label>
<f:if condition="{destination.regions}"> <f:if condition="{destination.regions}">
<ul class="pl-4 pt-1"> <ul class="py-2 space-y-1">
<f:for each="{destination.regions}" as="region"> <f:for each="{destination.regions}" as="region">
<li> <li>
<f:form.checkbox class="mr-2" <label class="flex items-start">
property="regionUids" <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
data="{action: 'search#filter'}" property="regionUids"
value="{region.uid}"/> data="{action: 'search#filter'}"
{region.label} value="{region.uid}"/>
<span class="leading-none pl-4">
{region.label}
</span>
</label>
</li> </li>
</f:for> </f:for>
</ul> </ul>
@@ -149,15 +184,17 @@
</svg> </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 pt-2 space-y-1">
<f:for each="{filterOptions.priceRanges}" as="range"> <f:for each="{filterOptions.priceRanges}" as="range">
<li> <li>
<label> <label class="flex items-start">
<f:form.checkbox class="mr-2" <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="priceRanges" property="priceRanges"
data="{action: 'search#filter'}" data="{action: 'search#filter'}"
value="{range.uid}"/> value="{range.uid}"/>
{ep:priceRange(min: range.min, max: range.max)} <span class="leading-none pl-2">
{ep:priceRange(min: range.min, max: range.max)}
</span>
</label> </label>
</li> </li>
</f:for> </f:for>
@@ -179,11 +216,10 @@
</svg> </svg>
</button> </button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<div class="border rounded"> <f:form.select class="w-full border-0 focus:ring-0 bg-right mt-2 p-0"
<f:form.select property="pax" property="pax"
options="{filterOptions.pax}" options="{filterOptions.pax}"
data="{action: 'search#filter'}"/> data="{action: 'search#filter'}"/>
</div>
</div> </div>
</div> </div>
@@ -208,15 +244,17 @@
</svg> </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 pt-2 space-y-1">
<f:for each="{filterOptions.hotelTypes}" as="type"> <f:for each="{filterOptions.hotelTypes}" as="type">
<li> <li>
<label> <label class="flex items-start">
<f:form.checkbox class="mr-2" <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="hotelTypes" property="hotelTypes"
data="{action: 'search#filter'}" data="{action: 'search#filter'}"
value="{type}"/> value="{type}"/>
{hotelTypes.{type}} <span class="leading-none pl-2">
{hotelTypes.{type}}
</span>
</label> </label>
</li> </li>
</f:for> </f:for>
@@ -238,16 +276,18 @@
</svg> </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 pt-2 space-y-1">
<f:for each="{filterOptions.boardTypes}" as="type"> <f:for each="{filterOptions.boardTypes}" as="type">
<f:if condition="{type.label}"> <f:if condition="{type.label}">
<li> <li>
<label> <label class="flex items-start">
<f:form.checkbox class="mr-2" <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="boardTypes" property="boardTypes"
data="{action: 'search#filter'}" data="{action: 'search#filter'}"
value="{type.uid}"/> value="{type.uid}"/>
{type.label} <span class="pl-2 leading-none">
{type.label}
</span>
</label> </label>
</li> </li>
</f:if> </f:if>
@@ -278,15 +318,17 @@
</svg> </svg>
</button> </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 pt-2 space-y-1">
<f:for each="{filterOptions.roomTypes}" as="type"> <f:for each="{filterOptions.roomTypes}" as="type">
<li> <li>
<label> <label class="flex items-start">
<f:form.checkbox class="mr-2" <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="roomTypes" property="roomTypes"
data="{action: 'search#filter'}" data="{action: 'search#filter'}"
value="{type}"/> value="{type}"/>
{roomTypes.{type}} <span class="leading-none pl-2">
{roomTypes.{type}}
</span>
</label> </label>
</li> </li>
</f:for> </f:for>
@@ -309,14 +351,16 @@
</svg> </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 pt-2 space-y-1">
<li> <li>
<label> <label class="flex items-start">
<f:form.checkbox class="mr-2" <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="bus" property="bus"
data="{action: 'search#filter'}" data="{action: 'search#filter'}"
value="1"/> value="1"/>
Busanreise <span class="leading-none pl-2">
Busanreise
</span>
</label> </label>
</li> </li>
</ul> </ul>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
+1 -1
View File
@@ -5,7 +5,7 @@
<div class="grid grid-cols-3 gap-8"> <div class="grid grid-cols-3 gap-8">
<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="1024">
<div class="lg:block bg-white p-4" <div class="lg:block bg-white p-4"
data-collapse-target="container"> data-collapse-target="container">
<h3 class="headline headline--underlined mb-4"> <h3 class="headline headline--underlined mb-4">