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

refactor(front): use header and section components on explore

This commit is contained in:
ArneBo 2025-01-29 18:15:32 +01:00
parent 44b26a3cac
commit 17415093f1
4 changed files with 35 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/components/audio/track/Widget.vue
View File

@ -230,7 +230,7 @@ watch(
<template v-if="nextPage"> <template v-if="nextPage">
<Spacer :size="16"/> <Spacer :size="16"/>
<Button <Button
secondary primary
@click="fetchData(nextPage as string)" @click="fetchData(nextPage as string)"
> >
{{ t('components.audio.track.Widget.button.more') }} {{ t('components.audio.track.Widget.button.more') }}

4
front/src/components/library/Albums.vue
View File

@ -131,9 +131,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<template> <template>
<Layout stack main v-title="labels.title"> <Layout stack main v-title="labels.title">
<Header <Header :h1="t('components.library.Albums.header.browse')" />
:h1="t('components.library.Albums.header.browse')"
/>
<Layout form flex <Layout form flex
:class="['ui', {'loading': isLoading}, 'form']" :class="['ui', {'loading': isLoading}, 'form']"
@submit.prevent="search" @submit.prevent="search"

69
front/src/components/library/Home.vue
View File

@ -11,6 +11,7 @@ import PlaylistWidget from '~/components/playlists/Widget.vue'
import TrackWidget from '~/components/audio/track/Widget.vue' import TrackWidget from '~/components/audio/track/Widget.vue'
import AlbumWidget from '~/components/album/Widget.vue' import AlbumWidget from '~/components/album/Widget.vue'
import Layout from '~/components/ui/Layout.vue' import Layout from '~/components/ui/Layout.vue'
import Header from '~/components/ui/Header.vue'
import useErrorHandler from '~/composables/useErrorHandler' import useErrorHandler from '~/composables/useErrorHandler'
import useLogger from '~/composables/useLogger' import useLogger from '~/composables/useLogger'
@ -65,8 +66,7 @@ fetchData()
:key="route?.name ?? undefined" :key="route?.name ?? undefined"
v-title="labels.title" v-title="labels.title"
> >
<h1>{{ t('components.Sidebar.header.explore') }}</h1> <Header :h1="t('components.Sidebar.header.explore')" />
<playlist-widget <playlist-widget
:url="'playlists/'" :url="'playlists/'"
:filters="{scope: scope, playable: true, ordering: '-modification_date'}" :filters="{scope: scope, playable: true, ordering: '-modification_date'}"
@ -77,7 +77,7 @@ fetchData()
</playlist-widget> </playlist-widget>
<template v-if="scope === 'all'"> <template v-if="scope === 'all'">
<h3>{{ t('components.library.Home.header.newChannels') }}</h3> <h2>{{ t('components.library.Home.header.newChannels') }}</h2>
<channels-widget <channels-widget
:show-modification-date="true" :show-modification-date="true"
:limit="12" :limit="12"
@ -85,40 +85,33 @@ fetchData()
/> />
</template> </template>
<section class="ui vertical stripe segment"> <Section alignLeft>
<div class="ui stackable three column grid"> <track-widget
<div class="column"> :url="'history/listenings/'"
<track-widget :filters="{ scope, ordering: '-creation_date', ...qualityFilters}"
:url="'history/listenings/'" :websocket-handlers="['Listen']"
:filters="{ scope, ordering: '-creation_date', ...qualityFilters}" >
:websocket-handlers="['Listen']" <template #title>
> {{ t('components.library.Home.header.recentlyListened') }}
<template #title> </template>
{{ t('components.library.Home.header.recentlyListened') }} </track-widget>
</template> </Section>
</track-widget> <Section>
</div> <track-widget
<div class="column"> :url="'favorites/tracks/'"
<track-widget :filters="{scope: scope, ordering: '-creation_date'}"
:url="'favorites/tracks/'" >
:filters="{scope: scope, ordering: '-creation_date'}" <template #title>
> {{ t('components.library.Home.header.recentlyFavorited') }}
<template #title> </template>
{{ t('components.library.Home.header.recentlyFavorited') }} </track-widget>
</template> </Section>
</track-widget> <Section>
</div> <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}">
</div> <template #title>
<div class="ui section hidden divider" /> {{ t('components.library.Home.header.recentlyAdded') }}
<div class="ui stackable one column grid"> </template>
<div class="column"> </album-widget>
<album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}"> </Section>
<template #title>
{{ t('components.library.Home.header.recentlyAdded') }}
</template>
</album-widget>
</div>
</div>
</section>
</Layout> </Layout>
</template> </template>

5
front/src/components/playlists/Widget.vue
View File

@ -59,9 +59,9 @@ watch(
<template> <template>
<Layout stack> <Layout stack>
<h3 v-if="!!$slots.title"> <h2 v-if="!!$slots.title">
<slot name="title" /> <slot name="title" />
</h3> </h2>
<Loader v-if="isLoading"/> <Loader v-if="isLoading"/>
@ -97,7 +97,6 @@ watch(
</Alert> </Alert>
<template v-if="nextPage"> <template v-if="nextPage">
<Spacer v grow/>
<Button <Button
v-if="nextPage" v-if="nextPage"
primary primary