From a9184730c8cc22b9dd631569dfe5eea4ef3468f8 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Wed, 8 Feb 2023 15:39:35 +0800
Subject: [PATCH] files layout done

---
 src/views/Files/index.vue | 283 ++++++++------------------------------
 1 file changed, 56 insertions(+), 227 deletions(-)

diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index 9d735ea..77c4794 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -116,7 +116,6 @@
         </li>
       </ul>
     </section>
-    <!-- All Files type of List -->
     <section>
       <div class="py-4 mb-4 border-b flex justify-between items-center border-neutral-500">
         <h2 class="font-bold">All Files</h2>
@@ -125,236 +124,66 @@
           <IconGrid></IconGrid>
         </figure>
       </div>
-      <div style="margin-left: -16px; margin-right: -16px;" class="overflow-y-scroll overflow-x-hidden h-[calc(100vh_-_480px)]  scrollbar">
+      <!-- All Files type of List -->
+      <div style="margin-left: -16px; margin-right: -16px;" class="overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)]  scrollbar">
         <table class="w-full border-separate border-spacing-x-4 text-sm table-fixed">
-        <thead class="sticky top-0 bg-neutral-10">
-            <tr>
+          <thead class="sticky top-0 bg-neutral-10">
+              <tr>
+                <th>
+                  Name
+                  <IconVector class="inline-block ml-2 fill-neutral-500" ></IconVector>
+              </th>
+              <th>
+                Parent log
+                <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
+              </th>
               <th>
-                Name
-                <IconVector class="inline-block ml-2 fill-neutral-500" ></IconVector>
-            </th>
-            <th>
-              Parent log
-              <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
-            </th>
-            <th>
-              File type
-              <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
-            </th>
-            <th>
-              Owner
-              <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
-            </th>
-            <th>
-              Last update
-              <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">-</td>
-            <td class="text-neutral-500">Log</td>
-            <td class="text-neutral-500">Ivory Liao</td>
-            <td class="text-neutral-500"></td>
-          </tr>
-          <tr>
-            <td>filter 1109</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Filter</td>
-            <td class="text-neutral-500">Chia-Kai Liu</td>
-            <td class="text-neutral-500">37 minutes ago</td>
-          </tr>
-          <tr>
-            <td>Rule 0327</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Rule</td>
-            <td class="text-neutral-500">Elizabeth Alexandra Mary</td>
-            <td class="text-neutral-500">22 hours ago</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-          <tr>
-            <td>Process 1225</td>
-            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
-            <td class="text-neutral-500">Design</td>
-            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
-            <td class="text-neutral-500">2022/08/20</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    </section>
-    <!-- All Files type of grid -->
-    <!-- <section>
-      <h2 class="font-bold py-4 mb-4 border-b">All Files</h2>
-      <ul class="grid grid-cols-6 gap-4">
-        <li class="w-[216px] h-[168px] p-4 border rounded">
-          <a href="" class="h-full flex flex-col justify-between">
-            <div>
-              <figure class="mb-2">
-                <IconDataFormat class="w-8 h-8"></IconDataFormat>
-              </figure>
-              <h3 class="text-sm font-medium mb-2">
                 File type
-              </h3>
-              <p class="text-sm">
-                Daily operation records of......
-              </p>
-            </div>
-            <p class="text-sm">
-              Edited just now
+                <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
+              </th>
+              <th>
+                Owner
+                <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
+              </th>
+              <th>
+                Last update
+                <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Daily operation records of wind turbines of...</td>
+              <td class="text-neutral-500">-</td>
+              <td class="text-neutral-500">Log</td>
+              <td class="text-neutral-500">Ivory Liao</td>
+              <td class="text-neutral-500"></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    <!-- All Files type of grid -->
+    <!-- <ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar">
+      <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300 ">
+        <a href="" class="h-full flex flex-col justify-between">
+          <div>
+            <figure class="mb-2">
+              <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
+            </figure>
+            <h3 class="text-sm font-medium mb-2">
+              1 File type
+            </h3>
+            <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
+              Daily operation recggggggggggggly operation records of Daily operation records of Daily operation records of Daily operation records of
             </p>
-          </a>
-        </li>
-      </ul>
-    </section> -->
+          </div>
+          <p class="text-sm text-neutral-500">
+            Edited just now
+          </p>
+        </a>
+      </li>
+    </ul> -->
+    </section>
   </div>
 </template>