style(front): Section components on explore

This commit is contained in:
ArneBo 2025-02-05 13:05:20 +01:00
parent bbc239b96c
commit 16c74b4078
5 changed files with 192 additions and 179 deletions

View File

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

View File

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

View File

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

View File

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

View File

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