From c402dfe5e70ef1f221e43b1f42697552c8f5a020 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Fri, 7 Oct 2022 10:47:41 +0300
Subject: [PATCH] responsive control for search bar

---
 public/css/app.css                            | 16 ++++++++
 .../assets/js/components/AkauntingSearch.vue  | 40 ++++++++++---------
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 0bbde2d20d4..b244363aead 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -49922,6 +49922,10 @@ body{
     right: 6rem;
   }
 
+  .lg\:top-2{
+    top: 0.5rem;
+  }
+
   .lg\:col-span-5{
     grid-column: span 5 / span 5;
   }
@@ -49998,6 +50002,14 @@ body{
     height: 1rem;
   }
 
+  .lg\:h-12{
+    height: 3rem;
+  }
+
+  .lg\:h-auto{
+    height: auto;
+  }
+
   .lg\:w-1\/2{
     width: 50%;
   }
@@ -50086,6 +50098,10 @@ body{
     width: 75%;
   }
 
+  .lg\:w-auto{
+    width: auto;
+  }
+
   .lg\:max-w-7xl{
     max-width: 80rem;
   }
diff --git a/resources/assets/js/components/AkauntingSearch.vue b/resources/assets/js/components/AkauntingSearch.vue
index da79705f07a..dfdd1400049 100644
--- a/resources/assets/js/components/AkauntingSearch.vue
+++ b/resources/assets/js/components/AkauntingSearch.vue
@@ -1,37 +1,39 @@
 <template>
     <div
         :id="'search-field-' + _uid"
-        class="h-12 my-5 searh-field flex border-b transition-all js-search"
+        class="lg:h-12 my-5 searh-field flex flex-col lg:flex-row border-b transition-all js-search"
         :class="input_focus ? 'border-gray-500' : 'border-gray-300'"
     >
-        <div class="tags-group group items-center" style="display:contents;" v-for="(filter, index) in filtered" :index="index">
-            <span v-if="filter.option" class="flex items-center bg-purple-lighter text-black border-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-option">
-                {{ filter.option }}
+        <div class="w-full lg:w-auto flex overflow-x-scroll large-overflow-unset" :class="filtered.length ? 'h-12 lg:h-auto' : ''">
+            <div class="tags-group group items-center" style="display:contents;" v-for="(filter, index) in filtered" :index="index">
+                <span v-if="filter.option" class="flex items-center bg-purple-lighter text-black border-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-option">
+                    {{ filter.option }}
 
-                <i v-if="!filter.operator && !filter.value" class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close" style="font-size: 16px;" @click="onFilterDelete(index)"></i>
-            </span>
+                    <i v-if="!filter.operator && !filter.value" class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close" style="font-size: 16px;" @click="onFilterDelete(index)"></i>
+                </span>
 
-            <span v-if="filter.operator" class="flex items-center bg-purple-lighter text-black border-2 border-body border-l border-r border-t-0 border-b-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-operator" style="margin-left:0; margin-right:0;">
-                <span v-if="filter.operator == '='" class="material-icons text-2xl">drag_handle</span>
-                <span v-else-if="filter.operator == '><'" class="material-icons text-2xl transform rotate-90">height</span>
+                <span v-if="filter.operator" class="flex items-center bg-purple-lighter text-black border-2 border-body border-l border-r border-t-0 border-b-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-operator" style="margin-left:0; margin-right:0;">
+                    <span v-if="filter.operator == '='" class="material-icons text-2xl">drag_handle</span>
+                    <span v-else-if="filter.operator == '><'" class="material-icons text-2xl transform rotate-90">height</span>
 
-                <img v-else :src="not_equal_image" class="w-5 h-5 object-cover block" />
+                    <img v-else :src="not_equal_image" class="w-5 h-5 object-cover block" />
 
-                <i v-if="!filter.value" class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close " style="font-size: 16px;" @click="onFilterDelete(index)"></i>
-            </span>
+                    <i v-if="!filter.value" class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close " style="font-size: 16px;" @click="onFilterDelete(index)"></i>
+                </span>
 
-            <span v-if="filter.value" class="flex items-center bg-purple-lighter text-black border-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small  el-tag-value">
-                {{ filter.value }}
+                <span v-if="filter.value" class="flex items-center bg-purple-lighter text-black border-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small  el-tag-value">
+                    {{ filter.value }}
 
-                <i class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close " style="font-size: 16px;" @click="onFilterDelete(index)"></i>
-            </span>
+                    <i class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close " style="font-size: 16px;" @click="onFilterDelete(index)"></i>
+                </span>
+            </div>
         </div>
 
         <div class="relative w-full h-full flex">
             <input
             v-if="!show_date"
             type="text"
-            class="w-full bg-transparent text-black text-sm border-0 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100"
+            class="w-full h-12 lg:h-auto bg-transparent text-black text-sm border-0 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100"
             :class="!show_icon ? 'px-4' : 'px-10'"
             :placeholder="dynamicPlaceholder"
             :ref="'input-search-field-' + _uid"
@@ -47,7 +49,7 @@
                 @on-open="onInputFocus"
                 @blur="onBlur"
                 :config="dateConfig"
-                class="w-full bg-transparent text-black text-sm border-0 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100 datepicker"
+                class="w-full h-12 lg:h-auto bg-transparent text-black text-sm border-0 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100 datepicker"
                 :class="!show_icon ? 'px-4' : 'px-10'"
                 :placeholder="dynamicPlaceholder"
                 :ref="'input-search-date-field-' + _uid"
@@ -65,7 +67,7 @@
                     search
                 </span>
 
-            <button type="button" class="absolute ltr:right-0 rtl:left-0 top-2 clear" v-if="show_close_icon" @click="onSearchAndFilterClear">
+            <button type="button" class="absolute ltr:right-0 rtl:left-0 top-4 lg:top-2 clear" v-if="show_close_icon" @click="onSearchAndFilterClear">
                 <span class="material-icons text-sm">close</span>
             </button>