From 0750d77b9864036fe896f5341eba2f43621bc601 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 28 Jan 2025 10:19:51 +0700
Subject: [PATCH] refactor: improve layout and responsiveness for
 ImageUploadDialog component

---
 src/components/ImageUploadDialog.vue | 40 ++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/ImageUploadDialog.vue b/src/components/ImageUploadDialog.vue
index 5b9d510d..d52d8728 100644
--- a/src/components/ImageUploadDialog.vue
+++ b/src/components/ImageUploadDialog.vue
@@ -193,14 +193,21 @@ watch(
       </div>
 
       <!-- body -->
-      <div class="q-px-lg surface-2 col row full-width">
-        <div
-          class="image-dialog-body q-my-lg relative-position rounded surface-1 flex items-center"
+      <section
+        class="surface-2 col row full-width no-wrap q-pa-md items-center"
+        :class="{
+          row: $q.screen.gt.sm,
+          column: $q.screen.lt.md,
+        }"
+      >
+        <aside
+          class="image-dialog-body relative-position rounded surface-1 flex items-center"
+          :class="{ 'q-mr-sm': $q.screen.gt.sm, 'q-mb-sm': $q.screen.lt.md }"
         >
           <img
             :src="tempImage || fallbackUrl"
             v-if="tempImage || fallbackUrl"
-            style="object-fit: contain; width: 100%"
+            style="object-fit: contain; height: 100%; width: 100%"
             @error="
               () => {
                 tempImage = '';
@@ -237,12 +244,12 @@ watch(
               style="color: hsla(var(--stone-0-hsl) / 0.7)"
             ></q-btn>
           </div>
-        </div>
+        </aside>
 
-        <div
+        <aside
           v-if="!hiddenFooter"
-          class="col q-ml-md q-pt-sm q-my-md"
-          style="width: 40em; height: 30em; overflow: auto"
+          class="self-start col"
+          style="overflow: auto; height: 30em"
         >
           <div class="row items-center q-gutter-sm">
             <div
@@ -254,6 +261,8 @@ watch(
                 object-fit: cover;
                 height: 5vw;
                 width: 5vw;
+                min-width: 70px;
+                min-height: 70px;
                 overflow: hidden;
               "
               @click="selectImg('')"
@@ -274,7 +283,12 @@ watch(
                       ? selectedImg === img
                       : selectedImg === img.split('/').pop(),
                 }"
-                style="height: 5vw; width: 5vw"
+                style="
+                  height: 5vw;
+                  width: 5vw;
+                  min-width: 70px;
+                  min-height: 70px;
+                "
                 @click="selectImg(img)"
               >
                 <q-btn
@@ -339,8 +353,8 @@ watch(
               </div>
             </template>
           </div>
-        </div>
-      </div>
+        </aside>
+      </section>
 
       <!-- footer -->
       <div
@@ -410,6 +424,10 @@ watch(
   overflow: hidden;
   width: 30em;
   height: 30em;
+  /* width: calc(400px - 5vw); */
+  /* height: calc(400px - 5vw); */
+  /* max-width: 400px;
+  max-height: 400px; */
 }
 
 .upload-image-btn {