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

feat(ui): WIP Artist Page

This commit is contained in:
ArneBo 2024-12-29 13:39:45 +01:00 committed by upsiflu
parent 52b3d43f6b
commit c638ef31a2
2 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/components/artist/Card.vue
View File

@ -5,6 +5,7 @@ import { useStore } from '~/store'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import TagsList from '~/components/tags/List.vue' import TagsList from '~/components/tags/List.vue'
import Card from '~/components/ui/Card.vue'
import type { Artist } from '~/types' import type { Artist } from '~/types'
@ -43,7 +44,7 @@ const imageUrl = computed(() => cover.value?.urls.original
<template> <template>
<span style="position:absolute; font-size:.7em">/front/src/components/artist/Card.vue</span> <span style="position:absolute; font-size:.7em">/front/src/components/artist/Card.vue</span>
<fw-card <Card
:title="artist.name" :title="artist.name"
:image="imageUrl" :image="imageUrl"
:tags="artist.tags" :tags="artist.tags"
@ -75,7 +76,7 @@ const imageUrl = computed(() => cover.value?.urls.original
Go to artist Go to artist
</router-link> </router-link>
</fw-card> </Card>
</template> </template>
<style scoped> <style scoped>

39
front/src/components/library/Artists.vue
View File

@ -17,7 +17,11 @@ import $ from 'jquery'
import TagsSelector from '~/components/library/TagsSelector.vue' import TagsSelector from '~/components/library/TagsSelector.vue'
import Pagination from '~/components/vui/Pagination.vue' import Pagination from '~/components/vui/Pagination.vue'
import Link from '~/components/ui/Link.vue'
import Card from '~/components/ui/Card.vue'
import Layout from '~/components/ui/Layout.vue'
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
import Input from '~/components/ui/Input.vue'
import useSharedLabels from '~/composables/locale/useSharedLabels' import useSharedLabels from '~/composables/locale/useSharedLabels'
import useOrdering from '~/composables/navigation/useOrdering' import useOrdering from '~/composables/navigation/useOrdering'
@ -108,7 +112,7 @@ onOrderingUpdate(() => {
fetchData() fetchData()
}) })
onMounted(() => $('.ui.dropdown').dropdown()) // onMounted(() => $('.ui.dropdown').dropdown())
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
@ -120,10 +124,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</script> </script>
<template> <template>
<main v-title="labels.title"> <Layout stack main v-title="labels.title">
<section class="ui vertical stripe segment"> <h2>
/front/src/components/library/Artists.vue
<h2 class="ui header">
{{ t('components.library.Artists.header.browse') }} {{ t('components.library.Artists.header.browse') }}
</h2> </h2>
<form <form
@ -136,19 +138,25 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
{{ t('components.library.Artists.label.search') }} {{ t('components.library.Artists.label.search') }}
</label> </label>
<div class="ui action input"> <div class="ui action input">
<input <Input
id="artist-search" id="artist-search"
v-model="query" v-model="query"
type="text" type="text"
name="search" name="search"
autofocus
:placeholder="labels.searchPlaceholder" :placeholder="labels.searchPlaceholder"
> >
<Button <template #input-right>
type="submit" <Button
icon="bi-search" type="submit"
:aria-label="t('components.library.Artists.button.search')" auto
> primary
</Button> icon="bi-search"
:aria-label="t('components.library.Artists.button.search')"
>
</Button>
</template>
</Input>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
@ -208,13 +216,13 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
id="excludeCompilation" id="excludeCompilation"
class="ui toggle checkbox" class="ui toggle checkbox"
> >
<input <Input
id="exclude-compilation" id="exclude-compilation"
v-model="excludeCompilation" v-model="excludeCompilation"
true-value="true" true-value="true"
false-value="null" false-value="null"
type="checkbox" type="checkbox"
> />
<label <label
for="exclude-compilation" for="exclude-compilation"
class="visually-hidden" class="visually-hidden"
@ -266,6 +274,5 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
:total="result.count" :total="result.count"
/> />
</div> </div>
</section> </Layout>
</main>
</template> </template>