GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-30 12:49:55 +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

6
src/components/cards/DownloaderCard.vue
View File

@@ -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">

6
src/components/cards/MediaServerCard.vue
View File

@@ -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">

8
src/components/cards/StorageCard.vue
View File

@@ -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" />