Merge pull request #141 from Normal-OJ/feat/main-page-mobile

Feat/main page mobile
Normal-OJ · Aug 5, 2023 · c09ce42 · c09ce42
2 parents 72dabf5 + 21a67fd
commit c09ce42
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 4 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -27,7 +27,7 @@ watchEffect(() => {
   <div class="drawer-mobile drawer h-screen w-screen">
     <input id="noj-drawer" type="checkbox" class="drawer-toggle" />
     <div class="drawer-content">
-      <top-bar class="lg:hidden" />
+      <top-bar class="sticky top-0 z-50 lg:hidden" />
       <router-view />
     </div>
     <div class="drawer-side">

diff --git a/src/components/SystemAnnouncements.vue b/src/components/SystemAnnouncements.vue
@@ -4,14 +4,18 @@ 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);
 </script>
 
 <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/components/TopBar.vue b/src/components/TopBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar rounded-box shadow-md">
+  <div class="navbar rounded-box bg-base-100 shadow-md">
     <div class="navbar-start">
       <label for="noj-drawer" class="btn btn-ghost drawer-button btn-circle">
         <i-uil-bars class="h-6 w-6" />

diff --git a/src/composables/useInteractions.ts b/src/composables/useInteractions.ts
@@ -0,0 +1,9 @@
+import { useMediaQuery } from "@vueuse/core";
+
+export default function useInteractions() {
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+
+  return {
+    isDesktop,
+  };
+}
diff --git 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 />