ปรับ ui ระบบวินัยเพิ่มเติม

src/modules/11_discipline/components/UploadFile.vue

@@ -133,49 +133,49 @@ function downloadFile(link: string) {
         {{ title }}
       </div>
       <div class="col-12"><q-separator /></div>
-      <div v-if="!isReadonly" class="row">
-        <div class="col-12 q-px-sm q-pt-sm row">
-          <q-file
-            class="col-12"
-            outlined
-            dense
-            ref="fileRef"
-            for="#files"
-            v-model="file"
-            :label="label"
-            hide-bottom-space
-            lazy-rules
-            accept=".pdf,.xlsx,.docx,.png,.jpg"
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" />
-            </template>
-            <template v-slot:after>
-              <q-btn
-                v-if="file"
-                size="14px"
-                flat
-                round
-                dense
-                color="add"
-                icon="mdi-upload"
-                @click="uploadFile()"
-                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-              >
-            </template>
-          </q-file>
+      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+        <div v-if="!isReadonly" class="col-12">
+            <q-file
+              outlined
+              dense
+              ref="fileRef"
+              for="#files"
+              v-model="file"
+              :label="label"
+              hide-bottom-space
+              lazy-rules
+              accept=".pdf,.xlsx,.docx,.png,.jpg"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" />
+              </template>
+              <template v-slot:after>
+                <q-btn
+                  v-if="file"
+                  size="14px"
+                  flat
+                  round
+                  dense
+                  color="add"
+                  icon="mdi-upload"
+                  @click="uploadFile()"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </template>
+            </q-file>
         </div>
-      </div>
 
-      <div v-if="props.files.length > 0" class="col-xs-12 q-pa-sm row">
+      <div v-if="props.files.length > 0" class="col-xs-12 row">
         <q-list
-          v-for="(f, index) in props.files"
-          :key="index"
           bordered
           separator
-          class="full-width"
+          class="full-width rounded-borders"
         >
-          <q-item clickable v-ripple>
+          <q-item 
+            v-for="(f, index) in props.files"
+            :key="index"
+            clickable 
+            v-ripple>
             <q-item-section>{{ f.fileName }}</q-item-section>
             <q-item-section avatar>
               <div class="row">
@@ -210,10 +210,12 @@ function downloadFile(link: string) {
           </q-item>
         </q-list>
       </div>
+   
 
-      <div class="col-12  q-pa-sm" v-if="props.files.length == 0">
+      <div class="col-12" v-if="props.files.length == 0">
         <q-card class="q-py-sm q-px-md" bordered> ไม่มีรายการเอกสาร </q-card>
-      </div>
+      </div> 
+    </div>
     </q-card>
   </div>
 </template>