style(front): Section components on explore
This commit is contained in:
ArneBo
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,49 +73,50 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<h2
|
||||
v-if="!!$slots.title"
|
||||
class="ui header"
|
||||
>
|
||||
<slot name="title" />
|
||||
<span
|
||||
v-if="showCount"
|
||||
class="ui tiny circular label"
|
||||
>{{ count }}</span>
|
||||
</h2>
|
||||
<slot />
|
||||
<inline-search-bar
|
||||
v-if="search"
|
||||
v-model="query"
|
||||
@search="performSearch"
|
||||
/>
|
||||
<template v-if="!isLoading && albums.length >= 0">
|
||||
<Layout flex>
|
||||
<Loader v-if="isLoading" />
|
||||
<album-card
|
||||
v-for="album in albums"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
/>
|
||||
</Layout>
|
||||
</template>
|
||||
<slot
|
||||
v-if="!isLoading && albums.length === 0"
|
||||
name="empty-state"
|
||||
>
|
||||
<empty-state
|
||||
:refresh="true"
|
||||
@refresh="fetchData"
|
||||
/>
|
||||
</slot>
|
||||
<template v-if="nextPage">
|
||||
<Spacer />
|
||||
<Button
|
||||
v-if="nextPage"
|
||||
primary
|
||||
@click="fetchData(nextPage)"
|
||||
<div class="album-widget">
|
||||
<h2
|
||||
v-if="!!$slots.title"
|
||||
>
|
||||
{{ t('components.audio.album.Widget.button.more') }}
|
||||
</Button>
|
||||
</template>
|
||||
<slot name="title" />
|
||||
<span
|
||||
v-if="showCount"
|
||||
class="ui tiny circular label"
|
||||
>{{ count }}</span>
|
||||
</h2>
|
||||
<slot />
|
||||
<inline-search-bar
|
||||
v-if="search"
|
||||
v-model="query"
|
||||
@search="performSearch"
|
||||
/>
|
||||
<Loader v-if="isLoading" />
|
||||
<template v-if="!isLoading && albums.length > 0">
|
||||
<Layout flex>
|
||||
<album-card
|
||||
v-for="album in albums"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
/>
|
||||
</Layout>
|
||||
</template>
|
||||
<slot
|
||||
v-if="!isLoading && albums.length === 0"
|
||||
name="empty-state"
|
||||
>
|
||||
<empty-state
|
||||
:refresh="true"
|
||||
@refresh="fetchData"
|
||||
/>
|
||||
</slot>
|
||||
<template v-if="nextPage">
|
||||
<Spacer />
|
||||
<Button
|
||||
v-if="nextPage"
|
||||
primary
|
||||
@click="fetchData(nextPage)"
|
||||
>
|
||||
{{ 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,117 +109,121 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
|
|||
|
||||
<template>
|
||||
<!-- TODO: Use activity.vue -->
|
||||
<h2 v-if="!!$slots.title">
|
||||
<slot name="title" />
|
||||
<span
|
||||
v-if="showCount"
|
||||
class="ui tiny circular label"
|
||||
>{{ count }}</span>
|
||||
</h2>
|
||||
<Alert
|
||||
v-if="count === 0"
|
||||
blue
|
||||
style="text-align: center;"
|
||||
>
|
||||
<i class="bi bi-music-note-list" />
|
||||
{{ t('components.audio.track.Widget.empty.noResults') }}
|
||||
<Loader v-if="isLoading" />
|
||||
</Alert>
|
||||
<template
|
||||
v-if="count > 0"
|
||||
medium-items
|
||||
>
|
||||
<div class="funkwhale activity"
|
||||
v-for="object in objects"
|
||||
:key="object.id"
|
||||
:class="['item', itemClasses]"
|
||||
<div class="track-widget">
|
||||
<h2 v-if="!!$slots.title">
|
||||
<slot name="title" />
|
||||
<span
|
||||
v-if="showCount"
|
||||
class="ui tiny circular label"
|
||||
>{{ count }}</span>
|
||||
</h2>
|
||||
<Spacer :size="8" />
|
||||
<Alert
|
||||
v-if="count === 0"
|
||||
blue
|
||||
style="text-align: center;"
|
||||
>
|
||||
<div class="activity-image">
|
||||
<img
|
||||
v-if="object.track.album && object.track.album.cover"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
>
|
||||
<img
|
||||
v-else-if="object.track.cover"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
>
|
||||
<img
|
||||
v-else-if="object.track.artist_credit && object.track.artist_credit.length > 1"
|
||||
v-lazy="getArtistCoverUrl(object.track.artist_credit)"
|
||||
alt=""
|
||||
>
|
||||
<i
|
||||
v-else
|
||||
class="bi bi-vinyl-fill"
|
||||
/>
|
||||
<!-- TODO: Add Playbutton overlay -->
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<router-link
|
||||
class="funkwhale link artist"
|
||||
:to="{name: 'library.tracks.detail', params: {id: object.track.id}}"
|
||||
<i class="bi bi-music-note-list" />
|
||||
{{ t('components.audio.track.Widget.empty.noResults') }}
|
||||
<Loader v-if="isLoading" />
|
||||
</Alert>
|
||||
<Section
|
||||
v-if="count > 0"
|
||||
medium-items
|
||||
alignLeft
|
||||
>
|
||||
<div class="funkwhale activity"
|
||||
v-for="object in objects"
|
||||
:key="object.id"
|
||||
:class="['item', itemClasses]"
|
||||
>
|
||||
<div class="activity-image">
|
||||
<img
|
||||
v-if="object.track.album && object.track.album.cover"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
>
|
||||
<Heading :h3="object.track.title" title />
|
||||
</router-link>
|
||||
<Spacer :size="2"/>
|
||||
<div
|
||||
v-if="object.track.artist_credit"
|
||||
class="funkwhale link artist"
|
||||
>
|
||||
<span
|
||||
v-for="ac in object.track.artist_credit"
|
||||
:key="ac.artist.id"
|
||||
<img
|
||||
v-else-if="object.track.cover"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
>
|
||||
<img
|
||||
v-else-if="object.track.artist_credit && object.track.artist_credit.length > 1"
|
||||
v-lazy="getArtistCoverUrl(object.track.artist_credit)"
|
||||
alt=""
|
||||
>
|
||||
<i
|
||||
v-else
|
||||
class="bi bi-vinyl-fill"
|
||||
/>
|
||||
<!-- TODO: Add Playbutton overlay -->
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<router-link
|
||||
class="funkwhale link artist"
|
||||
:to="{name: 'library.tracks.detail', params: {id: object.track.id}}"
|
||||
>
|
||||
<Heading :h3="object.track.title" title />
|
||||
</router-link>
|
||||
<Spacer :size="2"/>
|
||||
<div
|
||||
v-if="object.track.artist_credit"
|
||||
class="funkwhale link artist"
|
||||
>
|
||||
<span
|
||||
v-for="ac in object.track.artist_credit"
|
||||
:key="ac.artist.id"
|
||||
>
|
||||
<router-link
|
||||
class="discrete link"
|
||||
:to="{ name: 'library.artists.detail', params: { id: ac.artist.id } }"
|
||||
>
|
||||
{{ ac.credit }}
|
||||
</router-link>
|
||||
<span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<TagsList
|
||||
label-classes="tiny"
|
||||
:truncate-size="20"
|
||||
:limit="2"
|
||||
:show-more="false"
|
||||
:tags="object.track.tags"
|
||||
/>
|
||||
<Spacer :size="4"/>
|
||||
<div
|
||||
v-if="isActivity"
|
||||
class="extra"
|
||||
>
|
||||
<router-link
|
||||
class="discrete link"
|
||||
:to="{ name: 'library.artists.detail', params: { id: ac.artist.id } }"
|
||||
class="funkwhale link user"
|
||||
:to="{name: 'profile.overview', params: {username: object.actor.name}}"
|
||||
>
|
||||
{{ ac.credit }}
|
||||
<span class="at symbol" />{{ object.actor.name }}
|
||||
</router-link>
|
||||
<span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
|
||||
</span>
|
||||
<span class="right floated"><human-date :date="object.creation_date" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<TagsList
|
||||
label-classes="tiny"
|
||||
:truncate-size="20"
|
||||
:limit="2"
|
||||
:show-more="false"
|
||||
:tags="object.track.tags"
|
||||
<play-button
|
||||
:account="object.actor"
|
||||
:dropdown-only="true"
|
||||
:track="object.track"
|
||||
square-small
|
||||
/>
|
||||
<Spacer :size="4"/>
|
||||
<div
|
||||
v-if="isActivity"
|
||||
class="extra"
|
||||
>
|
||||
<router-link
|
||||
class="funkwhale link user"
|
||||
:to="{name: 'profile.overview', params: {username: object.actor.name}}"
|
||||
>
|
||||
<span class="at symbol" />{{ object.actor.name }}
|
||||
</router-link>
|
||||
<span class="right floated"><human-date :date="object.creation_date" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<play-button
|
||||
:account="object.actor"
|
||||
:dropdown-only="true"
|
||||
:track="object.track"
|
||||
square-small
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<Loader v-if="isLoading" />
|
||||
<template v-if="nextPage">
|
||||
<Spacer :size="16"/>
|
||||
<Button
|
||||
primary
|
||||
@click="fetchData(nextPage as string)"
|
||||
>
|
||||
{{ t('components.audio.track.Widget.button.more') }}
|
||||
</Button>
|
||||
</template>
|
||||
</Section>
|
||||
<Loader v-if="isLoading" />
|
||||
<template v-if="nextPage">
|
||||
<Spacer />
|
||||
<Button
|
||||
primary
|
||||
@click="fetchData(nextPage as string)"
|
||||
>
|
||||
{{ 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')"
|
||||
>
|
||||
<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.newChannels') }}
|
||||
</template>
|
||||
</channels-widget>
|
||||
|
||||
<track-widget
|
||||
:url="'history/listenings/'"
|
||||
:filters="{ scope, ordering: '-creation_date', ...qualityFilters}"
|
||||
:websocket-handlers="['Listen']"
|
||||
>
|
||||
<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.recentlyListened') }}
|
||||
</template>
|
||||
</track-widget>
|
||||
|
||||
<track-widget
|
||||
:url="'favorites/tracks/'"
|
||||
:filters="{scope: scope, ordering: '-creation_date'}"
|
||||
>
|
||||
<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