From ac9fb0501e48952fb8eb6b69ad8f3d3fe742d01b Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 27 Aug 2024 11:47:01 +0700
Subject: [PATCH] refactor: responsive

---
 src/components/01_branch-management/FormBank.vue       |  2 +-
 .../01_branch-management/FormBranchContact.vue         |  8 ++++----
 .../01_branch-management/FormBranchInformation.vue     | 10 +++++-----
 .../04_product-service/WorkManagementComponent.vue     | 10 +++++++---
 src/components/DrawerInfo.vue                          |  2 +-
 5 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/01_branch-management/FormBank.vue b/src/components/01_branch-management/FormBank.vue
index a88a4d67..8d207d09 100644
--- a/src/components/01_branch-management/FormBank.vue
+++ b/src/components/01_branch-management/FormBank.vue
@@ -204,7 +204,7 @@ watch(
       <q-input
         outlined
         for="input-bankbook"
-        class="col-4"
+        class="col-md-4 col-12"
         lazy-rules="ondemand"
         hide-bottom-space
         :dense="dense"
diff --git a/src/components/01_branch-management/FormBranchContact.vue b/src/components/01_branch-management/FormBranchContact.vue
index dcd72b9e..4ca61c64 100644
--- a/src/components/01_branch-management/FormBranchContact.vue
+++ b/src/components/01_branch-management/FormBranchContact.vue
@@ -58,7 +58,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-12 col-md-4"
+        class="col-6 col-md-4"
         :label="$t('form.telephone')"
         for="input-telephone-no"
         :model-value="readonly ? telephoneNo || '-' : telephoneNo"
@@ -82,7 +82,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-12 col-md-4"
+        class="col-6 col-md-4"
         label="Line ID"
         for="input-line-id"
         :model-value="readonly ? lineId || '-' : lineId"
@@ -95,7 +95,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-12 col-md-4"
+        class="col-6 col-md-4"
         :label="$t('branch.form.contactName')"
         for="input-contact-name"
         :model-value="readonly ? contactName || '-' : contactName"
@@ -110,7 +110,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-12 col-md-4"
+        class="col-6 col-md-4"
         :label="$t('branch.form.contactTelephone')"
         for="input-contact"
         :model-value="readonly ? contact || '-' : contact"
diff --git a/src/components/01_branch-management/FormBranchInformation.vue b/src/components/01_branch-management/FormBranchInformation.vue
index 0a2fd7e5..2561ec62 100644
--- a/src/components/01_branch-management/FormBranchInformation.vue
+++ b/src/components/01_branch-management/FormBranchInformation.vue
@@ -46,7 +46,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           :disable="view && !readonly"
           :readonly="readonly"
           hide-bottom-space
-          class="col"
+          class="col-md col-5"
           :label="$t('branch.form.abbrev')"
           for="input-abbreviation"
           :model-value="view ? formatCode(abbreviation, 'code') : abbreviation"
@@ -64,7 +64,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           readonly
           :disable="!readonly"
           hide-bottom-space
-          class="col"
+          class="col-md col-7"
           :label="$t('branch.form.code')"
           for="input-code"
           :model-value="view ? formatCode(code, 'number') : code"
@@ -93,7 +93,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-5"
+          class="col-md-5 col-12"
           :label="$t('branch.form.taxNo')"
           v-model="taxNo"
           :rules="[
@@ -113,7 +113,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-6"
+          class="col-md-6 col-12"
           :label="
             typeBranch === 'headOffice'
               ? $t('branch.form.headofficeName')
@@ -130,7 +130,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-6"
+          class="col-md-6 col-12"
           v-model="nameEN"
           :label="
             typeBranch === 'headOffice'
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index cfe57ad4..eaf1be72 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -304,7 +304,7 @@ defineEmits<{
 
                   <q-avatar
                     size="md"
-                    class="q-mx-lg"
+                    :class="$q.screen.gt.xs ? 'q-mx-lg' : 'q-mr-lg'"
                     style="background-color: var(--surface-tab)"
                   >
                     {{ index + 1 }}
@@ -348,9 +348,13 @@ defineEmits<{
                   </div>
                 </div>
 
-                <div class="row justify-end text-right col-md-6 col-12 q-pr-sm">
+                <div
+                  class="row justify-end text-right col-md-6 col-12"
+                  :class="$q.screen.xs ? 'q-mt-sm text-caption' : 'q-pr-sm'"
+                >
                   <span
-                    class="col-12 q-col-gutter-md row"
+                    class="col-12 row"
+                    :class="{ 'q-col-gutter-md': $q.screen.gt.xs }"
                     style="color: var(--teal-9)"
                   >
                     <span
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 621ffc47..d50e857f 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -102,7 +102,7 @@ function reset() {
 
             <text
               v-if="!!statusBranch"
-              class="branch-badge branch-card__badge"
+              class="branch-badge branch-card__badge q-ml-sm"
               :class="{
                 'branch-card__inactive ': statusBranch === 'INACTIVE',
               }"