WIP Migrate teasers
This commit is contained in:
Björn Fromme
-127
@@ -1,127 +0,0 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="teaserbox teaserbox--landscape teaserbox--searchresult searchresult-item">
|
||||
<div class="teaserbox__image">
|
||||
<img class="teaserbox__flag" :src="item.country.flag" :alt="item.country.name"/>
|
||||
<a :href="url" rel="nofollow" title="Details & Buchen">
|
||||
<picture class="searchresult-item__image">
|
||||
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(image: item.hotel.images.0, width: '260', height: '200c-100')} 260w'"/>
|
||||
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(image: item.hotel.images.0, width: '280', height: '220c-100')} 280w'"/>
|
||||
<source media="(max-width: 768px)" data-srcset="{f:uri.image(image: item.hotel.images.0, width: '220', height: '130c-100')} 220w'"/>
|
||||
<img data-src="{f:uri.image(image: item.hotel.images.0, width: '220', height: '130c-100')}"
|
||||
class="scale lazyload"
|
||||
title="{item.hotel.images.0.title}"
|
||||
alt="{item.hotel.images0.alt}">
|
||||
</picture>
|
||||
</a>
|
||||
<div class="concept-badge concept-badge--{section.concept.code}" id="{section.concept.code}">
|
||||
{section.concept.name}
|
||||
</div>
|
||||
</div>
|
||||
<div class="teaserbox__main">
|
||||
<div class="teaserbox__header">
|
||||
<span class="searchresult-item__headline">
|
||||
{item.region.name}
|
||||
<f:if condition="{section.concept.code} == 'evt'">
|
||||
<br><strong>{item.product.name}</strong>
|
||||
</f:if>
|
||||
</span>
|
||||
<span class="searchresult-item__subline">
|
||||
{item.hotel.name}
|
||||
</span>
|
||||
<f:if condition="{item.hotel.category}">
|
||||
<span class="searchresult-item__category">
|
||||
Kategorie {item.hotel.category}
|
||||
</span>
|
||||
</f:if>
|
||||
</div>
|
||||
<ul class="check-list searchresult-item__checklist">
|
||||
<f:if condition="{item.hotel.fact}">
|
||||
<li>
|
||||
{item.hotel.fact}
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{item.product.fact}">
|
||||
<li>
|
||||
{item.product.fact}
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{item.region.feature}">
|
||||
<f:then>
|
||||
<li>
|
||||
{item.region.feature}
|
||||
</li>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:if condition="{item.region.fact}">
|
||||
<li>
|
||||
{item.region.fact}
|
||||
</li>
|
||||
</f:if>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</ul>
|
||||
<ul class="check-list check-list--inverted searchresult-item__featurelist">
|
||||
<li>
|
||||
Skipass
|
||||
</li>
|
||||
<f:if condition="{item.board}">
|
||||
<li>
|
||||
{item.board}
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{item.product.feature}">
|
||||
<li>
|
||||
{item.product.feature}
|
||||
</li>
|
||||
</f:if>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="teaserbox__aside">
|
||||
<div class="teaserbox__aside__top">
|
||||
<span class="searchresult-item__label">
|
||||
{f:if(condition: '{item.dates -> f:count()} > 1', then: 'Zeitraum', else: 'Termin')}
|
||||
</span>
|
||||
<span class="searchresult-item__daterange">
|
||||
{dateRange}
|
||||
</span>
|
||||
<f:if condition="{item.dates -> f:count()}">
|
||||
<f:if condition="{item.daytrip}">
|
||||
<f:else>
|
||||
<a :href="url" rel="nofollow" title="Details & Buchen">
|
||||
<span class="searchresult-item__daterange">
|
||||
<i class="fa fa-arrow-circle-right"></i> {item.dates -> f:count()} {f:if(condition: '{item.dates -> f:count()} > 1', then: 'Termine', else: 'Termin')}
|
||||
</span>
|
||||
</a>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:if>
|
||||
<hr>
|
||||
<span class="searchresult-item__label">
|
||||
{f:if(condition: item.daytrip, then: 'Tageweise buchbar', else: nightsOptions)}
|
||||
</span>
|
||||
</div>
|
||||
<div class="teaserbox__aside__bottom">
|
||||
<span class="searchresult-item__price">
|
||||
ab {item.minPrice} €
|
||||
</span>
|
||||
<a :href="url"
|
||||
class="button button--full searchresult-item__button"
|
||||
rel="nofollow" title="Details">
|
||||
Details{f:if(condition: item.hideBookingButton, else: ' & Buchen')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button x-data="watchlistToggle({item.key})" x-bind="trigger">
|
||||
<span data-microtip-position="top" x-bind="label" role="tooltip">
|
||||
<svg class="w-5 h-5">
|
||||
<use x-bind:href="onList() ? '#icon-minus-circle' : '#icon-plus-circle'"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
@@ -1,77 +1,76 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:section name="Teaser">
|
||||
<div class="teaserbox teaserbox--product teaserbox--flippable">
|
||||
<a href="{ep:uri.product(forceHotelUid: teaser.forceHotelUid, product: teaser.product, hotel: teaser.hotel, dateFrom: dateFrom, dateTo: dateTo, slug: slug)}" class="teaserbox__flip" title="{teaser.product.name}">
|
||||
<f:render section="Inner" arguments="{_all}"/>
|
||||
</a>
|
||||
</div>
|
||||
<a href="{ep:uri.product(forceHotelUid: teaser.forceHotelUid, product: teaser.product, hotel: teaser.hotel, dateFrom: dateFrom, dateTo: dateTo, slug: slug)}"
|
||||
title="{teaser.region.name} {teaser.product.name} Details und Buchen"
|
||||
class="block w-full max-w-xl mx-auto sm:max-w-none bg-white sm:flex sm:flex-wrap">
|
||||
<f:render section="TeaserImage" arguments="{_all}"/>
|
||||
<f:render section="TeaserContent" arguments="{_all}"/>
|
||||
</a>
|
||||
</f:section>
|
||||
|
||||
<f:section name="Inner">
|
||||
<div class="teaserbox__side teaserbox__side--front">
|
||||
<div class="teaserbox__image">
|
||||
<img class="teaserbox__flag"
|
||||
src="{teaser.country.flag}"
|
||||
alt="{teaser.country.name}"/>
|
||||
<f:render partial="TeaserImage" arguments="{image: teaser.product.images.original.0}"/>
|
||||
</div>
|
||||
<f:if condition="{teaser.concept.code}">
|
||||
<div class="concept-badge concept-badge--{teaser.concept.code}">{teaser.concept.name}</div>
|
||||
</f:if>
|
||||
<div class="teaserbox__main">
|
||||
<div class="teaserbox__inner">
|
||||
<div class="teaserbox__header">
|
||||
<f:if condition="{teaser.concept.code} == 'evt'">
|
||||
<f:then>
|
||||
<span class="product-teaser__headline subline">{teaser.product.name -> f:format.nl2br()}</span>
|
||||
<span class="product-teaser__subline">{teaser.region.name}</span>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="product-teaser__headline subline">{teaser.region.name}</span>
|
||||
<span class="product-teaser__subline">{teaser.product.name -> f:format.nl2br()}{f:if(condition: teaser.product.subline, then: '<br>{teaser.product.subline}')}</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:section name="TeaserImage">
|
||||
<f:alias map="{ icons: { bik: 'Mountainbike', akt: 'Walking', prg: 'Sportclub' } }">
|
||||
<div class="relative">
|
||||
<img class="block w-full h-auto lazyload"
|
||||
data-src="{f:uri.image(image: teaser.product.images.original.0, width: '640', height: '480c')}"
|
||||
width="640" height="480" />
|
||||
<div class="absolute top-0 left-0 w-full md:w-2/3 bg-ep-primary-80 flex items-center">
|
||||
<div class="bg-ep-primary p-2 mr-4 text-white">
|
||||
<svg class="w-8 h-8 fill-current text-white">
|
||||
<use href="#icon-{icons.{teaser.concept.code} -> f:format.case(mode: 'lower')}"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<hr>
|
||||
<span class="product-teaser__description">
|
||||
{ep:dateRange(dateFrom: teaser.minDateStart, dateTo: teaser.maxDateEnd, includeLabel: 0, format: 'd.m.y')} <f:if condition="{teaser.dates -> f:count()} > 1 && !{teaser.daytrip}">({teaser.dates -> f:count()} Termine)</f:if><br>
|
||||
{ep:nightsOptions(options: teaser.nights, daytrip: teaser.daytrip)}<f:if condition="{teaser.skipassIncluded}">, <strong>inkl. {f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}</strong></f:if>
|
||||
<span class="text-white uppercase font-semibold">
|
||||
{teaser.concept.name}
|
||||
</span>
|
||||
<hr>
|
||||
<div class="product-teaser__footer">
|
||||
<span class="product-teaser__price"><strong>ab {teaser.minPrice} €</strong>{f:if(condition: teaser.pseudoPrice, then: ' <s class="product-teaser__pseudo-price">{teaser.pseudoPrice} €</s>')}</span>
|
||||
<f:if condition="{date.pseudoPrice}">
|
||||
<f:else>
|
||||
<div class="product-teaser__labels{f:if(condition: '{teaser.new} == 1 && {teaser.date.lowContingent} == 1', then: ' product-teaser__labels--multiple')}">
|
||||
<f:if condition="{teaser.new}">
|
||||
<span class="teaser-label teaser-label--new">Neu</span>
|
||||
</f:if>
|
||||
<f:if condition="{teaser.date.lowContingent}">
|
||||
<span class="teaser-label teaser-label--low-contingent">Wenige Betten</span>
|
||||
</f:if>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
<button class="absolute bottom-0 md:bottom-auto md:top-0 right-0 p-2 text-white hover:text-ep-primary"
|
||||
data-controller="watchlist-toggle"
|
||||
data-watchlist-toggle-key-value="{item.key}"
|
||||
data-action="watchlist-toggle#toggle">
|
||||
<span data-microtip-position="top"
|
||||
role="tooltip"
|
||||
aria-label="auf die Merkliste setzen"
|
||||
data-watchlist-toggle-target="ariaLabel">
|
||||
<svg class="w-5 h-5 text-ep-secondary">
|
||||
<use href="#icon-heart" data-watchlist-toggle-target="icon"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</f:alias>
|
||||
</f:section>
|
||||
|
||||
<f:section name="TeaserContent">
|
||||
<div class="w-full py-4 px-4 flex items-start">
|
||||
<svg class="w-10 h-6 mr-2 mt-8"><use href="#icon-flag-{teaser.country.code -> f:format.case(mode: 'lower')}"/></svg>
|
||||
<div class="flex-grow pt-1">
|
||||
<div class="text-gray-800 leading-none">{teaser.product.name}</div>
|
||||
<div class="pt-2 h-32 text-gray-800 text-3xl leading-none font-bold">{teaser.region.name}</div>
|
||||
<div class="pb-2 text-gray-800 text-xl font-bold">{ep:nightsOptions(options: teaser.nights, daytrip: teaser.daytrip)}</div>
|
||||
<ul class="list-none p-0 m-0 w-2/3 text-gray-800 divide-y divide-gray-400">
|
||||
<li>
|
||||
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
|
||||
</li>
|
||||
<li>
|
||||
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
|
||||
</li>
|
||||
<li>
|
||||
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
|
||||
</li>
|
||||
<li>
|
||||
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-full bg-ep-primary text-white font-bold px-4 py-1 mt-10 mb-4">
|
||||
<span class="block lg:inline-block">ab <span class="text-3xl mx-1">{teaser.minPrice} €</span></span>
|
||||
<span class="block lg:inline-block">p. P. / inkl. {f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teaserbox__side teaserbox__side--back">
|
||||
<div class="teaserbox__back">
|
||||
{teaser.product.teaser -> f:format.html()}
|
||||
</div>
|
||||
<button class="button button--full teaserbox__button" title="{teaser.product.name}">
|
||||
<f:if condition="{teaser.hideBookingButton}">
|
||||
<f:then>{f:translate(key: 'tx_eptheme.label.teaserbutton.product_no_booking', extensionName: 'ep_theme')}</f:then>
|
||||
<f:else>{f:translate(key: 'tx_eptheme.label.teaserbutton.product', extensionName: 'ep_theme')}</f:else>
|
||||
</f:if>
|
||||
</button>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
|
||||
+18
-33
@@ -1,39 +1,22 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<f:render partial="Header/Standalone" arguments="{_all}"/>
|
||||
<div>
|
||||
<div class="py-8 bg-ep-primary-10">
|
||||
<ep:container data="{data}">
|
||||
<f:if condition="{data.flexForm.settings.layout} == 'cols'">
|
||||
<f:then>
|
||||
<div class="w-full mb-4 splide"
|
||||
data-controller="slider"
|
||||
data-slider-preset-value="teasers">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<f:render section="Teasers" arguments="{_all}"/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:render section="Teasers" arguments="{_all}"/>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:render partial="Header/Standalone" arguments="{_all}"/>
|
||||
<f:render section="Teasers" arguments="{_all}"/>
|
||||
<f:if condition="{settings.showMoreLink}">
|
||||
<p class="text-right">
|
||||
<div class="text-right mt-4">
|
||||
<f:link.action pageUid="{settings.defaultStaticSearchPageUid}" class="button"
|
||||
action="staticresult" controller="Search"
|
||||
arguments="{encodedFilterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}">
|
||||
Alle anzeigen
|
||||
</f:link.action>
|
||||
</p>
|
||||
</div>
|
||||
</f:if>
|
||||
</ep:container>
|
||||
</div>
|
||||
@@ -41,18 +24,20 @@
|
||||
|
||||
<f:section name="Teasers">
|
||||
<f:if condition="{teasers}">
|
||||
<f:for each="{teasers}" as="teaser">
|
||||
<f:if condition="{settings.layout} == 'rows'">
|
||||
<f:then>
|
||||
<f:if condition="{settings.layout} == 'rows'">
|
||||
<f:then>
|
||||
<f:for each="{teasers}" as="teaser">
|
||||
<f:render partial="Product/TeaserWide" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<li class="splide__slide">
|
||||
</f:for>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="grid grid-cols-3 gap-8">
|
||||
<f:for each="{teasers}" as="teaser">
|
||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
|
||||
</li>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:for>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:if>
|
||||
</f:section>
|
||||
|
||||
|
||||
@@ -33,204 +33,204 @@
|
||||
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"
|
||||
data-collapse-collapsed-value="true">
|
||||
<div class="relative border-b border-r border-white mr-8">
|
||||
<input type="text"
|
||||
data-action="click->collapse#toggle"
|
||||
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
|
||||
placeholder="Zeitraum"
|
||||
<f:if condition="{searchParams.dateFrom} && {searchParams.dateTo}">
|
||||
value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
|
||||
</f:if>
|
||||
data-searchbar-target="dateRangeLabel"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
|
||||
data-action="click->collapse#toggle">
|
||||
<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="relative border-b border-r border-white mr-8">
|
||||
<input type="text"
|
||||
data-action="click->collapse#toggle"
|
||||
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
|
||||
placeholder="Zeitraum"
|
||||
<f:if condition="{searchParams.dateFrom} && {searchParams.dateTo}">
|
||||
value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
|
||||
</f:if>
|
||||
data-searchbar-target="dateRangeLabel"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
|
||||
data-action="click->collapse#toggle">
|
||||
<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()}'
|
||||
data-action="datepicker#selectPreset">
|
||||
<span>
|
||||
{preset.label}
|
||||
</span>
|
||||
</button>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:if>
|
||||
<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()}'
|
||||
data-action="datepicker#selectPreset">
|
||||
<span>
|
||||
{preset.label}
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
<!-- /Date range -->
|
||||
|
||||
<!-- Pax -->
|
||||
<div class="w-24"
|
||||
data-controller="collapse"
|
||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||
data-collapse-collapsed-value="true">
|
||||
<div class="relative border-b border-r border-white mr-8">
|
||||
<input type="text"
|
||||
data-action="click->collapse#toggle"
|
||||
data-searchbar-target="paxLabel"
|
||||
value="{searchParams.pax}"
|
||||
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
|
||||
data-action="click->collapse#toggle">
|
||||
<use href="#icon-user-group"></use>
|
||||
</svg>
|
||||
<div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded w-full h-48 overflow-y-scroll"
|
||||
data-collapse-target="container">
|
||||
<ul class="m-0 p-0">
|
||||
<f:for each="{filterOptions.pax}" as="option">
|
||||
<li>
|
||||
<button data-action="searchbar#setPax"
|
||||
data-option="{option}">
|
||||
{option}
|
||||
</button>
|
||||
</li>
|
||||
</f:for>
|
||||
<li>
|
||||
<a href="{f:uri.typolink(parameter: settings.groupsPageUid)}">
|
||||
> 20
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Pax -->
|
||||
|
||||
<!-- Destination -->
|
||||
<div class="flex-1"
|
||||
data-controller="collapse"
|
||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||
data-collapse-collapsed-value="true">
|
||||
<div class="relative border-b border-r border-white mr-8">
|
||||
<input type="text"
|
||||
data-action="click->collapse#toggle"
|
||||
data-searchbar-target="destinationLabel"
|
||||
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
|
||||
placeholder="Reiseziel/Konzept"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45 cursor-pointer"
|
||||
data-action="click->collapse#toggle">
|
||||
<use href="#icon-airplane"></use>
|
||||
</svg>
|
||||
<div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded min-w-full h-64 overflow-y-scroll"
|
||||
data-collapse-target="container">
|
||||
<div class="grid grid-cols-5 gap-4">
|
||||
<f:for each="{filterOptions.destinations}" as="destination">
|
||||
<div class="col-span-3">
|
||||
<button class="flex items-center space-x-2"
|
||||
data-action="searchbar#setDestination"
|
||||
data-option-uid="{destination.country.uid}"
|
||||
data-option-type="country"
|
||||
data-option-label="{destination.country.label}">
|
||||
<svg class="block w-8 h-6">
|
||||
<use href="#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"/>
|
||||
</svg>
|
||||
<span>
|
||||
{destination.country.label}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<f:for each="{destination.regions}" as="region">
|
||||
<button data-action="searchbar#setDestination"
|
||||
data-option-uid="{region.uid}"
|
||||
data-option-type="region"
|
||||
data-option-label="{region.label}">
|
||||
{region.label}
|
||||
</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>
|
||||
</f:for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Date range -->
|
||||
|
||||
<!-- Pax -->
|
||||
<div class="w-24"
|
||||
data-controller="collapse"
|
||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||
data-collapse-collapsed-value="true">
|
||||
<div class="relative border-b border-r border-white mr-8">
|
||||
<input type="text"
|
||||
data-action="click->collapse#toggle"
|
||||
data-searchbar-target="paxLabel"
|
||||
value="{searchParams.pax}"
|
||||
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
|
||||
data-action="click->collapse#toggle">
|
||||
<use href="#icon-user-group"></use>
|
||||
</svg>
|
||||
<div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded w-full h-48 overflow-y-scroll"
|
||||
data-collapse-target="container">
|
||||
<ul class="m-0 p-0">
|
||||
<f:for each="{filterOptions.pax}" as="option">
|
||||
<li>
|
||||
<button data-action="searchbar#setPax"
|
||||
data-option="{option}">
|
||||
{option}
|
||||
</button>
|
||||
</li>
|
||||
</f:for>
|
||||
<li>
|
||||
<a href="{f:uri.typolink(parameter: settings.groupsPageUid)}">
|
||||
> 20
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Pax -->
|
||||
|
||||
<!-- Destination -->
|
||||
<div class="flex-1"
|
||||
data-controller="collapse"
|
||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||
data-collapse-collapsed-value="true">
|
||||
<div class="relative border-b border-r border-white mr-8">
|
||||
<input type="text"
|
||||
data-action="click->collapse#toggle"
|
||||
data-searchbar-target="destinationLabel"
|
||||
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
|
||||
placeholder="Reiseziel/Konzept"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45 cursor-pointer"
|
||||
data-action="click->collapse#toggle">
|
||||
<use href="#icon-airplane"></use>
|
||||
</svg>
|
||||
<div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded min-w-full h-64 overflow-y-scroll"
|
||||
data-collapse-target="container">
|
||||
<div class="grid grid-cols-5 gap-4">
|
||||
<f:for each="{filterOptions.destinations}" as="destination">
|
||||
<div class="grid grid-cols-5 gap-4 border-t py-2 my-2">
|
||||
<div class="col-span-3">
|
||||
<button class="flex items-center space-x-2"
|
||||
data-action="searchbar#setDestination"
|
||||
data-option-uid="{destination.country.uid}"
|
||||
data-option-type="country"
|
||||
data-option-label="{destination.country.label}">
|
||||
<svg class="block w-8 h-6">
|
||||
<use href="#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"/>
|
||||
</svg>
|
||||
<span>
|
||||
{destination.country.label}
|
||||
</span>
|
||||
</button>
|
||||
<strong>
|
||||
Konzept
|
||||
</strong>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<f:for each="{destination.regions}" as="region">
|
||||
<f:for each="{filterOptions.concepts}" as="concept">
|
||||
<button data-action="searchbar#setDestination"
|
||||
data-option-uid="{region.uid}"
|
||||
data-option-type="region"
|
||||
data-option-label="{region.label}">
|
||||
{region.label}
|
||||
data-option-uid="{concept.uid}"
|
||||
data-option-type="concept"
|
||||
data-option-label="{concept.name}">
|
||||
{concept.name}
|
||||
</button>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:for>
|
||||
</div>
|
||||
<div class="grid grid-cols-5 gap-4 border-t py-2 my-2">
|
||||
<div class="col-span-3">
|
||||
<strong>
|
||||
Konzept
|
||||
</strong>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<f:for each="{filterOptions.concepts}" as="concept">
|
||||
<button data-action="searchbar#setDestination"
|
||||
data-option-uid="{concept.uid}"
|
||||
data-option-type="concept"
|
||||
data-option-label="{concept.name}">
|
||||
{concept.name}
|
||||
</button>
|
||||
</f:for>
|
||||
</div>
|
||||
<button class="button button--small"
|
||||
data-action="searchbar#resetDestination">
|
||||
zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
<button class="button button--small"
|
||||
data-action="searchbar#resetDestination">
|
||||
zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Destination -->
|
||||
<!-- /Destination -->
|
||||
|
||||
<!-- Price range -->
|
||||
<div class="w-32"
|
||||
data-controller="collapse"
|
||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||
data-collapse-collapsed-value="true">
|
||||
<div class="relative border-r border-b border-white">
|
||||
<input type="text"
|
||||
data-action="click->collapse#toggle"
|
||||
data-searchbar-target="priceRangeLabel"
|
||||
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
|
||||
placeholder="Preis"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
|
||||
data-action="click->collapse#toggle">
|
||||
<use href="#icon-euro"></use>
|
||||
</svg>
|
||||
<div class="hidden absolute z-20 top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll"
|
||||
data-collapse-target="container">
|
||||
<ul class="m-0 p-0">
|
||||
<li>
|
||||
<button data-action="searchbar#setPriceRange"
|
||||
data-option-value=""
|
||||
data-label-value="beliebig">
|
||||
beliebig
|
||||
</button>
|
||||
</li>
|
||||
<f:for each="{filterOptions.priceRanges}" as="range" iteration="iteration">
|
||||
<!-- Price range -->
|
||||
<div class="w-32"
|
||||
data-controller="collapse"
|
||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||
data-collapse-collapsed-value="true">
|
||||
<div class="relative border-r border-b border-white">
|
||||
<input type="text"
|
||||
data-action="click->collapse#toggle"
|
||||
data-searchbar-target="priceRangeLabel"
|
||||
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
|
||||
placeholder="Preis"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
|
||||
data-action="click->collapse#toggle">
|
||||
<use href="#icon-euro"></use>
|
||||
</svg>
|
||||
<div class="hidden absolute z-20 top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll"
|
||||
data-collapse-target="container">
|
||||
<ul class="m-0 p-0">
|
||||
<li>
|
||||
<button data-action="searchbar#setPriceRange"
|
||||
data-option-value="{range.uid}"
|
||||
data-label-value="{range.formatted}">
|
||||
{range.formatted}
|
||||
data-option-value=""
|
||||
data-label-value="beliebig">
|
||||
beliebig
|
||||
</button>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
<f:for each="{filterOptions.priceRanges}" as="range" iteration="iteration">
|
||||
<li>
|
||||
<button data-action="searchbar#setPriceRange"
|
||||
data-option-value="{range.uid}"
|
||||
data-label-value="{range.formatted}">
|
||||
{range.formatted}
|
||||
</button>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Price range -->
|
||||
<!-- /Price range -->
|
||||
|
||||
</div>
|
||||
<button type="submit" class="hidden sticky:block sticky:ml-4">
|
||||
|
||||
Reference in New Issue
Block a user