GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 23:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: Update DownloaderCard and MediaServerCard to improve UI consistency

Browse Source
This commit is contained in:
jxxghp
2024-08-16 12:35:40 +08:00
parent 200b22cf0c
commit 57f6547b91
3 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cards/DownloaderCard.vue
+3 -3
View File
@@ -121,7 +121,7 @@ onUnmounted(() => {
</IconBtn> </IconBtn>
</span> </span>
<VCardText class="flex justify-space-between align-center gap-4"> <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"> <div class="flex items-center">
<VBadge <VBadge
v-if="props.downloader.default && props.downloader.enabled" v-if="props.downloader.default && props.downloader.enabled"
@@ -132,12 +132,12 @@ onUnmounted(() => {
/> />
<span class="text-h6">{{ downloader.name }}</span> <span class="text-h6">{{ downloader.name }}</span>
</div> </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 class="me-2">{{ `↑ ${formatFileSize(upload_rate, 1)}/s ` }}</span>
<span>{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span> <span>{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
</div> </div>
</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> </VCardText>
</VCard> </VCard>
<VDialog v-model="downloaderInfoDialog" scrollable max-width="40rem"> <VDialog v-model="downloaderInfoDialog" scrollable max-width="40rem">
src/components/cards/MediaServerCard.vue
+3 -3
View File
@@ -122,15 +122,15 @@ onMounted(() => {
<VCard variant="tonal" @click="openMediaServerInfoDialog"> <VCard variant="tonal" @click="openMediaServerInfoDialog">
<DialogCloseBtn @click="onClose" /> <DialogCloseBtn @click="onClose" />
<VCardText class="flex justify-space-between align-center gap-3"> <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-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"> <span v-for="item in infoItems" :key="item.title" class="me-2 mb-1">
<VIcon rounded :icon="item.avatar" class="me-1" />{{ item.amount }} <VIcon rounded :icon="item.avatar" class="me-1" />{{ item.amount }}
</span> </span>
</div> </div>
</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> </VCardText>
</VCard> </VCard>
<VDialog v-model="mediaServerInfoDialog" scrollable max-width="40rem"> <VDialog v-model="mediaServerInfoDialog" scrollable max-width="40rem">
src/components/cards/StorageCard.vue
+3 -5
View File
@@ -114,14 +114,12 @@ onMounted(() => {
<template> <template>
<VCard variant="tonal" @click="openStorageDialog"> <VCard variant="tonal" @click="openStorageDialog">
<VCardText class="flex justify-space-between align-center gap-3"> <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> <h5 class="text-h6 mb-1">{{ storage.name }}</h5>
<div class="text-body-1 mb-3 text-xs" v-if="total"> <div class="mb-3 text-sm" v-if="total">{{ formatBytes(available, 1) }} / {{ formatBytes(total, 1) }}</div>
{{ formatBytes(available, 1) }} / {{ formatBytes(total, 1) }}
</div>
<div v-else>未配置</div> <div v-else>未配置</div>
</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> </VCardText>
<div class="w-full absolute bottom-0"> <div class="w-full absolute bottom-0">
<VProgressLinear v-if="usage > 0" :model-value="usage" :bg-color="progressColor" :color="progressColor" /> <VProgressLinear v-if="usage > 0" :model-value="usage" :bg-color="progressColor" :color="progressColor" />