From 8adc266ee56294c995a1410d29a0d4e3f5c06430 Mon Sep 17 00:00:00 2001
From: oat <oatkub402@gmail.com>
Date: Tue, 28 Nov 2023 13:02:25 +0700
Subject: [PATCH] style: FIleItem ( box size + blank space

---
 Services/client/src/components/FileItem.vue | 77 ++++++++++++---------
 1 file changed, 46 insertions(+), 31 deletions(-)

diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index b083846..3aa1322 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -39,9 +39,10 @@ const props = withDefaults(
 </script>
 
 <template>
-  <div class="q-mt-md">
+  <div class="q-my-md">
     <span class="text-h6 text-weight-light" v-if="currentDept === 3"
-      >แฟ้มย่อย</span>
+      >แฟ้มย่อย</span
+    >
     <div class="q-gutter-md" v-if="currentDept < 3">
       <div
         :key="value.name"
@@ -80,7 +81,7 @@ const props = withDefaults(
               </div>
               <span
                 class="text-center q-pt-md text-overflow-handle"
-                style="max-width: 150px"
+                style="max-width: 132px"
                 >{{ value.name }}</span
               >
             </q-card-section>
@@ -106,7 +107,7 @@ const props = withDefaults(
             <q-card-section class="column justify-center relative q-px-xl">
               <q-icon
                 :name="currentIcon"
-                class="add-icon"
+                class="column justify-center relative q-px-lg"
                 size="6em"
                 color="primary"
               />
@@ -122,31 +123,35 @@ const props = withDefaults(
       </div>
     </div>
 
-
     <div class="q-gutter-md q-mt-sm" v-if="currentDept === 3">
       <div
         :key="value.name"
         v-for="value in currentFolder"
         class="inline-block"
       >
-        <div class="box border-radius-inherit q-px-sm  q-py-sm">
+        <div class="box border-radius-inherit q-px-sm q-py-sm">
           <q-card flat @click="() => getFolder(value.pathname)">
-          <q-td>
-            <q-icon :name="currentIcon" size="3em" color="primary" class="col" />
-           <span class="q-mx-md">{{ value.name }}</span>
-            <file-item-action
-                  :editname="value.name"
-                  :pathname="value.pathname"
-                  @editname="
-                    () => {
-                      drawer = !drawer
-                      drawerStatus = 'edit'
-                      editPathname = value.pathname
-                    }
-                  "
-                />
-          </q-td>
-        </q-card>
+            <q-td>
+              <q-icon
+                :name="currentIcon"
+                size="3em"
+                color="primary"
+                class="col"
+              />
+              <span class="q-mx-md">{{ value.name }}</span>
+              <file-item-action
+                :editname="value.name"
+                :pathname="value.pathname"
+                @editname="
+                  () => {
+                    drawer = !drawer
+                    drawerStatus = 'edit'
+                    editPathname = value.pathname
+                  }
+                "
+              />
+            </q-td>
+          </q-card>
         </div>
       </div>
       <div
@@ -165,20 +170,31 @@ const props = withDefaults(
               }
             "
           >
-          <q-td>
-            <q-icon :name="currentIcon" size="3em" color="primary" class="col" />
-            <q-btn round class="add-button-folder-level" color="white" size="6px">
+            <q-td>
+              <q-icon
+                :name="currentIcon"
+                size="3em"
+                color="primary"
+                class="col"
+              />
+              <q-btn
+                round
+                class="add-button-folder-level"
+                color="white"
+                size="6px"
+              >
                 <q-icon name="add" color="primary" size="1.2rem"></q-icon>
               </q-btn>
-           <span class="q-mx-md">สร้าง{{ DEPT_NAME[currentDept] }}ใหม่</span>
-          </q-td>
+              <span class="q-mx-md">สร้าง{{ DEPT_NAME[currentDept] }}ใหม่</span>
+            </q-td>
           </q-card>
         </div>
       </div>
     </div>
   </div>
-  <div class="q-mt-xl">
-    <span class="text-h6 text-weight-light" v-if="currentDept > 2">เอกสาร</span>
+    <span class="text-h6 text-weight-light" v-if="currentDept > 2"
+      >เอกสาร</span
+    >
     <div class="q-gutter-md q-mt-xs">
       <div
         v-for="(value, index) in currentFile"
@@ -240,7 +256,6 @@ const props = withDefaults(
         </div>
       </div>
     </div>
-  </div>
 
   <from-edit
     :drawer="drawer"
@@ -281,7 +296,7 @@ const props = withDefaults(
 .add-button {
   position: absolute;
   top: 75px;
-  right: 45px;
+  right: 70px;
   background-color: white;
 }
 .add-button-folder-level {