From 239c61095ad903b3ab3d1297a30285977d8a08e9 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 25 Jul 2024 14:08:32 +0530
Subject: [PATCH] fix: Show add/import/export buttons in mobile view (#9761)

---
 .../dashboard/contacts/components/Header.vue  | 235 +++++++++---------
 tailwind.config.js                            |   8 +
 2 files changed, 121 insertions(+), 122 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index cc992b43c..583ce5c6d 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -3,114 +3,120 @@
     class="bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800"
   >
     <div class="flex justify-between w-full px-4 py-2">
-      <div class="flex items-center justify-center max-w-full min-w-[6.25rem]">
-        <woot-sidemenu-icon />
-        <h1
-          class="m-0 mx-2 my-0 overflow-hidden text-xl text-slate-900 dark:text-slate-100 whitespace-nowrap text-ellipsis"
-        >
-          {{ headerTitle }}
-        </h1>
-      </div>
-      <div class="flex gap-2">
-        <div
-          class="max-w-[400px] min-w-[150px] flex items-center relative mx-2 search-wrap"
-        >
-          <div class="flex items-center absolute h-full left-2.5">
-            <fluent-icon
-              icon="search"
-              class="h-5 text-sm leading-9 text-slate-700 dark:text-slate-200"
-            />
-          </div>
-          <input
-            type="text"
-            :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
-            class="contact-search border-slate-100 dark:border-slate-600"
-            :value="searchQuery"
-            @keyup.enter="submitSearch"
-            @input="inputSearch"
-          />
-          <woot-button
-            :is-loading="false"
-            class="clear"
-            :class-names="searchButtonClass"
-            @click="submitSearch"
-          >
-            {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
-          </woot-button>
-        </div>
-        <div v-if="hasActiveSegments" class="flex gap-2">
-          <woot-button
-            class="clear"
-            color-scheme="secondary"
-            icon="edit"
-            @click="onToggleEditSegmentsModal"
-          >
-            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
-          </woot-button>
-          <woot-button
-            class="clear"
-            color-scheme="alert"
-            icon="delete"
-            @click="onToggleDeleteSegmentsModal"
-          >
-            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
-          </woot-button>
-        </div>
-        <div v-if="!hasActiveSegments" class="relative">
+      <div class="flex flex-col items-center w-full gap-2 md:flex-row">
+        <div class="flex justify-between w-full gap-2">
           <div
-            v-if="hasAppliedFilters"
-            class="absolute w-2 h-2 rounded-full top-1 right-3 bg-slate-500 dark:bg-slate-500"
-          />
-          <woot-button
-            class="clear"
-            color-scheme="secondary"
-            data-testid="create-new-contact"
-            icon="filter"
-            @click="toggleFilter"
+            class="flex items-center justify-center max-w-full min-w-[6.25rem]"
           >
-            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
+            <woot-sidemenu-icon />
+            <h1
+              class="m-0 mx-2 my-0 overflow-hidden text-xl text-slate-900 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+            >
+              {{ headerTitle }}
+            </h1>
+          </div>
+          <div
+            class="max-w-[400px] min-w-[100px] flex items-center relative mx-2"
+          >
+            <div class="flex items-center absolute h-full left-2.5">
+              <fluent-icon
+                icon="search"
+                class="h-5 text-sm leading-9 text-slate-700 dark:text-slate-200"
+              />
+            </div>
+            <input
+              type="text"
+              :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
+              class="!pl-9 !pr-[3.75rem] !text-sm !w-full !h-[2.375rem] !m-0 border-slate-100 dark:border-slate-600"
+              :value="searchQuery"
+              @keyup.enter="submitSearch"
+              @input="inputSearch"
+            />
+            <woot-button
+              :is-loading="false"
+              class="absolute h-8 px-2 py-0 ml-2 transition-transform duration-100 ease-linear clear right-1"
+              :class-names="searchButtonClass"
+              @click="submitSearch"
+            >
+              {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
+            </woot-button>
+          </div>
+        </div>
+        <div class="flex gap-1">
+          <div v-if="hasActiveSegments" class="flex gap-2">
+            <woot-button
+              class="clear [&>span]:hidden xs:[&>span]:block"
+              color-scheme="secondary"
+              icon="edit"
+              @click="onToggleEditSegmentsModal"
+            >
+              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
+            </woot-button>
+            <woot-button
+              class="clear [&>span]:hidden xs:[&>span]:block"
+              color-scheme="alert"
+              icon="delete"
+              @click="onToggleDeleteSegmentsModal"
+            >
+              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
+            </woot-button>
+          </div>
+          <div v-if="!hasActiveSegments" class="relative">
+            <div
+              v-if="hasAppliedFilters"
+              class="absolute w-2 h-2 rounded-full top-1 right-3 bg-slate-500 dark:bg-slate-500"
+            />
+            <woot-button
+              class="clear [&>span]:hidden xs:[&>span]:block"
+              color-scheme="secondary"
+              data-testid="create-new-contact"
+              icon="filter"
+              @click="toggleFilter"
+            >
+              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
+            </woot-button>
+          </div>
+
+          <woot-button
+            v-if="hasAppliedFilters && !hasActiveSegments"
+            class="clear [&>span]:hidden xs:[&>span]:block"
+            color-scheme="alert"
+            variant="clear"
+            icon="save"
+            @click="onToggleSegmentsModal"
+          >
+            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
+          </woot-button>
+          <woot-button
+            class="clear [&>span]:hidden xs:[&>span]:block"
+            color-scheme="success"
+            icon="person-add"
+            data-testid="create-new-contact"
+            @click="toggleCreate"
+          >
+            {{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
+          </woot-button>
+
+          <woot-button
+            v-if="isAdmin"
+            color-scheme="info"
+            icon="upload"
+            class="clear [&>span]:hidden xs:[&>span]:block"
+            @click="toggleImport"
+          >
+            {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
+          </woot-button>
+
+          <woot-button
+            v-if="isAdmin"
+            color-scheme="info"
+            icon="download"
+            class="clear [&>span]:hidden xs:[&>span]:block"
+            @click="submitExport"
+          >
+            {{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
           </woot-button>
         </div>
-
-        <woot-button
-          v-if="hasAppliedFilters && !hasActiveSegments"
-          class="clear"
-          color-scheme="alert"
-          variant="clear"
-          icon="save"
-          @click="onToggleSegmentsModal"
-        >
-          {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
-        </woot-button>
-        <woot-button
-          class="clear"
-          color-scheme="success"
-          icon="person-add"
-          data-testid="create-new-contact"
-          @click="toggleCreate"
-        >
-          {{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
-        </woot-button>
-
-        <woot-button
-          v-if="isAdmin"
-          color-scheme="info"
-          icon="upload"
-          class="clear"
-          @click="toggleImport"
-        >
-          {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
-        </woot-button>
-
-        <woot-button
-          v-if="isAdmin"
-          color-scheme="info"
-          icon="download"
-          class="clear"
-          @click="submitExport"
-        >
-          {{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
-        </woot-button>
       </div>
     </div>
     <woot-confirm-modal
@@ -156,7 +162,9 @@ export default {
   },
   computed: {
     searchButtonClass() {
-      return this.searchQuery !== '' ? 'show' : '';
+      return this.searchQuery !== ''
+        ? 'opacity-100 translate-x-0 visible'
+        : '-translate-x-px opacity-0 invisible';
     },
     ...mapGetters({
       getAppliedContactFilters: 'contacts/getAppliedContactFilters',
@@ -209,20 +217,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.search-wrap {
-  .contact-search {
-    @apply pl-9 pr-[3.75rem] text-sm w-full h-[2.375rem] m-0;
-  }
-
-  .button {
-    transition: transform 100ms linear;
-    @apply ml-2 h-8 right-1 absolute py-0 px-2 opacity-0 -translate-x-px invisible;
-  }
-
-  .button.show {
-    @apply opacity-100 translate-x-0 visible;
-  }
-}
-</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 6600af6a4..f4b0793f6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,14 @@ module.exports = {
         interDisplay: ['Inter Display', ...defaultTheme.fontFamily.sans],
       },
     },
+    screens: {
+      xs: '480px',
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+    },
     fontSize: {
       ...defaultTheme.fontSize,
       xxs: '0.625rem',