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

fix(front): Radio page layout

This commit is contained in:
ArneBo 2025-01-29 15:43:34 +01:00
parent 98e82813ec
commit 9635143e27
3 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
front/src/components/library/Radios.vue
View File

@ -14,6 +14,7 @@ import { useStore } from '~/store'
import axios from 'axios' import axios from 'axios'
import Layout from '~/components/ui/Layout.vue' import Layout from '~/components/ui/Layout.vue'
import Header from '~/components/ui/Header.vue'
import Section from '~/components/ui/Section.vue' import Section from '~/components/ui/Section.vue'
import Pagination from '~/components/ui/Pagination.vue' import Pagination from '~/components/ui/Pagination.vue'
import RadioCard from '~/components/radios/Card.vue' import RadioCard from '~/components/radios/Card.vue'
@ -113,10 +114,9 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<template> <template>
<Layout main stack> <Layout main stack>
<Section :h1="t('components.library.Radios.header.browse')" /> <Header :h1="t('components.library.Radios.header.browse')" />
<h2 class="ui header"> <Section alignLeft :h2="t('components.library.Radios.header.instance')">
{{ t('components.library.Radios.header.instance') }} </Section>
</h2>
<Layout flex> <Layout flex>
<radio-card <radio-card
v-if="isAuthenticated" v-if="isAuthenticated"
@ -146,7 +146,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
/> />
</Layout> </Layout>
<Spacer /> <Spacer />
<Section :h2="t('components.library.Radios.header.user')" :action="{ text:t('components.library.Radios.button.create'), to:'/library/radios/build' }" /> <Section alignLeft :h2="t('components.library.Radios.header.user')" :action="{ text:t('components.library.Radios.button.create'), to:'/library/radios/build' }" />
<Layout flex form <Layout flex form
:class="['ui', {'loading': isLoading}, 'form']" :class="['ui', {'loading': isLoading}, 'form']"
@submit.prevent="search" @submit.prevent="search"

1
front/src/components/radios/Button.vue
View File

@ -85,6 +85,7 @@ const toggleRadio = () => {
:round="playOnly" :round="playOnly"
class="play-button" class="play-button"
icon="bi-play-fill" icon="bi-play-fill"
:full="!playOnly"
:square="store.state.auth.authenticated && type === 'custom'" :square="store.state.auth.authenticated && type === 'custom'"
@click="toggleRadio" @click="toggleRadio"
> >

21
front/src/components/radios/Card.vue
View File

@ -68,7 +68,7 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
</div> </div>
</template> </template>
<template #footer> <template #action>
<Button <Button
v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id" v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
primary primary
@ -85,11 +85,6 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
:title="radio.name" :title="radio.name"
> >
<template #topright> <template #topright>
<radio-button
:type="type"
:custom-radio-id="customRadioId"
:object-id="objectId"
/>
</template> </template>
<template #default> <template #default>
@ -107,10 +102,15 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
> >
{{ radio.description }} {{ radio.description }}
</div> </div>
<Spacer />
</template> </template>
<template #footer> <template #action>
<radio-button
:type="type"
:custom-radio-id="customRadioId"
:object-id="objectId"
/>
<Spacer v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id" h grow />
<Button <Button
v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id" v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
primary primary
@ -125,8 +125,11 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
<style lang="scss" scoped> <style lang="scss" scoped>
.play-button { .play-button.is-icon-only {
top: 16px; top: 16px;
right: 16px; right: 16px;
} }
h6.title {
font-size: 3em;
}
</style> </style>