From 912e2c7e5f5bdc1bbdba0ab47f72b4b637d033d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 1 Sep 2021 18:24:01 +0200
Subject: [PATCH] Improve searchbar layout

---
 .../Assets/scss/components/_searchbar.scss    |   5 +-
 .../Resources/Private/Partials/Mainnav.html   |   2 +-
 .../Private/Templates/Searchbar/Index.html    | 394 +++++++++---------
 3 files changed, 201 insertions(+), 200 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss
index 6e1f3cf5..cbac0052 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss
@@ -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;
     }
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
index f1878685..54223d8a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
@@ -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>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
index 742fc206..2d288629 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
@@ -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)}">
+                                                        &gt; 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)}">
-                                                    &gt; 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>