From 6d383aeecf73d48d2e849e3f1defd48e24450b0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 15 Mar 2022 15:07:26 +0100
Subject: [PATCH] Adjust mobile search styles

---
 .../Resources/Private/Partials/Search/FilterPanel.html | 10 +++++++---
 .../Private/Partials/Search/MobileSearch.html          |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
index 99be4580..bc3c4369 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
@@ -5,6 +5,7 @@
 
     <div class="mb-4"
          data-controller="collapse"
+         data-collapse-from-value="960"
          data-collapse-collapsed-value="{f:if(condition: '{filterSettings.dateFrom} || {filterSettings.dateTo}', then: 'false', else: 'true')}">
         <button type="button"
                 data-action="click->collapse#toggle"
@@ -33,10 +34,13 @@
                  data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}">
                 <div class="mt-2">
                     <div class="flex flex-col">
-                        <div class="pb-2 md:pb-0">
+                        <div class="relative pb-2 md:pb-0">
                             <input type="text"
                                    class="border-px border-white text-white text-xl p-2 w-full bg-transparent focus:border-white focus:ring-0"
                                    data-datepicker-target="field">
+                            <svg class="w-6 h-6 text-white absolute top-0 right-0 transform translate-y-1/2 mr-2">
+                                <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-calendar"></use>
+                            </svg>
                         </div>
                         <f:if condition="{settings.datePickerPresets}">
                             <div class="flex flex-col divide-y divide-overlay-white mt-2">
@@ -101,7 +105,7 @@
         </div>
     </div>
 
-    <div class="px-4 divide-y py-2 px-4 bg-white">
+    <div class="px-4 divide-y py-2 px-4 lg:bg-white">
 
         <div class="py-2"
              data-controller="collapse"
@@ -204,7 +208,7 @@
                 </svg>
             </button>
             <div data-collapse-target="container">
-                <f:form.select class="w-full border-0 focus:ring-0 bg-right mt-2 p-0"
+                <f:form.select class="w-full border-0 focus:ring-0 bg-right bg-transparent text-white lg:bg-white lg:text-gray-800 mt-2 p-0"
                                property="pax"
                                options="{filterOptions.pax}"
                                data="{action: '{stimulusController}#filter'}"/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/MobileSearch.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/MobileSearch.html
index e40de3f2..734a2dbe 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/MobileSearch.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/MobileSearch.html
@@ -21,7 +21,7 @@
             </button>
         </div>
         <div data-mobile-search-target="container"
-             class="h-full w-full overflow-y-scroll p-4 bg-white">
+             class="h-full w-full overflow-y-scroll p-4 bg-ep-primary-dark text-white">
         </div>
         <div class="fixed top-0 left-0 z-20 w-full h-full hidden"
              data-mobile-search-target="loadingIndicator">