From d9b750c02fc081a8e1603c753fad2e0d3b38eefe Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 24 Aug 2021 12:04:01 +0200
Subject: [PATCH] Fix search box

---
 src/components/custom/FilterDropdown.vue | 220 +++++++++++------------
 src/components/custom/SearchBox.vue      |   4 +-
 src/pages/Blog.vue                       |  11 +-
 src/pages/News.vue                       |  10 +-
 4 files changed, 122 insertions(+), 123 deletions(-)

diff --git a/src/components/custom/FilterDropdown.vue b/src/components/custom/FilterDropdown.vue
index 8a7be9a6a..6d7105e60 100644
--- a/src/components/custom/FilterDropdown.vue
+++ b/src/components/custom/FilterDropdown.vue
@@ -11,131 +11,129 @@
         transition-all transition-500
       "
     >
-      <nav class="inline-flex md:order-2 sm:w-28 px-2 pt-2 pb-4 sm:flex sm:p-0">
-        <ul
-          class="
-            list-none
-            sm:flex
-            justify-left
-            capitalize
-            transition-all transition-500
-          "
-        >
-          <!-- Topics -->
-          <li class="py-1 mx-5">
-            <div class="relative" x-data="{ open: false }">
-              <button
-                @click="setActive(0)"
+      <ul
+        class="
+          list-none
+          m-0
+          sm:flex
+          justify-left
+          capitalize
+          transition-all transition-500
+        "
+      >
+        <!-- Topics -->
+        <li class="py-1 mx-5">
+          <div class="relative" x-data="{ open: false }">
+            <button
+              @click="setActive(0)"
+              class="
+                flex flex-row
+                items-center
+                w-full
+                md:w-auto
+                md:inline
+                md:mt-0
+                md:ml-4
+                animated-link
+              "
+            >
+              <span class="capitalize">{{ topic.replace(/_/g, " ") }}</span>
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                :class="{
+                  'rotate-180': active == 0,
+                  'rotate-0': !active == 0,
+                }"
                 class="
-                  flex flex-row
-                  items-center
-                  w-full
-                  md:w-auto
-                  md:inline
-                  md:mt-0
-                  md:ml-4
-                  animated-link
+                  inline
+                  w-4
+                  h-4
+                  mt-1
+                  ml-1
+                  transition-transform
+                  duration-200
+                  transform
+                  md:-mt-1
                 "
               >
-                <span class="capitalize">{{ topic.replace(/_/g, " ") }}</span>
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  :class="{
-                    'rotate-180': active == 0,
-                    'rotate-0': !active == 0,
-                  }"
-                  class="
-                    inline
-                    w-4
-                    h-4
-                    mt-1
-                    ml-1
-                    transition-transform
-                    duration-200
-                    transform
-                    md:-mt-1
-                  "
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clip-rule="evenodd"
-                  ></path>
-                </svg>
-              </button>
+                <path
+                  fill-rule="evenodd"
+                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </button>
+            <div
+              v-if="active == 0"
+              x-show="open"
+              x-transition:enter="transition ease-out duration-100"
+              x-transition:enter-start="transform opacity-0 scale-95"
+              x-transition:enter-end="transform opacity-100 scale-100"
+              x-transition:leave="transition ease-in duration-75"
+              x-transition:leave-start="transform opacity-100 scale-100"
+              x-transition:leave-end="transform opacity-0 scale-95"
+              class="
+                absolute
+                w-full
+                mt-2
+                origin-top-right
+                rounded-md
+                shadow-lg
+                md:w-48
+                z-30
+              "
+            >
               <div
-                v-if="active == 0"
-                x-show="open"
-                x-transition:enter="transition ease-out duration-100"
-                x-transition:enter-start="transform opacity-0 scale-95"
-                x-transition:enter-end="transform opacity-100 scale-100"
-                x-transition:leave="transition ease-in duration-75"
-                x-transition:leave-start="transform opacity-100 scale-100"
-                x-transition:leave-end="transform opacity-0 scale-95"
+                v-if="open"
                 class="
-                  absolute
-                  w-full
-                  mt-2
-                  origin-top-right
+                  w-64
+                  px-2
+                  py-2
+                  bg-white
                   rounded-md
-                  shadow-lg
-                  md:w-48
-                  z-30
+                  shadow
+                  dark:bg-gray-700
                 "
               >
-                <div
-                  v-if="open"
+                <a
                   class="
-                    w-64
-                    max-h-10
-                    px-2
+                    cursor-pointer
+                    block
+                    px-4
                     py-2
-                    bg-white
-                    rounded-md
-                    shadow
-                    dark:bg-gray-700
+                    mt-2
+                    text-sm
+                    font-semibold
+                    bg-transparent
+                    rounded-lg
+                    dark:bg-transparent
+                    dark:hover:bg-gray-600
+                    dark-:focus:bg-gray-600
+                    dark:focus:text-white
+                    dark:hover:text-white
+                    dark:text-gray-200
+                    md:mt-0
+                    hover:text-gray-900
+                    focus:text-gray-900
+                    hover:bg-gray-200
+                    focus:bg-gray-200
+                    focus:outline-none
+                    focus:shadow-outline
                   "
+                  v-for="topic in topics"
+                  :key="topic"
+                  @click.self="
+                    setTopic(topic);
+                    open = false;
+                  "
+                  >{{ topic.replace(/_/g, " ") }}</a
                 >
-                  <a
-                    class="
-                      cursor-pointer
-                      block
-                      px-4
-                      py-2
-                      mt-2
-                      text-sm
-                      font-semibold
-                      bg-transparent
-                      rounded-lg
-                      dark:bg-transparent
-                      dark:hover:bg-gray-600
-                      dark-:focus:bg-gray-600
-                      dark:focus:text-white
-                      dark:hover:text-white
-                      dark:text-gray-200
-                      md:mt-0
-                      hover:text-gray-900
-                      focus:text-gray-900
-                      hover:bg-gray-200
-                      focus:bg-gray-200
-                      focus:outline-none
-                      focus:shadow-outline
-                    "
-                    v-for="topic in topics"
-                    :key="topic"
-                    @click.self="
-                      setTopic(topic);
-                      open = false;
-                    "
-                    >{{ topic.replace(/_/g, " ") }}</a
-                  >
-                </div>
               </div>
             </div>
-          </li>
-        </ul>
-      </nav>
+          </div>
+        </li>
+      </ul>
     </header>
   </div>
 </template>
diff --git a/src/components/custom/SearchBox.vue b/src/components/custom/SearchBox.vue
index 086d5c80a..fa4e1db80 100644
--- a/src/components/custom/SearchBox.vue
+++ b/src/components/custom/SearchBox.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="inline-flex rounded-full border-grey-light test m-auto lg:m-0">
+  <div class="inline-flex rounded-full border-grey-light test m-auto lg:m-0 mr-5">
     <button>
       <span class="w-auto inline-flex justify-end items-center text-grey p-2">
         <font-awesome :icon="['fas', 'search']" />
       </span>
     </button>
     <input
-      class="rounded mr-4"
+      class="w-full rounded mr-4"
       type="text"
       placeholder="Search"
       :value="value"
diff --git a/src/pages/Blog.vue b/src/pages/Blog.vue
index e64b0b539..8e36491d5 100644
--- a/src/pages/Blog.vue
+++ b/src/pages/Blog.vue
@@ -9,17 +9,14 @@
       :years="years"
       :months="months"
     /> -->
-    <div
-      class="container sm:pxi-0 mx-auto overflow-hidden"
-      :style="{ 'min-height': contentHeight + 'px' }"
-    >
-      <div class="flex flex-wrap my-5">
+    <div class="container sm:pxi-0 mx-auto overflow-hidden">
+      <div class="flex my-5">
         <FilterDropdown
-          class="xs:w-1/2"
+          class="xs:w-2/3"
           @selectedTopic="setTopic"
           :topics="topics"
         />
-        <SearchBox class="xs:w-1/2" v-model="search" />
+        <SearchBox class="xs:w-1/3" v-model="search" />
       </div>
 
       <div v-if="search !== ''">
diff --git a/src/pages/News.vue b/src/pages/News.vue
index 26e6a19b1..820ecd65c 100644
--- a/src/pages/News.vue
+++ b/src/pages/News.vue
@@ -14,9 +14,13 @@
       class="container sm:pxi-0 mx-auto overflow-hidden"
       :style="{ 'min-height': contentHeight + 'px' }"
     >
-      <div class="flex flex-wrap my-5">
-        <FilterDropdown @selectedTopic="setTopic" :topics="topics" />
-        <SearchBox v-model="search" />
+      <div class="flex my-5">
+        <FilterDropdown
+          class="xs:w-2/3"
+          @selectedTopic="setTopic"
+          :topics="topics"
+        />
+        <SearchBox class="xs:w-1/3" v-model="search" />
       </div>
 
       <div v-if="search !== ''">