style(front): Section components on explore
This commit is contained in:
parent
bbc239b96c
commit
16c74b4078
|
@ -10,6 +10,7 @@ import axios from 'axios'
|
|||
|
||||
import AlbumCard from '~/components/album/Card.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
import Layout from '~/components/ui/Layout.vue'
|
||||
import Spacer from '~/components/ui/Spacer.vue'
|
||||
import Loader from '~/components/ui/Loader.vue'
|
||||
|
||||
|
@ -72,9 +73,9 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="album-widget">
|
||||
<h2
|
||||
v-if="!!$slots.title"
|
||||
class="ui header"
|
||||
>
|
||||
<slot name="title" />
|
||||
<span
|
||||
|
@ -88,9 +89,9 @@ watch(
|
|||
v-model="query"
|
||||
@search="performSearch"
|
||||
/>
|
||||
<template v-if="!isLoading && albums.length >= 0">
|
||||
<Layout flex>
|
||||
<Loader v-if="isLoading" />
|
||||
<template v-if="!isLoading && albums.length > 0">
|
||||
<Layout flex>
|
||||
<album-card
|
||||
v-for="album in albums"
|
||||
:key="album.id"
|
||||
|
@ -117,4 +118,5 @@ watch(
|
|||
{{ t('components.audio.album.Widget.button.more') }}
|
||||
</Button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -61,7 +61,12 @@ fetchData()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="channel-widget">
|
||||
<h2
|
||||
v-if="!!$slots.title"
|
||||
>
|
||||
<slot name="title" />
|
||||
</h2>
|
||||
<slot />
|
||||
<Layout flex>
|
||||
<Loader v-if="isLoading" />
|
||||
|
|
|
@ -109,6 +109,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
|
|||
|
||||
<template>
|
||||
<!-- TODO: Use activity.vue -->
|
||||
<div class="track-widget">
|
||||
<h2 v-if="!!$slots.title">
|
||||
<slot name="title" />
|
||||
<span
|
||||
|
@ -116,6 +117,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
|
|||
class="ui tiny circular label"
|
||||
>{{ count }}</span>
|
||||
</h2>
|
||||
<Spacer :size="8" />
|
||||
<Alert
|
||||
v-if="count === 0"
|
||||
blue
|
||||
|
@ -125,9 +127,10 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
|
|||
{{ t('components.audio.track.Widget.empty.noResults') }}
|
||||
<Loader v-if="isLoading" />
|
||||
</Alert>
|
||||
<template
|
||||
<Section
|
||||
v-if="count > 0"
|
||||
medium-items
|
||||
alignLeft
|
||||
>
|
||||
<div class="funkwhale activity"
|
||||
v-for="object in objects"
|
||||
|
@ -209,10 +212,10 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
|
|||
square-small
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Section>
|
||||
<Loader v-if="isLoading" />
|
||||
<template v-if="nextPage">
|
||||
<Spacer :size="16"/>
|
||||
<Spacer />
|
||||
<Button
|
||||
primary
|
||||
@click="fetchData(nextPage as string)"
|
||||
|
@ -220,6 +223,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
|
|||
{{ t('components.audio.track.Widget.button.more') }}
|
||||
</Button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
|
|
@ -63,7 +63,7 @@ fetchData()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Layout main stack gap-64
|
||||
<Layout main stack
|
||||
:key="route?.name ?? undefined"
|
||||
v-title="labels.title"
|
||||
>
|
||||
|
@ -77,39 +77,40 @@ fetchData()
|
|||
</template>
|
||||
</playlist-widget>
|
||||
|
||||
<Section
|
||||
v-if="scope === 'all'"
|
||||
alignLeft
|
||||
:h2="t('components.library.Home.header.newChannels')"
|
||||
/>
|
||||
<channels-widget
|
||||
v-if="scope === 'all'"
|
||||
:show-modification-date="true"
|
||||
:limit="12"
|
||||
:filters="{ordering: '-creation_date', external: 'true'}"
|
||||
/>
|
||||
<Section
|
||||
alignLeft
|
||||
:h2="t('components.library.Home.header.recentlyListened')"
|
||||
>
|
||||
<template #title>
|
||||
{{ t('components.library.Home.header.newChannels') }}
|
||||
</template>
|
||||
</channels-widget>
|
||||
|
||||
<track-widget
|
||||
:url="'history/listenings/'"
|
||||
:filters="{ scope, ordering: '-creation_date', ...qualityFilters}"
|
||||
:websocket-handlers="['Listen']"
|
||||
/>
|
||||
</Section>
|
||||
<Section
|
||||
alignLeft
|
||||
:h2="t('components.library.Home.header.recentlyFavorited')"
|
||||
>
|
||||
<template #title>
|
||||
{{ t('components.library.Home.header.recentlyListened') }}
|
||||
</template>
|
||||
</track-widget>
|
||||
|
||||
<track-widget
|
||||
:url="'favorites/tracks/'"
|
||||
:filters="{scope: scope, ordering: '-creation_date'}"
|
||||
/>
|
||||
</Section>
|
||||
<Section
|
||||
alignLeft
|
||||
:h2="t('components.library.Home.header.recentlyAdded')"
|
||||
/>
|
||||
<album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}"/>
|
||||
>
|
||||
<template #title>
|
||||
{{ t('components.library.Home.header.recentlyFavorited') }}
|
||||
</template>
|
||||
</track-widget>
|
||||
|
||||
<album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}">
|
||||
<template #title>
|
||||
{{ t('components.library.Home.header.recentlyAdded') }}
|
||||
</template>
|
||||
</album-widget>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
|
@ -58,7 +58,7 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Layout stack>
|
||||
<div class="playlist-widget">
|
||||
<h2 v-if="!!$slots.title">
|
||||
<slot name="title" />
|
||||
</h2>
|
||||
|
@ -68,7 +68,7 @@ watch(
|
|||
<Layout
|
||||
v-else-if="objects.length > 0"
|
||||
flex
|
||||
style="gap: 16px; flex-wrap: wrap;"
|
||||
gap-16
|
||||
>
|
||||
<PlaylistCard
|
||||
v-for="playlist in objects"
|
||||
|
@ -97,6 +97,7 @@ watch(
|
|||
</Alert>
|
||||
|
||||
<template v-if="nextPage">
|
||||
<Spacer />
|
||||
<Button
|
||||
v-if="nextPage"
|
||||
primary
|
||||
|
@ -105,5 +106,5 @@ watch(
|
|||
{{ t('components.playlists.Widget.button.more') }}
|
||||
</Button>
|
||||
</template>
|
||||
</Layout>
|
||||
</div>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue