From 4c7989cc66aa81f99c55060b88556767d33f8f3c Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 26 Jul 2023 07:08:37 +0800
Subject: [PATCH] fix layout

---
 src/styles/styles.scss                       | 16 ----------------
 src/views/discover/MediaCardListView.vue     | 15 +++++++++------
 src/views/discover/TorrentCardListView.vue   | 19 +++++++++----------
 src/views/plugin/PluginCardListView.vue      | 18 +++++++++++-------
 src/views/reorganize/DownloadingListView.vue | 16 ++++++++++------
 src/views/site/SiteCardListView.vue          | 16 ++++++++++------
 src/views/subscribe/SubscribeListView.vue    | 16 ++++++++++------
 7 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 56b3a71f..7e17e866 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -20,22 +20,6 @@
   margin-bottom: env(safe-area-inset-top);
 }
 
-
-.centered {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
-}
-
-
-.top-centered {
-  position: absolute;
-  inset-block-start: 20%;
-  inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .v-dialog > .v-overlay__content {
   margin-top: calc(env(safe-area-inset-top) + 1rem);
   max-height: calc(100% - env(safe-area-inset-top) - 1rem);
diff --git a/src/views/discover/MediaCardListView.vue b/src/views/discover/MediaCardListView.vue
index d40fd7c6..17647618 100644
--- a/src/views/discover/MediaCardListView.vue
+++ b/src/views/discover/MediaCardListView.vue
@@ -123,13 +123,16 @@ async function fetchData({ done }: { done: any }) {
 </script>
 
 <template>
-  <VProgressCircular
+  <div
     v-if="!isRefreshed"
-    size="48"
-    class="centered"
-    indeterminate
-    color="primary"
-  />
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+  >
+    <VProgressCircular
+      size="48"
+      indeterminate
+      color="primary"
+    />
+  </div>
   <VInfiniteScroll
     mode="intersect"
     side="end"
diff --git a/src/views/discover/TorrentCardListView.vue b/src/views/discover/TorrentCardListView.vue
index 0a5d3c6f..3d2f1da6 100644
--- a/src/views/discover/TorrentCardListView.vue
+++ b/src/views/discover/TorrentCardListView.vue
@@ -377,23 +377,22 @@ onBeforeMount(fetchData)
       </VCol>
     </VRow>
   </VCard>
-  <VProgressCircular
-    v-if="!isRefreshed && !props.keyword"
-    size="48"
-    class="centered"
-    indeterminate
-    color="primary"
-  />
   <div
-    v-if="!isRefreshed && props.keyword"
-    class="top-centered mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+    v-if="!isRefreshed"
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
   >
     <VProgressCircular
+      v-if="!props.keyword"
+      size="48"
+      indeterminate
+      color="primary"
+    />
+    <VProgressCircular
+      v-if="props.keyword"
       class="mb-3"
       color="primary"
       :model-value="progressValue"
       size="64"
-      width="7"
     />
     <span>{{ progressText }}</span>
   </div>
diff --git a/src/views/plugin/PluginCardListView.vue b/src/views/plugin/PluginCardListView.vue
index c09e549f..c13eb69b 100644
--- a/src/views/plugin/PluginCardListView.vue
+++ b/src/views/plugin/PluginCardListView.vue
@@ -51,13 +51,17 @@ onBeforeMount(fetchData)
 </script>
 
 <template>
-  <VProgressCircular
+  <div
     v-if="!isRefreshed"
-    size="48"
-    class="centered"
-    indeterminate
-    color="primary"
-  />
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+  >
+    <VProgressCircular
+      v-if="!isRefreshed"
+      size="48"
+      indeterminate
+      color="primary"
+    />
+  </div>
   <div
     v-if="dataList.length > 0"
     class="grid gap-3 grid-plugin-card"
@@ -88,7 +92,7 @@ onBeforeMount(fetchData)
         icon="mdi-plus"
         v-bind="props"
         size="x-large"
-        class="absolute right-5 bottom-5"
+        class="fixed right-5 bottom-5"
       />
     </template>
 
diff --git a/src/views/reorganize/DownloadingListView.vue b/src/views/reorganize/DownloadingListView.vue
index 57bad9c5..50c22f1d 100644
--- a/src/views/reorganize/DownloadingListView.vue
+++ b/src/views/reorganize/DownloadingListView.vue
@@ -55,13 +55,17 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VProgressCircular
+  <div
     v-if="!isRefreshed"
-    size="48"
-    class="centered"
-    indeterminate
-    color="primary"
-  />
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+  >
+    <VProgressCircular
+      v-if="!isRefreshed"
+      size="48"
+      indeterminate
+      color="primary"
+    />
+  </div>
   <PullRefresh
     v-model="loading"
     @refresh="onRefresh"
diff --git a/src/views/site/SiteCardListView.vue b/src/views/site/SiteCardListView.vue
index bf746912..c1fe96d9 100644
--- a/src/views/site/SiteCardListView.vue
+++ b/src/views/site/SiteCardListView.vue
@@ -26,13 +26,17 @@ onBeforeMount(fetchData)
 </script>
 
 <template>
-  <VProgressCircular
+  <div
     v-if="!isRefreshed"
-    size="48"
-    class="centered"
-    indeterminate
-    color="primary"
-  />
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+  >
+    <VProgressCircular
+      v-if="!isRefreshed"
+      size="48"
+      indeterminate
+      color="primary"
+    />
+  </div>
   <div
     v-if="dataList.length > 0"
     class="grid gap-3 grid-site-card"
diff --git a/src/views/subscribe/SubscribeListView.vue b/src/views/subscribe/SubscribeListView.vue
index e971b4a4..83a653a1 100644
--- a/src/views/subscribe/SubscribeListView.vue
+++ b/src/views/subscribe/SubscribeListView.vue
@@ -47,13 +47,17 @@ const filteredDataList = computed(() => {
 </script>
 
 <template>
-  <VProgressCircular
+  <div
     v-if="!isRefreshed"
-    size="48"
-    class="centered"
-    indeterminate
-    color="primary"
-  />
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+  >
+    <VProgressCircular
+      v-if="!isRefreshed"
+      size="48"
+      indeterminate
+      color="primary"
+    />
+  </div>
   <PullRefresh
     v-model="loading"
     @refresh="onRefresh"