Improve searchbar layout
This commit is contained in:
Björn Fromme
+2
-3
@@ -1,8 +1,7 @@
|
|||||||
.searchbar {
|
.searchbar {
|
||||||
@apply hidden relative lg:block lg:container lg:px-0 -mt-20 mb-8;
|
@apply hidden relative lg:block lg:container -mt-20 mb-8;
|
||||||
@apply bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark;
|
|
||||||
|
|
||||||
&.sticky {
|
&.sticky {
|
||||||
@apply fixed z-50 top-0 left-0 mt-8 mb-0 inset-x-0 max-w-full shadow-lg;
|
@apply fixed z-50 top-0 left-0 mt-8 mb-0 inset-x-0 max-w-full px-0 shadow-lg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -74,7 +74,7 @@
|
|||||||
|
|
||||||
<f:section name="SecondLevel">
|
<f:section name="SecondLevel">
|
||||||
<div class="absolute top-100 left-0 inset-x-0 pt-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
|
<div class="absolute top-100 left-0 inset-x-0 pt-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
|
||||||
<div class="bg-white grid grid-cols-3 lg:grid-cols-4 gap-8 p-4 shadow-lg">
|
<div class="bg-white grid grid-cols-3 lg:grid-cols-4 gap-8 p-4 shadow-lg rounded">
|
||||||
<f:for each="{topitem.children}" as="subitem">
|
<f:for each="{topitem.children}" as="subitem">
|
||||||
<ul class="m-0 p-0 list-none">
|
<ul class="m-0 p-0 list-none">
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
@@ -24,226 +24,228 @@
|
|||||||
</f:else>
|
</f:else>
|
||||||
</f:if>
|
</f:if>
|
||||||
data-searchbar-target="container">
|
data-searchbar-target="container">
|
||||||
<div class="sticky:max-w-screen-xl sticky:mx-auto flex flex-col sticky:flex-row sticky:items-center">
|
<div class="bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark">
|
||||||
<div class="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">
|
<div class="sticky:max-w-screen-xl sticky:mx-auto flex flex-col sticky:flex-row sticky:items-center">
|
||||||
|
<div class="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">
|
||||||
|
|
||||||
<div class="flex-1"
|
<div class="flex-1"
|
||||||
data-controller="collapse datepicker"
|
data-controller="collapse datepicker"
|
||||||
data-datepicker-date-from-value="{searchParams.dateFrom}"
|
data-datepicker-date-from-value="{searchParams.dateFrom}"
|
||||||
data-datepicker-date-to-value="{searchParams.dateTo}"
|
data-datepicker-date-to-value="{searchParams.dateTo}"
|
||||||
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"
|
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||||
data-collapse-collapsed-value="true">
|
data-collapse-collapsed-value="true">
|
||||||
<div class="relative border-b border-r border-white mr-8">
|
<div class="relative border-b border-r border-white mr-8">
|
||||||
<input type="text"
|
<input type="text"
|
||||||
data-action="click->collapse#toggle"
|
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"
|
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"
|
placeholder="Zeitraum"
|
||||||
value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
|
value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
|
||||||
data-searchbar-target="dateRangeLabel"/>
|
data-searchbar-target="dateRangeLabel"/>
|
||||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-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">
|
data-action="click->collapse#toggle">
|
||||||
<use href="#icon-calendar"></use>
|
<use href="#icon-calendar"></use>
|
||||||
</svg>
|
</svg>
|
||||||
<div
|
<div
|
||||||
class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
|
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">
|
data-collapse-target="container">
|
||||||
<div class="flex justify-between divide-x divide-gray-200">
|
<div class="flex justify-between divide-x divide-gray-200">
|
||||||
<div class="pr-2">
|
<div class="pr-2">
|
||||||
<input type="hidden"
|
<input type="hidden"
|
||||||
data-datepicker-target="field">
|
data-datepicker-target="field">
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 flex flex-col justify-between pl-2">
|
<div class="flex-1 flex flex-col justify-between pl-2">
|
||||||
<f:if condition="{settings.datePickerPresets}">
|
<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">
|
<div class="flex flex-col space-y-4">
|
||||||
<f:for each="{settings.datePickerPresets}" as="preset">
|
<button class="button button--small button--light w-full"
|
||||||
<button class="button button--small button--light w-full"
|
data-action="collapse#close">
|
||||||
data-preset='{preset -> f:format.json() -> f:format.raw()}'
|
schließen
|
||||||
data-action="datepicker#selectPreset">
|
</button>
|
||||||
<span>
|
<button class="button button--small button--light w-full"
|
||||||
{preset.label}
|
data-action="datepicker#reset">
|
||||||
</span>
|
zurücksetzen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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-2">
|
||||||
|
<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-3 flex flex-col items-start space-y-1">
|
||||||
|
<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>
|
</button>
|
||||||
</f:for>
|
</f:for>
|
||||||
</div>
|
</div>
|
||||||
</f:if>
|
</f:for>
|
||||||
<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 class="grid grid-cols-5 gap-4 border-t py-2 my-2">
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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">
|
<div class="col-span-2">
|
||||||
<f:for each="{destination.regions}" as="region">
|
<strong>
|
||||||
|
Konzept
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-3 flex flex-col items-start space-y-1">
|
||||||
|
<f:for each="{filterOptions.concepts}" as="concept">
|
||||||
<button data-action="searchbar#setDestination"
|
<button data-action="searchbar#setDestination"
|
||||||
data-option-uid="{region.uid}"
|
data-option-uid="{concept.uid}"
|
||||||
data-option-type="region"
|
data-option-type="concept"
|
||||||
data-option-label="{region.label}">
|
data-option-label="{concept.name}">
|
||||||
{region.label}
|
{concept.name}
|
||||||
</button>
|
</button>
|
||||||
</f:for>
|
</f:for>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
<button class="button button--small"
|
||||||
|
data-action="searchbar#resetDestination">
|
||||||
|
zurücksetzen
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button class="button button--small"
|
|
||||||
data-action="searchbar#resetDestination">
|
|
||||||
zurücksetzen
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-32"
|
<div class="w-32"
|
||||||
data-controller="collapse"
|
data-controller="collapse"
|
||||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||||
data-collapse-collapsed-value="true">
|
data-collapse-collapsed-value="true">
|
||||||
<div class="relative border-r border-b border-white">
|
<div class="relative border-r border-b border-white">
|
||||||
<input type="text"
|
<input type="text"
|
||||||
data-action="click->collapse#toggle"
|
data-action="click->collapse#toggle"
|
||||||
data-searchbar-target="priceRangeLabel"
|
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"
|
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"/>
|
placeholder="Preis"/>
|
||||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-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">
|
data-action="click->collapse#toggle">
|
||||||
<use href="#icon-euro"></use>
|
<use href="#icon-euro"></use>
|
||||||
</svg>
|
</svg>
|
||||||
<div
|
<div
|
||||||
class="hidden absolute z-20 top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll"
|
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">
|
data-collapse-target="container">
|
||||||
<ul class="m-0 p-0">
|
<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">
|
|
||||||
<li>
|
<li>
|
||||||
<button data-action="searchbar#setPriceRange"
|
<button data-action="searchbar#setPriceRange"
|
||||||
data-option-value="{range.uid}"
|
data-option-value=""
|
||||||
data-label-value="{range.formatted}">
|
data-label-value="beliebig">
|
||||||
{range.formatted}
|
beliebig
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
</f:for>
|
<f:for each="{filterOptions.priceRanges}" as="range" iteration="iteration">
|
||||||
</ul>
|
<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>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="hidden sticky:block sticky:ml-4">
|
||||||
|
<svg class="w-8 h-8 text-white">
|
||||||
|
<use href="#icon-chevron-right"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end mt-4 sticky:hidden">
|
||||||
|
<button type="submit" class="w-1/3 text-white uppercase py-2">
|
||||||
|
Detailsuche
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="w-1/3 text-white bg-ep-primary-light uppercase py-2">
|
||||||
|
Alle anzeigen
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="hidden sticky:block sticky:ml-4">
|
|
||||||
<svg class="w-8 h-8 text-white">
|
|
||||||
<use href="#icon-chevron-right"></use>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-end mt-4 sticky:hidden">
|
|
||||||
<button type="submit" class="w-1/3 text-white uppercase py-2">
|
|
||||||
Detailsuche
|
|
||||||
</button>
|
|
||||||
<button type="submit" class="w-1/3 text-white bg-ep-primary-light uppercase py-2">
|
|
||||||
Alle anzeigen
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</f:form>
|
</f:form>
|
||||||
|
|||||||
Reference in New Issue
Block a user