WIP Migrate search result page
This commit is contained in:
Björn Fromme
+1
-1
@@ -55,7 +55,7 @@ export default class extends Controller {
|
||||
this.containerTarget.classList.toggle('hidden', this.collapsedValue === true)
|
||||
this.containerTarget.scrollTop = 0
|
||||
if (this.hasIconTarget) {
|
||||
this.iconTarget.classList.toggle('rotate-180', this.collapsedValue === false)
|
||||
this.iconTarget.classList.toggle('rotate-90', this.collapsedValue === false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ h4,
|
||||
}
|
||||
|
||||
.headline--underlined:after {
|
||||
@apply block border-b-4 border-ep-primary sbw:border-sbw-primary pb-4 mb-4 w-20;
|
||||
@apply block border-b-4 border-ep-primary sbw:border-sbw-primary pb-4 mb-4 -mt-2 w-20;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
data-action="collapse#toggle">
|
||||
<svg class="w-4 h-4 text-white transform transition duration-200 ease-in-out"
|
||||
data-collapse-target="icon">
|
||||
<use href="#icon-chevron-down"></use>
|
||||
<use href="#icon-chevron-right"></use>
|
||||
</svg>
|
||||
<span>
|
||||
{faq.question}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<symbol id="icon-chevron-up" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></symbol>
|
||||
<symbol id="icon-chevron-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></symbol>
|
||||
<symbol id="icon-chevron-left" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></symbol>
|
||||
<symbol id="icon-arrow-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></symbol>
|
||||
<symbol id="icon-arrow-circle-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
|
||||
<symbol id="icon-minus-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
|
||||
<symbol id="icon-plus-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
|
||||
|
||||
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 25 KiB |
@@ -7,56 +7,92 @@
|
||||
name="filterSettings"
|
||||
pluginName="Ajax"
|
||||
data="{'search-target': 'form'}">
|
||||
<div class="border rounded p-4">
|
||||
|
||||
<div class="relative mb-2 pb-2 border-b"
|
||||
<div class="p-8 bg-cover 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-collapse-collapsed-value="true">
|
||||
<button data-action="click->collapse#toggle">
|
||||
Zeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
|
||||
<button data-action="click->collapse#toggle"
|
||||
class="flex items-center justify-between w-full">
|
||||
<span class="uppercase font-bold text-lg">
|
||||
Reisezeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
|
||||
</span>
|
||||
<svg class="w-6 h-6 text-white transform"
|
||||
data-collapse-target="icon">
|
||||
<use href="#icon-arrow-right"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<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 data-collapse-target="container">
|
||||
<f:form.hidden property="dateFrom"
|
||||
data="{'search-target': 'dateFrom'}"/>
|
||||
<f:form.hidden property="dateTo"
|
||||
data="{'search-target': 'dateTo'}"/>
|
||||
<div data-controller="datepicker"
|
||||
<f:if condition="{filterSettings.dateFrom} && {filterSettings.dateTo}">
|
||||
data-datepicker-date-from-value="{filterSettings.dateFrom}"
|
||||
data-datepicker-date-to-value="{filterSettings.dateTo}"
|
||||
</f:if>
|
||||
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}">
|
||||
<f:if condition="{settings.datePickerPresets}">
|
||||
<div class="flex items-center justify-between pb-2">
|
||||
<f:for each="{settings.datePickerPresets}" as="preset">
|
||||
<button class="daterange__preset"
|
||||
data-preset='{preset -> f:format.json()}'
|
||||
data-action="datepicker#selectPreset">
|
||||
<span>
|
||||
{preset.label}
|
||||
</span>
|
||||
</button>
|
||||
</f:for>
|
||||
<f:if condition="{filterSettings.dateFrom} && {filterSettings.dateTo}">
|
||||
data-datepicker-date-from-value="{filterSettings.dateFrom}"
|
||||
data-datepicker-date-to-value="{filterSettings.dateTo}"
|
||||
</f:if>
|
||||
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}">
|
||||
<f:if condition="{settings.datePickerPresets}">
|
||||
<div class="flex items-center justify-between pb-2">
|
||||
<f:for each="{settings.datePickerPresets}" as="preset">
|
||||
<button class="daterange__preset"
|
||||
data-preset='{preset -> f:format.json()}'
|
||||
data-action="datepicker#selectPreset">
|
||||
<span>
|
||||
{preset.label}
|
||||
</span>
|
||||
</button>
|
||||
</f:for>
|
||||
</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>
|
||||
</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 data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
|
||||
<button data-action="click->collapse#toggle"
|
||||
class="flex items-center justify-between w-full">
|
||||
<span class="uppercase font-bold text-lg">
|
||||
Reisekonzepte
|
||||
</span>
|
||||
<svg class="w-6 h-6 text-white transform"
|
||||
data-collapse-target="icon">
|
||||
<use href="#icon-arrow-right"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<div data-collapse-target="container">
|
||||
<ul class="mb-0 p-0">
|
||||
<f:for each="{filterOptions.concepts}" as="concept">
|
||||
<li>
|
||||
<f:form.checkbox class="mr-2 rounded-full w-6 h-6 border-0 ring-0 focus:border-0 focus:ring-0"
|
||||
property="conceptUids"
|
||||
data="{action: 'search#filter'}"
|
||||
value="{concept.uid}"/>
|
||||
{concept.name}
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-2 pb-2 border-b"
|
||||
data-controller="collapse"
|
||||
<div data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}">
|
||||
<button data-action="click->collapse#toggle">
|
||||
Reiseziel
|
||||
@@ -89,29 +125,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 pb-2 border-b"
|
||||
data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
|
||||
<button data-action="click->collapse#toggle">
|
||||
Reisekonzepte
|
||||
</button>
|
||||
<div data-collapse-target="container">
|
||||
<ul class="mb-0 p-0">
|
||||
<f:for each="{filterOptions.concepts}" as="concept">
|
||||
<li>
|
||||
<f:form.checkbox class="mr-2"
|
||||
property="conceptUids"
|
||||
data="{action: 'search#filter'}"
|
||||
value="{concept.uid}"/>
|
||||
{concept.name}
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 pb-2 border-b"
|
||||
data-controller="collapse"
|
||||
<div data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}">
|
||||
<button data-action="click->collapse#toggle">
|
||||
Preis
|
||||
@@ -133,22 +147,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 pb-2 border-b"
|
||||
data-controller="collapse"
|
||||
<div data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.pax} > 1', then: 'false', else: 'true')}">
|
||||
<button data-action="click->collapse#toggle">
|
||||
Personen
|
||||
</button>
|
||||
<div data-collapse-target="container">
|
||||
<div class="border rounded">
|
||||
<select name="pax"
|
||||
data-action="search#filter">
|
||||
<f:for each="{filterOptions.pax}" as="option">
|
||||
<option value="{option}">
|
||||
{option}
|
||||
</option>
|
||||
</f:for>
|
||||
</select>
|
||||
<f:form.select property="pax"
|
||||
options="{filterOptions.pax}"
|
||||
data="{action: 'search#filter'}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -160,8 +168,7 @@
|
||||
4: 'Gästehaus',
|
||||
5: 'Pension'
|
||||
}"/>
|
||||
<div class="mb-2 pb-2 border-b"
|
||||
data-controller="collapse"
|
||||
<div data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.hotelTypes}', then: 'false', else: 'true')}">
|
||||
<label data-action="click->collapse#toggle">
|
||||
Unterkunft
|
||||
@@ -183,8 +190,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 pb-2 border-b"
|
||||
data-controller="collapse"
|
||||
<div data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.boardTypes}', then: 'false', else: 'true')}">
|
||||
<label data-action="click->collapse#toggle">
|
||||
Verpflegung
|
||||
@@ -216,8 +222,7 @@
|
||||
5: 'ab 5 Pers.',
|
||||
6: 'mit anderen'
|
||||
}"/>
|
||||
<div class="mb-2 pb-2 border-b"
|
||||
data-controller="collapse"
|
||||
<div data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.roomTypes}', then: 'false', else: 'true')}">
|
||||
<label data-action="click->collapse#toggle">
|
||||
Zimmerarten/Apart.
|
||||
@@ -261,7 +266,6 @@
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
</div>
|
||||
</f:form>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -6,20 +6,18 @@
|
||||
<div class="col-span-3 lg:col-span-1 relative"
|
||||
data-controller="collapse"
|
||||
data-collapse-until-value="991">
|
||||
<p class="lg:hidden">
|
||||
<button class="button button--small w-full"
|
||||
data-action="collapse#toggle">
|
||||
<span>Filter ein-/ausblenden</span>
|
||||
</button>
|
||||
</p>
|
||||
<div class="lg:block"
|
||||
<div class="lg:block bg-white"
|
||||
data-collapse-target="container">
|
||||
<h3>Filter</h3>
|
||||
<button class="button button--small w-full my-4"
|
||||
data-action="search#reset">
|
||||
Filter zurücksetzen
|
||||
</button>
|
||||
<h3 class="headline headline--underlined px-8 py-4">
|
||||
Filter
|
||||
</h3>
|
||||
<f:render partial="Search/FilterPanel" arguments="{_all}"/>
|
||||
<div class="px-8 py-4">
|
||||
<button class="button button--secondary w-full"
|
||||
data-action="search#reset">
|
||||
Filter zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-3 lg:col-span-2 relative">
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<f:for each="{dates}" as="row" iteration="iteration">
|
||||
<tr class="even:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
|
||||
<tr class="odd:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
|
||||
data-pricetable-target="row">
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
|
||||
@@ -159,7 +159,8 @@
|
||||
</f:if>
|
||||
<f:if condition="{row.showBookingButton}">
|
||||
<f:else>
|
||||
<a href="#"
|
||||
<a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
|
||||
title="Reisen-Alert"
|
||||
class="button button--small bg-gray-300">
|
||||
Reisen-Alert
|
||||
</a>
|
||||
|
||||
+44
-58
@@ -5,55 +5,53 @@
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<div class="headerbar flex items-center justify-between">
|
||||
<span>Buchungsoptionen</span>
|
||||
<span>{hotel.name} {dateRange}</span>
|
||||
<div class="headerbar md:flex md:items-center md:justify-between">
|
||||
<span class="block">Buchungsoptionen</span>
|
||||
<span class="block">{hotel.name} {dateRange}</span>
|
||||
</div>
|
||||
|
||||
<div data-controller="pricetable"
|
||||
data-pricetable-show-all-rows-value="true">
|
||||
|
||||
<f:if condition="{hasSurcharge} || {hasDiscount}">
|
||||
<div class="w-full flex justify-end mb-2">
|
||||
<f:if condition="{hasSurcharge}">
|
||||
<button data-action="pricetable#toggleSurcharge"
|
||||
class="flex items-center space-x-1 focus:outline-none ep:text-ep-primary">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="surchargeToggleLabel"
|
||||
data-label-default="Preise für Eigenanreise anzeigen"
|
||||
data-label-alt="Preise für Busanreise anzeigen">
|
||||
Preise für Eigenanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</f:if>
|
||||
<f:if condition="{hasDiscount}">
|
||||
<button data-action="pricetable#toggleDiscount"
|
||||
class="flex items-center space-x-1 focus:outline-none ep:text-ep-primary">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="discountToggleLabel"
|
||||
data-label-default="Preise für Busanreise anzeigen"
|
||||
data-label-alt="Preise für Eigenanreise anzeigen">
|
||||
Preise für Busanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</f:if>
|
||||
</div>
|
||||
<f:if condition="{hasSurcharge}">
|
||||
<button data-action="pricetable#toggleSurcharge"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary mb-2">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="surchargeToggleLabel"
|
||||
data-label-default="Preise für Eigenanreise anzeigen"
|
||||
data-label-alt="Preise für Busanreise anzeigen">
|
||||
Preise für Eigenanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</f:if>
|
||||
<f:if condition="{hasDiscount}">
|
||||
<button data-action="pricetable#toggleDiscount"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary mb-2">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="discountToggleLabel"
|
||||
data-label-default="Preise für Busanreise anzeigen"
|
||||
data-label-alt="Preise für Eigenanreise anzeigen">
|
||||
Preise für Busanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</f:if>
|
||||
</f:if>
|
||||
|
||||
<table class="w-full border-collapse mb-4">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">
|
||||
<th class="p1 text-left">
|
||||
Zimmertyp
|
||||
</th>
|
||||
<th class="text-left">
|
||||
<th class="p1 text-left">
|
||||
Preis
|
||||
</th>
|
||||
<th class="text-left">
|
||||
<th class="p1 text-left">
|
||||
inkl.
|
||||
</th>
|
||||
<th></th>
|
||||
@@ -62,45 +60,31 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<f:for each="{prices}" as="row">
|
||||
<tr class="even:bg-gray-50"
|
||||
<tr class="odd:bg-gray-100"
|
||||
data-pricetable-target="row">
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<f:if condition="{row.showBookingButton} && {row.available}">
|
||||
<f:then>
|
||||
<a class="text-sm sm:text-base"
|
||||
<a class="text-ep-primary-light text-xs sm:text-sm md:text-base"
|
||||
href="{row.bookingUrl}"
|
||||
target="_blank">
|
||||
target="_blank"
|
||||
title="{row.roomName}, {hotel.name}, {dateRange} buchen">
|
||||
{row.roomName}
|
||||
</a>
|
||||
<br>
|
||||
<a class="button button--small bg-green-500 border-green-500 sm:hidden"
|
||||
href="{row.bookingUrl}"
|
||||
target="_blank">
|
||||
Jetzt buchen
|
||||
</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="text-sm sm:text-base">
|
||||
<span class="text-xs sm:text-sm md:text-base">
|
||||
{row.roomName}
|
||||
</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{row.available}">
|
||||
<f:else>
|
||||
<div class="lg:hidden">
|
||||
<span class="inline-block px-2 mx-1 text-xs text-gray-500">
|
||||
ausgebucht
|
||||
</span>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2 whitespace-nowrap"
|
||||
data-pricetable-target="price"
|
||||
data-room="{row.minPrice}"
|
||||
data-bus="{row.busPrice}"
|
||||
data-discount="{row.discount}">
|
||||
<span class="text-sm sm:text-base">
|
||||
<span class="font-bold text-xs sm:text-sm md:text-base whitespace-nowrap">
|
||||
{row.minPrice} €
|
||||
</span>
|
||||
</td>
|
||||
@@ -131,7 +115,7 @@
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<f:if condition="{row.hasOptionalServices} && {row.available}">
|
||||
<button class="hidden sm:block button button--light button--small"
|
||||
<button class="button button--small bg-ep-primary hidden md:block"
|
||||
data-action="pricetable#openModal"
|
||||
data-type="options"
|
||||
data-uid="{row.roomUid}"
|
||||
@@ -150,11 +134,11 @@
|
||||
</button>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="hidden lg:table-cell px-2 py-1 md:p-2">
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<f:if condition="{row.isHideBookingButton}">
|
||||
<f:then>
|
||||
<a class="button button--small button--mute"
|
||||
href="#">
|
||||
href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}">
|
||||
Reisen-Alert
|
||||
</a>
|
||||
</f:then>
|
||||
@@ -162,7 +146,9 @@
|
||||
<f:if condition="{row.available}">
|
||||
<f:then>
|
||||
<a class="button button--small bg-green-500 border-green-500 block"
|
||||
href="{row.bookingUrl}" target="_blank">
|
||||
href="{row.bookingUrl}"
|
||||
title="{row.roomName}, {hotel.name}, {dateRange} buchen"
|
||||
target="_blank">
|
||||
Buchen
|
||||
</a>
|
||||
</f:then>
|
||||
|
||||
Reference in New Issue
Block a user