From 21a67fd115f0eeefa8b20274ec0d0de91b99de74 Mon Sep 17 00:00:00 2001
From: Lapor Chen <31620109+laporchen@users.noreply.github.com>
Date: Sat, 5 Aug 2023 18:43:28 +0800
Subject: [PATCH] feat: add mobile layout to index

---
 src/components/SystemAnnouncements.vue | 48 +++++++++++++++++++++++++-
 src/pages/index.vue                    | 11 +++++-
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/src/components/SystemAnnouncements.vue b/src/components/SystemAnnouncements.vue
index e63d496..a9f09ee 100644
--- a/src/components/SystemAnnouncements.vue
+++ b/src/components/SystemAnnouncements.vue
@@ -4,6 +4,10 @@ import { formatTime } from "@/utils/formatTime";
 import { useAxios } from "@vueuse/integrations/useAxios";
 import { fetcher } from "@/models/api";
 
+import useInteractions from "@/composables/useInteractions";
+
+const { isDesktop } = useInteractions();
+
 const session = useSession();
 
 const { data: announcements, error, isLoading } = useAxios<AnnouncementList>("/ann", fetcher);
@@ -11,7 +15,7 @@ const { data: announcements, error, isLoading } = useAxios<AnnouncementList>("/a
 
 <template>
   <div class="card-container">
-    <div class="card min-w-full">
+    <div v-if="isDesktop" class="card min-w-full">
       <div class="card-body">
         <div class="card-title mb-3">{{ $t("components.systemAnn.ann") }}</div>
         <div class="my-2" />
@@ -54,5 +58,47 @@ const { data: announcements, error, isLoading } = useAxios<AnnouncementList>("/a
         </data-status-wrapper>
       </div>
     </div>
+    <div v-else class="card min-w-full">
+      <div class="card-body">
+        <data-status-wrapper :error="error" :is-loading="isLoading">
+          <template #loading>
+            <skeleton-table :col="1" :row="5" />
+          </template>
+          <template #data>
+            <table class="table">
+              <thead>
+                <tr>
+                  <th>{{ $t("components.systemAnn.ann") }}</th>
+                  <th v-if="session.isAdmin"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="{ title, createTime, annId } in announcements" :key="annId" class="hover">
+                  <td class="max-w-lg">
+                    <router-link
+                      :to="`/announcements/${annId}`"
+                      class="link-hover link flex flex-col truncate text-lg"
+                    >
+                      {{ title }}
+                      <span class="text-sm">{{ formatTime(createTime) }}</span>
+                    </router-link>
+                  </td>
+                  <td v-if="session.isAdmin">
+                    <div class="tooltip" data-tip="Edit">
+                      <router-link
+                        class="btn btn-ghost btn-sm btn-circle"
+                        :to="`/course/Public/announcements/${annId}/edit`"
+                      >
+                        <i-uil-edit class="lg:h-5 lg:w-5" />
+                      </router-link>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+        </data-status-wrapper>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 9989256..31ebad6 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,11 +1,20 @@
 <script setup lang="ts">
 import { useTitle } from "@vueuse/core";
 
+import useInteractions from "@/composables/useInteractions";
+
+const { isDesktop } = useInteractions();
+
 useTitle("Home | Normal OJ");
 </script>
 
 <template>
-  <div class="mx-auto flex max-w-7xl gap-8 p-4">
+  <div
+    class="mx-auto flex max-w-7xl gap-8 overflow-y-scroll p-4"
+    :class="{
+      'flex-col-reverse gap-0 px-0': !isDesktop,
+    }"
+  >
     <system-announcements />
 
     <login-section />