fix(front): use card template sections on library card

This commit is contained in:
ArneBo 2025-01-16 17:03:24 +01:00
parent f4607e0d02
commit 6ee0d81976
1 changed files with 116 additions and 103 deletions

View File

@ -154,13 +154,21 @@ const isOpen = ref(false)
<template> <template>
<Card <Card
:title="library.name" :title="library.name"
:to="{name: 'library.detail', params: {id: library.uuid}}"
> >
<div class="content"> <template #topright>
<h4 class="header"> <span
<router-link :to="{name: 'library.detail', params: {id: library.uuid}}"> v-if="library.privacy_level === 'me'"
{{ library.name }} :data-tooltip="labels.tooltips.me"
</router-link> >
<i class="bi bi-lock-fill" />
</span>
<span
v-else-if="library.privacy_level === 'everyone'"
:data-tooltip="labels.tooltips.everyone"
>
<i class="bi bi-globe" />
</span>
<Popover v-model:open="isOpen"> <Popover v-model:open="isOpen">
<template #default="{ toggleOpen }"> <template #default="{ toggleOpen }">
<OptionsButton <OptionsButton
@ -177,35 +185,13 @@ const isOpen = ref(false)
</PopoverItem> </PopoverItem>
</template> </template>
</Popover> </Popover>
<span </template>
v-if="library.privacy_level === 'me'"
class="right floated" <div class="content">
:data-tooltip="labels.tooltips.me"
>
<i class="bi bi-lock" />
</span>
<span
v-else-if="library.privacy_level === 'everyone'"
class="right floated"
:data-tooltip="labels.tooltips.everyone"
>
<i class="bi bi-globe" />
</span>
</h4>
<div class="meta">
<span>
<i class="bi bi-clock" />
<human-date :date="library.creation_date" />
</span>
</div>
<div class="description"> <div class="description">
{{ library.description }} {{ library.description }}
</div> </div>
<Spacer :size="8" /> <Spacer :size="8" />
<div class="meta">
<i class="bi bi-music-note" />
{{ t('views.content.remote.Card.meta.tracks', library.uploads_count) }}
</div>
<div <div
v-if="displayScan && latestScan" v-if="displayScan && latestScan"
class="meta" class="meta"
@ -289,6 +275,20 @@ const isOpen = ref(false)
</div> </div>
</div> </div>
</div> </div>
<template #footer>
<div class="meta">
<span>
<i class="bi bi-clock" />
<human-date :date="library.creation_date" />
</span>
<span>
<i class="bi bi-music-note-list" />
{{ t('views.content.remote.Card.meta.tracks', library.uploads_count) }}
</span>
</div>
</template>
<template #actions>
<div <div
v-if="displayFollow || radioPlayable" v-if="displayFollow || radioPlayable"
:class="['ui', {two: displayFollow && radioPlayable}, 'bottom', 'attached', 'buttons']" :class="['ui', {two: displayFollow && radioPlayable}, 'bottom', 'attached', 'buttons']"
@ -347,5 +347,18 @@ const isOpen = ref(false)
</template> </template>
</template> </template>
</div> </div>
</template>
</Card> </Card>
</template> </template>
<style scoped>
.meta {
padding-left: 8px;
> span {
margin-right: 16px;
> i {
margin-right: 4px;
}
}
}
</style>