fix: 01 form responsive

src/components/01_branch-management/FormBranchContact.vue

@@ -17,14 +17,16 @@ defineProps<{
 </script>
 <template>
   <div class="row col-12">
-    <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
-    <div class="col-9 row q-col-gutter-md">
+    <div class="col-md-3 col-12 app-text-muted q-pb-sm">
+      • {{ $t(`${title}`) }}
+    </div>
+    <div class="col-md-9 col-12 row q-col-gutter-md">
       <q-input
         :dense="dense"
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-5"
+        class="col-md-5 col-12"
         :label="
           typeBranch === 'headOffice'
             ? $t('formDialogInputEmailHq')
@@ -39,7 +41,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-7"
+        class="col-md-7 col-12"
         :label="
           typeBranch === 'headOffice'
             ? $t('formDialogInputTelephoneHq')
@@ -54,7 +56,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-5"
+        class="col-md-5 col-12"
         :label="$t('formDialogInputContactName')"
         v-model="contactName"
         for="input-contact-name"

src/components/01_branch-management/FormBranchInformation.vue

@@ -16,103 +16,110 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
-  <div class="col-9 row q-col-gutter-md">
-    <q-input
-      :dense="dense"
-      outlined
-      readonly
-      hide-bottom-space
-      :class="{
-        'col-6': typeBranch == 'headOffice',
-        'col-4': typeBranch != 'headOffice',
-      }"
-      :label="$t('formDialogInputCode')"
-      v-model="code"
-      for="input-code"
-    />
+  <div class="row col-12">
+    <div class="col-md-3 col-12 app-text-muted q-pb-sm">
+      • {{ $t(`${title}`) }}
+    </div>
+    <div class="col-md-9 col-12 row q-col-gutter-md">
+      <q-input
+        :dense="dense"
+        outlined
+        readonly
+        hide-bottom-space
+        :class="{
+          'col-12': $q.screen.xs,
+          'col-6': typeBranch == 'headOffice',
+          'col-4': typeBranch != 'headOffice',
+        }"
+        :label="$t('formDialogInputCode')"
+        v-model="code"
+        for="input-code"
+      />
 
-    <q-input
-      v-if="typeBranch !== 'headOffice'"
-      :dense="dense"
-      outlined
-      readonly
-      hide-bottom-space
-      :class="{
-        'col-6': typeBranch == 'headOffice',
-        'col-4': typeBranch != 'headOffice',
-      }"
-      :label="$t('branchLabelCode')"
-      v-model="codeSubBranch"
-      for="input-code-sub-branch"
-    />
+      <q-input
+        v-if="typeBranch !== 'headOffice'"
+        :dense="dense"
+        outlined
+        readonly
+        hide-bottom-space
+        :class="{
+          'col-12': $q.screen.xs,
+          'col-6': typeBranch == 'headOffice',
+          'col-4': typeBranch != 'headOffice',
+        }"
+        :label="$t('branchLabelCode')"
+        v-model="codeSubBranch"
+        for="input-code-sub-branch"
+      />
 
-    <q-input
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      :class="{
-        'col-6': typeBranch === 'headOffice',
-        'col-4': typeBranch !== 'headOffice',
-      }"
-      :label="$t('formDialogInputTaxNo')"
-      v-model="taxNo"
-      lazy-rules
-      :rules="[
-        (val) =>
-          (val && val.length === 13 && /[0-9]+/.test(val)) ||
-          $t('formDialogInputTaxNoValidate'),
-      ]"
-      for="input-tax-no"
-    />
+      <q-input
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        :class="{
+          'col-12': $q.screen.xs,
+          'col-6': typeBranch === 'headOffice',
+          'col-4': typeBranch !== 'headOffice',
+        }"
+        :label="$t('formDialogInputTaxNo')"
+        v-model="taxNo"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length === 13 && /[0-9]+/.test(val)) ||
+            $t('formDialogInputTaxNoValidate'),
+        ]"
+        for="input-tax-no"
+      />
 
-    <q-input
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-12"
-      :label="
-        typeBranch === 'headOffice'
-          ? $t('formDialogInputNameHq')
-          : $t('formDialogInputNameSubBranch')
-      "
-      v-model="name"
-      lazy-rules
-      :rules="[(val) => val && val.length > 0]"
-      :error-message="
-        typeBranch === 'headOffice'
-          ? $t('formDialogInputNameHqValidate')
-          : $t('formDialogInputNameSubBranchValidate')
-      "
-      for="input-name"
-    />
+      <q-input
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12"
+        :label="
+          typeBranch === 'headOffice'
+            ? $t('formDialogInputNameHq')
+            : $t('formDialogInputNameSubBranch')
+        "
+        v-model="name"
+        lazy-rules
+        :rules="[(val) => val && val.length > 0]"
+        :error-message="
+          typeBranch === 'headOffice'
+            ? $t('formDialogInputNameHqValidate')
+            : $t('formDialogInputNameSubBranchValidate')
+        "
+        for="input-name"
+      />
 
-    <q-input
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-12"
-      v-model="nameEN"
-      :label="
-        typeBranch === 'headOffice'
-          ? $t('formDialogInputNameHqEn')
-          : $t('formDialogInputNameSubBranchEn')
-      "
-      :rules="[(val) => val && val.length > 0]"
-      :error-message="
-        typeBranch === 'headOffice'
-          ? $t('formDialogInputNameHqEnValidate')
-          : $t('formDialogInputNameSubBranchEnValidate')
-      "
-      for="input-name-en"
+      <q-input
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12"
+        v-model="nameEN"
+        :label="
+          typeBranch === 'headOffice'
+            ? $t('formDialogInputNameHqEn')
+            : $t('formDialogInputNameSubBranchEn')
+        "
+        :rules="[(val) => val && val.length > 0]"
+        :error-message="
+          typeBranch === 'headOffice'
+            ? $t('formDialogInputNameHqEnValidate')
+            : $t('formDialogInputNameSubBranchEnValidate')
+        "
+        for="input-name-en"
+      />
+    </div>
+    <q-separator
+      v-if="separator"
+      class="col-12 q-mt-xl q-mb-md"
+      style="padding-block: 0.5px"
     />
   </div>
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mt-xl q-mb-md"
-    style="padding-block: 0.5px"
-  />
 </template>

src/components/01_branch-management/FormImage.vue

@@ -14,10 +14,14 @@ defineEmits<{
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• {{ title }}</div>
+  <div class="col-md-3 col-12 app-text-muted">• {{ title }}</div>
   <div
-    :class="{ 'dark-form-show-img-qh': $q.dark.isActive }"
-    class="col-9 row q-mt-lg branch-form-show-img-hq"
+    :class="{
+      'dark-form-show-img-qh': $q.dark.isActive,
+      'q-mt-lg': !$q.screen.xs,
+      'q-mt-sm': $q.screen.xs,
+    }"
+    class="col-md-9 col-12 row branch-form-show-img-hq"
     style="min-height: 150px"
   >
     <div class="col-12 flex flex-center" v-if="image">

src/components/01_branch-management/FormLocation.vue

@@ -18,8 +18,11 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
-  <div class="col-9 q-mt-lg bordered rounded row no-padding">
+  <div class="col-md-3 col-12 app-text-muted">• {{ $t(`${title}`) }}</div>
+  <div
+    class="col-md-9 col-12 bordered rounded row no-padding"
+    :class="{ 'q-mt-lg': !$q.screen.xs, 'q-mt-sm': $q.screen.xs }"
+  >
     <div class="col-12 q-pl-md q-py-sm app-text-muted">location</div>
 
     <div v-if="!!longitude && !!latitude" class="col-12 flex flex-center">

src/components/01_branch-management/FormQr.vue

@@ -16,10 +16,14 @@ defineEmits<{
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• {{ title }}</div>
+  <div class="col-md-3 col-12 app-text-muted">• {{ title }}</div>
   <div
-    :class="{ 'dark-form-show-qr-code': $q.dark.isActive }"
-    class="col-9 row q-mt-lg branch-form-show-qr-code"
+    :class="{
+      'dark-form-show-qr-code': $q.dark.isActive,
+      'q-mt-lg': !$q.screen.xs,
+      'q-mt-sm': $q.screen.xs,
+    }"
+    class="col-md-9 col-12 row branch-form-show-qr-code"
   >
     <div class="col-12 flex flex-center">
       <q-img v-if="qr" :src="qr as string" style="width: 150px; height: 150px">

src/components/02_personnel-management/FormAddress.vue

@@ -113,10 +113,13 @@ watch(districtId, fetchSubDistrict);
     </div>
 
     <div class="col-12 row q-col-gutter-y-md">
-      <div class="col-3 q-pl-xl app-text-muted">
+      <div
+        class="col-md-3 col-12 app-text-muted"
+        :class="{ 'q-pl-xl': !$q.screen.xs }"
+      >
         {{ addressTitle || $t('formDialogTitleAddressPure') }}
       </div>
-      <div class="col-9 row q-col-gutter-md">
+      <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
           :for="`${id !== undefined ? `input-address-${id}` : 'input-address'}`"
           :dense="dense"
@@ -149,7 +152,7 @@ watch(districtId, fetchSubDistrict);
           option-value="id"
           option-label="name"
           :label="$t('province')"
-          class="col-3"
+          class="col-md-3 col-6"
           :options="addrOptions.provinceOps"
           :rules="
             disabledRule
@@ -176,7 +179,7 @@ watch(districtId, fetchSubDistrict);
           option-value="id"
           option-label="name"
           :label="$t('district')"
-          class="col-3"
+          class="col-md-3 col-6"
           :options="addrOptions.districtOps"
           :rules="
             disabledRule
@@ -202,7 +205,7 @@ watch(districtId, fetchSubDistrict);
           option-value="id"
           option-label="name"
           :label="$t('subDistrict')"
-          class="col-3"
+          class="col-md-3 col-6"
           :options="addrOptions.subDistrictOps"
           :rules="
             disabledRule
@@ -221,14 +224,17 @@ watch(districtId, fetchSubDistrict);
           outlined
           readonly
           :label="$t('zipCode')"
-          class="col-3"
+          class="col-md-3 col-6"
           v-model="zipCode"
         />
       </div>
-      <div class="col-3 q-pl-xl app-text-muted">
+      <div
+        class="col-md-3 col-12 app-text-muted"
+        :class="{ 'q-pl-xl': !$q.screen.xs }"
+      >
         {{ addressTitleEN || $t('formDialogTitleAddressPureEN') }}
       </div>
-      <div class="col-9 row q-col-gutter-md">
+      <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
           :for="`${id !== undefined ? `input-address-en-${id}` : 'input-address-en'}`"
           :dense="dense"
@@ -261,7 +267,7 @@ watch(districtId, fetchSubDistrict);
           option-value="id"
           option-label="nameEN"
           :label="$t('province')"
-          class="col-3"
+          class="col-md-3 col-6"
           :options="addrOptions.provinceOps"
           :rules="
             disabledRule
@@ -287,7 +293,7 @@ watch(districtId, fetchSubDistrict);
           option-value="id"
           option-label="nameEN"
           :label="$t('district')"
-          class="col-3"
+          class="col-md-3 col-6"
           :options="addrOptions.districtOps"
           :rules="
             disabledRule
@@ -313,7 +319,7 @@ watch(districtId, fetchSubDistrict);
           option-value="id"
           option-label="nameEN"
           :label="$t('subDistrict')"
-          class="col-3"
+          class="col-md-3 col-6"
           :options="addrOptions.subDistrictOps"
           :rules="
             disabledRule
@@ -334,7 +340,7 @@ watch(districtId, fetchSubDistrict);
           readonly
           zip="zip-en"
           :label="$t('zipCode')"
-          class="col-3"
+          class="col-md-3 col-6"
           v-model="zipCode"
         />
       </div>

src/components/FormDialog.vue

@@ -49,7 +49,7 @@ const currentTab = defineModel<string>('currentTab');
     <div
       class="surface-1"
       style="padding: 0; border-radius: var(--radius-2); height: 100%"
-      :style="`max-width:${maxWidth ? maxWidth : '85%'}; width: ${width ? width : '85%'}; height: ${height ? height : '85vh'} `"
+      :style="`max-width:${$q.screen.xs ? '100%' : maxWidth ? maxWidth : '85%'}; width: ${$q.screen.xs ? '100%' : width ? width : '85%'}; height: ${height ? height : '85vh'} `"
     >
       <q-form
         greedy