MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style(front): empty state layout in channel album cards

This commit is contained in:
ArneBo 2025-02-14 02:22:37 +01:00
parent 97f9b0b9d0
commit a1a58eb767
1 changed files with 9 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
front/src/components/audio/ChannelSeries.vue
View File

@ -8,6 +8,8 @@ import { useI18n } from 'vue-i18n'
import axios from 'axios' import axios from 'axios'
import ChannelSerieCard from '~/components/audio/ChannelSerieCard.vue' import ChannelSerieCard from '~/components/audio/ChannelSerieCard.vue'
import AlbumCard from '~/components/audio/album/Card.vue' import AlbumCard from '~/components/audio/album/Card.vue'
import Layout from '~/components/ui/Layout.vue'
import Loader from '~/components/ui/Loader.vue'
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
interface Props { interface Props {
@ -55,15 +57,9 @@ fetchData()
</script> </script>
<template> <template>
<div>
<slot /> <slot />
<div class="ui hidden divider" /> <Layout flex>
<div <Loader v-if="isLoading" />
v-if="isLoading"
class="ui inverted active dimmer"
>
<div class="ui loader" />
</div>
<template v-if="isPodcast"> <template v-if="isPodcast">
<channel-serie-card <channel-serie-card
v-for="serie in albums" v-for="serie in albums"
@ -71,25 +67,23 @@ fetchData()
:serie="serie" :serie="serie"
/> />
</template> </template>
<div <template v-else>
v-else
class="ui app-cards cards"
>
<album-card <album-card
v-for="album in albums" v-for="album in albums"
:key="album.id" :key="album.id"
:album="album" :album="album"
/> />
</div> </template>
<template v-if="nextPage"> <template v-if="nextPage">
<div class="ui hidden divider" />
<Button <Button
secondary
v-if="nextPage" v-if="nextPage"
@click="fetchData(nextPage)" @click="fetchData(nextPage)"
> >
{{ t('components.audio.ChannelSeries.button.showMore') }} {{ t('components.audio.ChannelSeries.button.showMore') }}
</Button> </Button>
</template> </template>
</Layout>
<template v-if="!isLoading && albums.length === 0"> <template v-if="!isLoading && albums.length === 0">
<empty-state <empty-state
:refresh="true" :refresh="true"
@ -100,5 +94,4 @@ fetchData()
</p> </p>
</empty-state> </empty-state>
</template> </template>
</div>
</template> </template>