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

refactor(fron): Tag detail page

This commit is contained in:
ArneBo 2025-01-26 00:47:52 +01:00
parent d045478804
commit b0ef62498d
1 changed files with 76 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
front/src/components/library/TagDetail.vue
View File

@ -8,6 +8,9 @@ import TrackWidget from '~/components/audio/track/Widget.vue'
import AlbumWidget from '~/components/album/Widget.vue' import AlbumWidget from '~/components/album/Widget.vue'
import ArtistWidget from '~/components/artist/Widget.vue' import ArtistWidget from '~/components/artist/Widget.vue'
import RadioButton from '~/components/radios/Button.vue' import RadioButton from '~/components/radios/Button.vue'
import Layout from '~/components/ui/Layout.vue'
import Button from '~/components/ui/Button.vue'
import Spacer from '~/components/ui/Spacer.vue'
interface Props { interface Props {
id: string id: string
@ -24,25 +27,28 @@ const labels = computed(() => ({
</script> </script>
<template> <template>
<main v-title="labels.title"> <Layout main stack v-title="labels.title">
<section class="ui vertical stripe segment"> <h1 class="ui header">
<h2 class="ui header"> <span class="funkwhale solid raised secondary pill">
<span class="ui circular huge hashtag label component-label"> <span class="pill-content">
{{ labels.title }} {{ labels.title }}
</span> </span>
</h2> </span>
</h1>
<Layout flex class="buttons">
<radio-button <radio-button
type="tag" type="tag"
:object-id="id" :object-id="id"
/> />
<router-link <Button
v-if="store.state.auth.availablePermissions['library']" v-if="store.state.auth.availablePermissions['library']"
class="ui right floated button" icon="bi-wrench"
secondary
:to="{name: 'manage.library.tags.detail', params: {id: id}}" :to="{name: 'manage.library.tags.detail', params: {id: id}}"
> >
<i class="wrench icon" />
{{ t('components.library.TagDetail.link.moderation') }} {{ t('components.library.TagDetail.link.moderation') }}
</router-link> </Button>
</Layout>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<div class="ui row"> <div class="ui row">
@ -57,8 +63,7 @@ const labels = computed(() => ({
</router-link> </router-link>
</template> </template>
</artist-widget> </artist-widget>
<div class="ui hidden divider" /> <Spacer />
<div class="ui hidden divider" />
<h3 class="ui header"> <h3 class="ui header">
{{ t('components.library.TagDetail.header.channels') }} {{ t('components.library.TagDetail.header.channels') }}
</h3> </h3>
@ -68,8 +73,7 @@ const labels = computed(() => ({
:limit="12" :limit="12"
:filters="{tag: id, ordering: '-creation_date'}" :filters="{tag: id, ordering: '-creation_date'}"
/> />
<div class="ui hidden divider" /> <Spacer />
<div class="ui hidden divider" />
<album-widget <album-widget
:key="'album' + id" :key="'album' + id"
:show-count="true" :show-count="true"
@ -82,8 +86,7 @@ const labels = computed(() => ({
</router-link> </router-link>
</template> </template>
</album-widget> </album-widget>
<div class="ui hidden divider" /> <Spacer />
<div class="ui hidden divider" />
<track-widget <track-widget
:key="'track' + id" :key="'track' + id"
:show-count="true" :show-count="true"
@ -97,8 +100,14 @@ const labels = computed(() => ({
{{ t('components.library.TagDetail.header.tracks') }} {{ t('components.library.TagDetail.header.tracks') }}
</template> </template>
</track-widget> </track-widget>
<div class="ui clearing hidden divider" />
</div> </div>
</section> </Layout>
</main>
</template> </template>
<style lang="scss" scoped>
h1 > .pill > .pill-content {
font-size: 48px;
line-height: 48px;
padding: 20px 30px;
}
</style>