Improve searchbar layout
This commit is contained in:
Björn Fromme
+2
-3
@@ -1,8 +1,7 @@
|
||||
.searchbar {
|
||||
@apply hidden relative lg:block lg:container lg:px-0 -mt-20 mb-8;
|
||||
@apply bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark;
|
||||
@apply hidden relative lg:block lg:container -mt-20 mb-8;
|
||||
|
||||
&.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">
|
||||
<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">
|
||||
<ul class="m-0 p-0 list-none">
|
||||
<li>
|
||||
|
||||
@@ -24,226 +24,228 @@
|
||||
</f:else>
|
||||
</f:if>
|
||||
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="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">
|
||||
<div class="bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark">
|
||||
<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"
|
||||
data-controller="collapse datepicker"
|
||||
data-datepicker-date-from-value="{searchParams.dateFrom}"
|
||||
data-datepicker-date-to-value="{searchParams.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">
|
||||
<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"
|
||||
value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
|
||||
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-1"
|
||||
data-controller="collapse datepicker"
|
||||
data-datepicker-date-from-value="{searchParams.dateFrom}"
|
||||
data-datepicker-date-to-value="{searchParams.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">
|
||||
<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"
|
||||
value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
|
||||
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() -> 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">
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<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="grid grid-cols-5 gap-4 border-t py-2 my-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"
|
||||
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>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
</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>
|
||||
<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>
|
||||
</f:form>
|
||||
|
||||
Reference in New Issue
Block a user