From d7337c9e95f8ac89a34b46c6c6693378e37cd40a Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 24 Jul 2024 04:18:30 +0000
Subject: [PATCH] fix: responsive drawer info & form dialog

---
 src/components/02_personnel-management/InfoForm.vue |  9 +++++++--
 src/components/DrawerInfo.vue                       |  6 ++++--
 src/components/FormDialog.vue                       |  6 +++---
 src/components/ProfileUpload.vue                    | 12 +++++++-----
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/02_personnel-management/InfoForm.vue b/src/components/02_personnel-management/InfoForm.vue
index 07faa4a4..42cb0299 100644
--- a/src/components/02_personnel-management/InfoForm.vue
+++ b/src/components/02_personnel-management/InfoForm.vue
@@ -49,14 +49,19 @@ const employeeTab = defineModel<string>('employeeTab');
       </q-tabs>
     </div>
 
-    <div class="row full-width" style="flex: 1">
-      <div class="col-3" v-if="$slots['person-card']">
+    <div
+      class="full-width no-wrap"
+      :class="$q.screen.gt.xs ? 'row' : 'column'"
+      style="flex: 1"
+    >
+      <div class="col-3 q-mb-xs" v-if="$slots['person-card']">
         <slot name="person-card"></slot>
       </div>
       <div
         :class="{
           'col-9': $slots['person-card'],
           'col-12': !$slots['person-card'],
+          'q-ml-md': $q.screen.xs,
         }"
         class="relative-position"
       >
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 750ec435..477609eb 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import AppBox from './app/AppBox.vue';
 
 withDefaults(
@@ -24,6 +24,8 @@ withDefaults(
   },
 );
 
+const windowSize = ref(window.innerWidth);
+
 const drawerOpen = defineModel<boolean>('drawerOpen', {
   default: false,
 });
@@ -50,7 +52,7 @@ function reset() {
               : 1200
             : 1000
           : 700
-        : 510
+        : windowSize
     "
     v-model="drawerOpen"
     behavior="mobile"
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 28097805..bbc580da 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -204,8 +204,8 @@ const currentTab = defineModel<string>('currentTab');
             <div
               v-if="!noAppBox"
               bordered
-              class="column full-height surface-1 bordered rounded scroll"
-              :class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'} ${!noPaddingTab && 'q-pt-lg q-pl-lg'}`"
+              class="column surface-1 bordered rounded"
+              :class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'} ${!noPaddingTab && 'q-pt-lg q-pl-lg'} ${$q.screen.gt.xs && 'full-height scroll'}`"
               style="padding-right: 0; padding-bottom: 16px"
             >
               <div
@@ -237,7 +237,7 @@ const currentTab = defineModel<string>('currentTab');
                 <slot name="qr-code"></slot>
                 <slot name="location"></slot>
                 <slot name="by-type"></slot>
-                <div class="col-12"></div>
+                <div v-if="$q.screen.gt.xs" class="col-12"></div>
               </div>
             </div>
 
diff --git a/src/components/ProfileUpload.vue b/src/components/ProfileUpload.vue
index ea08be4c..97e60b53 100644
--- a/src/components/ProfileUpload.vue
+++ b/src/components/ProfileUpload.vue
@@ -25,7 +25,10 @@ defineEmits<{
 
 <template>
   <div class="text-center">
-    <div class="upload-img-preview">
+    <div
+      class="upload-img-preview"
+      :style="$q.screen.lt.md ? 'height: 200px' : 'height: 12vh'"
+    >
       <q-img
         v-if="urlProfile"
         :src="urlProfile"
@@ -44,7 +47,7 @@ defineEmits<{
       <q-icon
         v-else
         name="mdi-account full-height"
-        size="3vw"
+        size="4rem"
         style="color: var(--border-color)"
       />
     </div>
@@ -102,8 +105,8 @@ defineEmits<{
       :class="{ dark: $q.dark.isActive }"
       @click="$emit('inputFile')"
     />
-    <q-separator class="col-12 q-my-md" />
-    <div class="text-left q-pt-md" v-if="hideToggle">
+    <q-separator class="col-12 q-my-lg" />
+    <div class="text-left q-pb-md" v-if="hideToggle">
       <q-toggle
         id="toggle-status"
         dense
@@ -123,7 +126,6 @@ defineEmits<{
 .upload-img-preview {
   border: 1px solid var(--border-color);
   border-radius: var(--radius-2);
-  height: 12vw;
   background-color: var(--surface-1);
 }