From 57f6547b91afcb103a28663067f09740560d500d Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 16 Aug 2024 12:35:40 +0800
Subject: [PATCH] style: Update DownloaderCard and MediaServerCard to improve
 UI consistency

---
 src/components/cards/DownloaderCard.vue  | 6 +++---
 src/components/cards/MediaServerCard.vue | 6 +++---
 src/components/cards/StorageCard.vue     | 8 +++-----
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/cards/DownloaderCard.vue b/src/components/cards/DownloaderCard.vue
index cc9ad07a..8f3ad50c 100644
--- a/src/components/cards/DownloaderCard.vue
+++ b/src/components/cards/DownloaderCard.vue
@@ -121,7 +121,7 @@ onUnmounted(() => {
         </IconBtn>
       </span>
       <VCardText class="flex justify-space-between align-center gap-4">
-        <div class="align-self-start">
+        <div class="align-self-start flex-1">
           <div class="flex items-center">
             <VBadge
               v-if="props.downloader.default && props.downloader.enabled"
@@ -132,12 +132,12 @@ onUnmounted(() => {
             />
             <span class="text-h6">{{ downloader.name }}</span>
           </div>
-          <div class="text-body-1 mt-5 flex flex-wrap text-sm" v-if="props.downloader.enabled">
+          <div class="mt-1 flex flex-wrap text-sm" v-if="props.downloader.enabled">
             <span class="me-2">{{ `↑ ${formatFileSize(upload_rate, 1)}/s ` }}</span>
             <span>{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
           </div>
         </div>
-        <VImg :src="getIcon" cover class="mt-7" max-width="3rem" />
+        <VImg :src="getIcon" cover class="mt-7" max-width="3rem" min-width="3rem" />
       </VCardText>
     </VCard>
     <VDialog v-model="downloaderInfoDialog" scrollable max-width="40rem">
diff --git a/src/components/cards/MediaServerCard.vue b/src/components/cards/MediaServerCard.vue
index fd259484..74ca4227 100644
--- a/src/components/cards/MediaServerCard.vue
+++ b/src/components/cards/MediaServerCard.vue
@@ -122,15 +122,15 @@ onMounted(() => {
     <VCard variant="tonal" @click="openMediaServerInfoDialog">
       <DialogCloseBtn @click="onClose" />
       <VCardText class="flex justify-space-between align-center gap-3">
-        <div class="align-self-start">
+        <div class="align-self-start flex-1">
           <div class="text-h6 mb-1">{{ mediaserver.name }}</div>
-          <div class="text-body-1 mt-5 flex flex-wrap">
+          <div class="text-sm mt-5 flex flex-wrap">
             <span v-for="item in infoItems" :key="item.title" class="me-2 mb-1">
               <VIcon rounded :icon="item.avatar" class="me-1" />{{ item.amount }}
             </span>
           </div>
         </div>
-        <VImg :src="getIcon" cover class="mt-5 me-3" max-width="4rem" />
+        <VImg :src="getIcon" cover class="mt-5 me-3" max-width="3rem" min-width="3rem" />
       </VCardText>
     </VCard>
     <VDialog v-model="mediaServerInfoDialog" scrollable max-width="40rem">
diff --git a/src/components/cards/StorageCard.vue b/src/components/cards/StorageCard.vue
index f273d2c7..da06916c 100644
--- a/src/components/cards/StorageCard.vue
+++ b/src/components/cards/StorageCard.vue
@@ -114,14 +114,12 @@ onMounted(() => {
 <template>
   <VCard variant="tonal" @click="openStorageDialog">
     <VCardText class="flex justify-space-between align-center gap-3">
-      <div class="align-self-start">
+      <div class="align-self-start flex-1">
         <h5 class="text-h6 mb-1">{{ storage.name }}</h5>
-        <div class="text-body-1 mb-3 text-xs" v-if="total">
-          {{ formatBytes(available, 1) }} / {{ formatBytes(total, 1) }}
-        </div>
+        <div class="mb-3 text-sm" v-if="total">{{ formatBytes(available, 1) }} / {{ formatBytes(total, 1) }}</div>
         <div v-else>未配置</div>
       </div>
-      <VImg :src="getIcon" cover class="mt-5" max-width="4rem" />
+      <VImg :src="getIcon" cover class="mt-5" max-width="3rem" min-width="3rem" />
     </VCardText>
     <div class="w-full absolute bottom-0">
       <VProgressLinear v-if="usage > 0" :model-value="usage" :bg-color="progressColor" :color="progressColor" />