Improve filterpanel and searchresult layout
This commit is contained in:
Björn Fromme
+1
@@ -40,6 +40,7 @@ export default class extends Controller {
|
||||
.then(this.parseHTML)
|
||||
.then(html => {
|
||||
this.resultsContainerTarget.innerHTML = html
|
||||
window.scroll({ top: 0, left: 0, behavior: 'smooth' })
|
||||
})
|
||||
.finally(() => {
|
||||
this.loadingValue = false
|
||||
|
||||
@@ -32,15 +32,13 @@
|
||||
<symbol id="icon-ski" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 96c26.5 0 48-21.5 48-48S458.5 0 432 0s-48 21.5-48 48 21.5 48 48 48zm-312-4.4l-11.5 22.5c14.4 7.3 31.1 4.9 42.8-4.8L284 175.5l61.1-24.4 14.1 42.3c3.4 10.1 10.5 18.3 20.1 23.1l58.1 29c11.9 6 26.3 1.1 32.2-10.7 5.9-11.9 1.1-26.3-10.8-32.2L403.6 175l-18.1-54.4c-4.9-14.6-15.6-26.6-29.6-33.1-14-6.5-30.1-6.9-44.3-1.2l-74.5 29.8-72.2-35.8c.3-14.5-7.2-28.5-20.9-35.6l-11.1 21.7h-.3l-34.4-7c-1.8-.4-3.7.2-5 1.7-1.9 2.2-1.7 5.5.5 7.4L120 91.6zM505 452c-9.4-9.4-24.6-9.3-33.9 0-12.1 12.1-30.7 15.3-45.1 8.7l-143-73.9 49.7-74.6c10.6-15.8 8.5-37.1-5-50.5l-57.2-57.2-76.9-38.1c-1.6 16.6 3.8 33 15.7 44.9l79.8 79.8-49.1 73.6-205-106c-11.9-6.1-26.3-1.5-32.3 10.3-6.1 11.8-1.5 26.3 10.3 32.3l391.9 202.5c11.9 5.5 24.5 8.1 37.1 8.1 23.2 0 46.1-9 63-26 9.3-9.3 9.3-24.5 0-33.9z"/></symbol>
|
||||
<symbol id="icon-mountain" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M634.92 462.7l-288-448C341.03 5.54 330.89 0 320 0s-21.03 5.54-26.92 14.7l-288 448a32.001 32.001 0 0 0-1.17 32.64A32.004 32.004 0 0 0 32 512h576c11.71 0 22.48-6.39 28.09-16.67a31.983 31.983 0 0 0-1.17-32.63zM61.31 464l131.77-204.98L256 321.94 329.94 248h109.9L578.7 464H61.31zM320 61.59L408.98 200h-98.92L256 254.06l-36.36-36.36L320 61.59z"/></symbol>
|
||||
<symbol id="icon-lift" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M112 128c26.5 0 48-21.5 48-48s-21.5-48-48-48-48 21.5-48 48 21.5 48 48 48zM256 0h-32v216l32-8V0zm-64.4 381.4c12.6-4.2 19.4-17.8 15.2-30.4-4.2-12.6-17.7-19.5-30.4-15.2L158 342c-19 6.4-40-2.5-48.7-20.7l-63.6-133c-5.7-11.9-20-17-32-11.3-12 5.7-17 20-11.3 32L66 342c15 31.2 46.4 50 79.5 50 12.6 0 17-.9 46.1-10.6zM488 288c-13.2 0-24 10.8-24 24 0 13.9-8.8 26.5-21.8 31.3L312 391.5V256c0-15.8-15-27-29.8-23.3l-93.5 23.4-39.7-85.5c-7.4-16-26.3-23.1-42.5-15.6-12.6 5.8-24.1 24.2-15.7 42.5l47.3 100.6c4.8 10.5 16.5 16.1 27.6 13.2l98.2-24.5v122.5l-152.3 56.3c-12.4 4.6-18.8 18.4-14.2 30.8 3.6 9.7 12.8 15.7 22.5 15.7 2.8 0 5.6-.5 8.3-1.5l330.5-122.1c31.8-11.8 53.2-42.5 53.2-76.4.1-13.3-10.7-24.1-23.9-24.1z"/></symbol>
|
||||
<symbol id="icon-concept" 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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></symbol>
|
||||
<symbol id="icon-spinner" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||
<g>
|
||||
<path d="M109.25 55.5h-36l12-12a29.54 29.54 0 0 0-49.53 12H18.75A46.04 46.04 0 0 1 96.9 31.84l12.35-12.34v36zm-90.5 17h36l-12 12a29.54 29.54 0 0 0 49.53-12h16.97A46.04 46.04 0 0 1 31.1 96.16L18.74 108.5v-36z"></path>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="960ms" repeatCount="indefinite"></animateTransform>
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-mountainbike" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M400 96a48 48 0 1 0-48-48 48 48 0 0 0 48 48zm224 256h-5.2a110.19 110.19 0 0 0-8.65-20.89l3.67-3.67a16 16 0 0 0 0-22.63l-22.63-22.63a16 16 0 0 0-22.63 0l-3.66 3.67a110.72 110.72 0 0 0-20.9-8.65V272a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v5.2a110.19 110.19 0 0 0-20.89 8.65l-3.67-3.67a16 16 0 0 0-22.63 0l-22.62 22.63a16 16 0 0 0 0 22.63l3.67 3.67A110.45 110.45 0 0 0 405.2 352H400a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h5.2a110.19 110.19 0 0 0 8.65 20.89l-3.67 3.67a16 16 0 0 0 0 22.63l22.62 22.63a16 16 0 0 0 22.63 0l3.67-3.67a110.94 110.94 0 0 0 20.9 8.65v5.2a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-5.2a110.56 110.56 0 0 0 20.9-8.65l3.67 3.67a16 16 0 0 0 22.62 0l22.63-22.63a16 16 0 0 0 0-22.63l-3.67-3.67A110.45 110.45 0 0 0 618.8 416h5.2a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-112 96a64 64 0 1 1 64-64 64 64 0 0 1-64 64zm-272-96h-5.2a110.19 110.19 0 0 0-8.65-20.89l3.67-3.67a16 16 0 0 0 0-22.63l-22.63-22.63a16 16 0 0 0-22.63 0l-3.66 3.67a110.72 110.72 0 0 0-20.9-8.65V272a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v5.2a110.19 110.19 0 0 0-20.89 8.65l-3.67-3.67a16 16 0 0 0-22.63 0l-22.63 22.63a16 16 0 0 0 0 22.63l3.67 3.67A110.45 110.45 0 0 0 21.2 352H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h5.2a110.19 110.19 0 0 0 8.65 20.89l-3.67 3.67a16 16 0 0 0 0 22.63l22.62 22.63a16 16 0 0 0 22.63 0l3.67-3.67A110.94 110.94 0 0 0 96 490.8v5.2a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-5.2a110.56 110.56 0 0 0 20.9-8.65l3.67 3.67a16 16 0 0 0 22.62 0l22.63-22.63a16 16 0 0 0 0-22.63l-3.67-3.67A110.45 110.45 0 0 0 234.8 416h5.2a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-112 96a64 64 0 1 1 64-64 64 64 0 0 1-64 64zm273-237.27a24 24 0 0 0 15 5.27h64a24 24 0 0 0 0-48h-55.59L351 109.27a24 24 0 0 0-30.62.51l-112 96a24 24 0 0 0 2.31 38.22L296 300.84V416a24 24 0 0 0 48 0V288a24 24 0 0 0-10.69-20l-43.23-28.82 70.73-60.63zM159.19 172a35.53 35.53 0 0 0 49.45 3.77l87.3-74.45c16.82-14.24 14.56-37 3.27-49.84C270 18.45 219 13.88 185.93 42L132.2 87.91a34.9 34.9 0 0 0-3.26 49.85zm57.88-93.5c9.92-8.42 24-9.35 35.65-3.43l-65.64 56-13.54-15.31z"/></symbol>
|
||||
<symbol id="icon-hotel" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M560 48c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16H16C7.16 0 0 7.16 0 16v16c0 8.84 7.16 16 16 16h15.98v416H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h544c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-16V48h16zm-64 416H320v-80h64c0-53.02-42.98-96-96-96s-96 42.98-96 96h64v80H79.98V48H496v416zM268.8 160h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm128 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm-256 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8z"/></symbol>
|
||||
<symbol id="icon-sportclub" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M560 48c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16H16C7.16 0 0 7.16 0 16v16c0 8.84 7.16 16 16 16h15.98v416H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h544c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-16V48h16zm-64 416H320v-80h64c0-53.02-42.98-96-96-96s-96 42.98-96 96h64v80H79.98V48H496v416zM268.8 160h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm128 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm-256 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8z"/></symbol>
|
||||
<symbol id="icon-teaser-grid" fill="currentColor" stroke="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="45" height="45"></rect>
|
||||
<rect x="55" y="0" width="45" height="45"></rect>
|
||||
|
||||
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 23 KiB |
@@ -3,13 +3,16 @@
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="mb-4 p-4 bg-ep-primary-light text-white"
|
||||
<div class="mb-4"
|
||||
data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.dateFrom} || {filterSettings.dateTo}', then: 'false', else: 'true')}">
|
||||
<button type="button"
|
||||
data-action="click->collapse#toggle"
|
||||
class="flex items-center justify-between w-full">
|
||||
<span class="uppercase font-bold">
|
||||
class="flex items-center justify-between w-full bg-brand-gradient p-4">
|
||||
<svg class="w-6 h-6 text-white mr-2">
|
||||
<use href="#icon-calendar"></use>
|
||||
</svg>
|
||||
<span class="flex-1 uppercase font-bold text-white text-left">
|
||||
Reisezeitraum
|
||||
</span>
|
||||
<svg class="w-6 h-6 text-white transform"
|
||||
@@ -22,53 +25,38 @@
|
||||
data="{'search-target': 'dateFrom', 'mobile-search-target': 'dateFrom'}"/>
|
||||
<f:form.hidden property="dateTo"
|
||||
data="{'search-target': 'dateTo', 'mobile-search-target': 'dateTo'}"/>
|
||||
|
||||
<div data-controller="collapse datepicker"
|
||||
<div class="bg-brand-gradient p-4"
|
||||
data-controller="datepicker"
|
||||
data-datepicker-date-from-value="{filterSettings.dateFrom}"
|
||||
data-datepicker-date-to-value="{filterSettings.dateTo}"
|
||||
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">
|
||||
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}">
|
||||
<div class="relative">
|
||||
<input type="text"
|
||||
data-action="click->collapse#toggle"
|
||||
class="w-full px-0 bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase cursor-pointer placeholder-white"
|
||||
placeholder="Zeitraum"
|
||||
value="{ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mt-2 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 flex-col md:flex-row md:justify-between divide-y md:divide-x divide-gray-200">
|
||||
<div class="text-white uppercase text-xl">
|
||||
{ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
|
||||
</div>
|
||||
<div class="mt-2 rounded">
|
||||
<div class="flex flex-col">
|
||||
<div class="pb-2 md:pb-0 md:pr-2">
|
||||
<input type="hidden"
|
||||
data-datepicker-target="field">
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between pt-2 md:pt-0 md:pl-2">
|
||||
<f:if condition="{settings.datePickerPresets}">
|
||||
<div class="grid grid-cols-2 gap-2 pb-4 md:pb-0 md:flex md:flex-col md:space-y-4">
|
||||
<div class="flex flex-col divide-y divide-overlay-white mt-2">
|
||||
<f:for each="{settings.datePickerPresets}" as="preset">
|
||||
<button type="button"
|
||||
class="button button--small button--light w-full"
|
||||
class="flex items-center justify-between w-full text-white py-2"
|
||||
data-preset='{preset -> f:format.json() -> f:format.raw()}'
|
||||
data-action="datepicker#selectPreset">
|
||||
<span>
|
||||
{preset.label}
|
||||
</span>
|
||||
<span class="uppercase font-bold">{preset.label}</span>
|
||||
<svg class="w-6 h-6 transform">
|
||||
<use href="#icon-arrow-right"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:if>
|
||||
<div class="grid grid-cols-2 gap-2 md:flex md:flex-col md:space-y-4">
|
||||
<button type="button"
|
||||
class="button button--small button--light w-full"
|
||||
data-action="collapse#close">
|
||||
schließen
|
||||
</button>
|
||||
<button type="button"
|
||||
class="button button--small button--light w-full"
|
||||
class="text-white text-left text-sm mt-2"
|
||||
data-action="datepicker#reset">
|
||||
zurücksetzen
|
||||
</button>
|
||||
@@ -79,17 +67,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 p-4 bg-ep-primary-light text-white"
|
||||
<div class="mb-4"
|
||||
data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
|
||||
<button type="button"
|
||||
data-action="click->collapse#toggle"
|
||||
class="flex items-center justify-between w-full">
|
||||
<span class="uppercase font-bold">
|
||||
class="flex items-center justify-between w-full bg-brand-gradient p-4">
|
||||
<svg class="w-6 h-6 text-white mr-2">
|
||||
<use href="#icon-concept"></use>
|
||||
</svg>
|
||||
<span class="flex-1 uppercase font-bold text-white text-left">
|
||||
Reisekonzepte
|
||||
</span>
|
||||
<svg class="w-6 h-6 text-white transform"
|
||||
@@ -98,16 +85,16 @@
|
||||
</svg>
|
||||
</button>
|
||||
<div data-collapse-target="container"
|
||||
class="pt-2">
|
||||
class="p-4 border-t border-overlay-white bg-brand-gradient">
|
||||
<ul class="mb-0 p-0 space-y-2">
|
||||
<f:for each="{filterOptions.concepts}" as="concept">
|
||||
<li>
|
||||
<label>
|
||||
<label class="flex items-center">
|
||||
<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"
|
||||
data="{action: '{stimulusController}#filter'}"
|
||||
value="{concept.uid}"/>
|
||||
<span class="inline-block py-1 px-2 bg-concept-{concept.code} text-white">
|
||||
<span class="block w-full py-1 px-2 bg-concept-{concept.code} text-white rounded">
|
||||
{concept.name}
|
||||
</span>
|
||||
</label>
|
||||
@@ -117,7 +104,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 divide-y">
|
||||
<div class="px-4 divide-y py-2 px-4 bg-white">
|
||||
|
||||
<div class="py-2"
|
||||
data-controller="collapse"
|
||||
@@ -134,7 +121,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
<div data-collapse-target="container">
|
||||
<ul class="mb-0 p-0 pt-2">
|
||||
<ul class="mb-0 p-0 pt-4">
|
||||
<f:for each="{filterOptions.destinations}" as="destination">
|
||||
<li class="relative border-b last:border-0 mb-2">
|
||||
<label class="flex items-start">
|
||||
@@ -150,7 +137,7 @@
|
||||
</svg>
|
||||
</label>
|
||||
<f:if condition="{destination.regions}">
|
||||
<ul class="py-2 space-y-1">
|
||||
<ul class="py-2 space-y-2">
|
||||
<f:for each="{destination.regions}" as="region">
|
||||
<li>
|
||||
<label class="flex items-start">
|
||||
@@ -187,7 +174,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
<div data-collapse-target="container">
|
||||
<ul class="mb-0 p-0 pt-2 space-y-1">
|
||||
<ul class="mb-0 p-0 pt-4 space-y-2">
|
||||
<f:for each="{filterOptions.priceRanges}" as="range">
|
||||
<li>
|
||||
<label class="flex items-start">
|
||||
@@ -249,7 +236,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
<div data-collapse-target="container">
|
||||
<ul class="mb-0 p-0 pt-2 space-y-1">
|
||||
<ul class="mb-0 p-0 pt-4 space-y-2">
|
||||
<f:for each="{filterOptions.hotelTypes}" as="type">
|
||||
<li>
|
||||
<label class="flex items-start">
|
||||
@@ -282,7 +269,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
<div data-collapse-target="container">
|
||||
<ul class="mb-0 p-0 pt-2 space-y-1">
|
||||
<ul class="mb-0 p-0 pt-4 space-y-2">
|
||||
<f:for each="{filterOptions.boardTypes}" as="type">
|
||||
<f:if condition="{type.label}">
|
||||
<li>
|
||||
@@ -325,7 +312,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
<div data-collapse-target="container">
|
||||
<ul class="mb-0 p-0 p-0 pt-2 space-y-1">
|
||||
<ul class="mb-0 p-0 p-0 pt-4 space-y-2">
|
||||
<f:for each="{filterOptions.roomTypes}" as="type">
|
||||
<li>
|
||||
<label class="flex items-start">
|
||||
@@ -359,7 +346,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
<div data-collapse-target="container">
|
||||
<ul class="mb-0 p-0 pt-2 space-y-1">
|
||||
<ul class="mb-0 p-0 pt-4 space-y-2">
|
||||
<li>
|
||||
<label class="flex items-start">
|
||||
<f:form.checkbox class="w-5 h-5 border-ep-primary-light ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<div class="grid grid-cols-3 gap-8">
|
||||
<div class="col-span-3 lg:col-span-1 relative">
|
||||
<div class="hidden lg:block bg-white p-4">
|
||||
<div class="hidden lg:block">
|
||||
<h3 class="headline headline--underlined mb-4">
|
||||
Filter
|
||||
</h3>
|
||||
@@ -24,6 +24,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-3 lg:col-span-2 relative">
|
||||
<h3 class="headline headline--underlined mb-4">
|
||||
Suchergebnis
|
||||
</h3>
|
||||
<f:render partial="Search/Result" arguments="{_all}"/>
|
||||
</div>
|
||||
<f:render partial="Search/MobileSearch" arguments="{_all}"/>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="bg-ep-primary-light text-white p-4 mb-4">
|
||||
<div class="text-white p-4 mb-4 {f:if(condition: '{meta.organic} && {meta.total} > 0', then: 'bg-green-600', else: 'bg-red-600')}">
|
||||
Deine Suche
|
||||
<f:if condition="{meta.organic}">
|
||||
<f:then>
|
||||
@@ -24,12 +24,11 @@
|
||||
</f:if>
|
||||
<f:for each="{searchResult}" as="section">
|
||||
<div id="concept-{section.concept.uid}">
|
||||
<h2 class="headline headline--secondary headline--underlined">
|
||||
<h4 class="headline headline--tertiary headline--underlined">
|
||||
{section.concept.name}
|
||||
</h2>
|
||||
</h4>
|
||||
<div class="flex flex-col space-y-4 md:space-y-8 mb-8">
|
||||
<f:for each="{section.items}" as="item">
|
||||
|
||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
||||
concept: section.concept,
|
||||
hotel: item.hotel,
|
||||
@@ -48,7 +47,6 @@
|
||||
landscape: 1,
|
||||
referringPageUri: referringPageUri
|
||||
}"/>
|
||||
|
||||
</f:for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</f:else>
|
||||
</f:if>
|
||||
data-searchbar-target="container">
|
||||
<div class="bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark">
|
||||
<div class="bg-brand-gradient">
|
||||
<div class="reduced:max-w-screen-xl reduced:mx-auto reduced:px-4 flex flex-col reduced:flex-row reduced:items-center">
|
||||
<div class="flex items-start justify-between reduced:flex-1 pt-8 px-8 reduced:px-0 reduced:py-4">
|
||||
|
||||
|
||||
@@ -118,6 +118,7 @@ module.exports = {
|
||||
},
|
||||
backgroundImage: {
|
||||
'badge-gradient': 'linear-gradient(120deg, rgba(150,1,103,1) 0%, rgba(158,3,106,1) 40%, rgba(250,26,140,1) 100%)',
|
||||
'brand-gradient': 'linear-gradient(to top right, #009fff, #165883, #18527b)',
|
||||
},
|
||||
height: {
|
||||
'128': '32rem',
|
||||
|
||||
Reference in New Issue
Block a user