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

View File

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