MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-07-20 22:11:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Avoid styling at page level

Browse Source
This commit is contained in:
Alain Nussbaumer 2025-03-15 10:38:38 +01:00
parent 3cb26a8b77
commit 2e38df1c40
9 changed files with 100 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web-src/src/components/ListOptions.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div class="columns">
<div v-if="$slots.filter" class="column">
<div class="is-size-7 is-uppercase" v-text="$t('options.filter.title')" />
<slot name="filter" />
</div>
<div v-if="$slots.sort" class="column">
<div class="is-size-7 is-uppercase" v-text="$t('options.sort.title')" />
<slot name="sort" />
</div>
</div>
</template>
<script>
export default {
name: 'ListOptions'
}
</script>

22
web-src/src/pages/PageAlbums.vue
View File

@ -4,12 +4,8 @@
<content-with-heading> <content-with-heading>
<template #options> <template #options>
<index-button-list :indices="albums.indices" /> <index-button-list :indices="albums.indices" />
<div class="columns"> <list-options>
<div class="column"> <template #filter>
<div
class="is-size-7 is-uppercase"
v-text="$t('options.filter.title')"
/>
<control-switch v-model="uiStore.hideSingles"> <control-switch v-model="uiStore.hideSingles">
<template #label> <template #label>
<span v-text="$t('options.filter.hide-singles')" /> <span v-text="$t('options.filter.hide-singles')" />
@ -29,18 +25,14 @@
<span v-text="$t('options.filter.hide-spotify-help')" /> <span v-text="$t('options.filter.hide-spotify-help')" />
</template> </template>
</control-switch> </control-switch>
</div> </template>
<div class="column"> <template #sort>
<div
class="is-size-7 is-uppercase"
v-text="$t('options.sort.title')"
/>
<control-dropdown <control-dropdown
v-model:value="uiStore.albumsSort" v-model:value="uiStore.albumsSort"
:options="groupings" :options="groupings"
/> />
</div> </template>
</div> </list-options>
</template> </template>
<template #heading-left> <template #heading-left>
<heading-title :content="heading" /> <heading-title :content="heading" />
@ -60,6 +52,7 @@ import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue' import HeadingTitle from '@/components/HeadingTitle.vue'
import IndexButtonList from '@/components/IndexButtonList.vue' import IndexButtonList from '@/components/IndexButtonList.vue'
import ListAlbums from '@/components/ListAlbums.vue' import ListAlbums from '@/components/ListAlbums.vue'
import ListOptions from '@/components/ListOptions.vue'
import TabsMusic from '@/components/TabsMusic.vue' import TabsMusic from '@/components/TabsMusic.vue'
import { useServicesStore } from '@/stores/services' import { useServicesStore } from '@/stores/services'
import { useUIStore } from '@/stores/ui' import { useUIStore } from '@/stores/ui'
@ -83,6 +76,7 @@ export default {
HeadingTitle, HeadingTitle,
IndexButtonList, IndexButtonList,
ListAlbums, ListAlbums,
ListOptions,
TabsMusic TabsMusic
}, },
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {

24
web-src/src/pages/PageArtist.vue
View File

@ -2,12 +2,8 @@
<div> <div>
<content-with-heading> <content-with-heading>
<template #options> <template #options>
<div class="columns"> <list-options>
<div class="column"> <template #filter>
<div
class="is-size-7 is-uppercase"
v-text="$t('page.artist.filter.title')"
/>
<control-switch <control-switch
v-if="servicesStore.isSpotifyEnabled" v-if="servicesStore.isSpotifyEnabled"
v-model="uiStore.hideSpotify" v-model="uiStore.hideSpotify"
@ -19,18 +15,14 @@
<span v-text="$t('page.artist.filter.hide-spotify-help')" /> <span v-text="$t('page.artist.filter.hide-spotify-help')" />
</template> </template>
</control-switch> </control-switch>
</div> </template>
<div class="column"> <template #sort>
<div
class="is-size-7 is-uppercase"
v-text="$t('page.artist.sort.title')"
/>
<control-dropdown <control-dropdown
v-model:value="uiStore.artistAlbumsSort" v-model:value="uiStore.artistAlbumsSort"
:options="groupings" :options="groupings"
/> />
</div> </template>
</div> </list-options>
</template> </template>
<template #heading-left> <template #heading-left>
<heading-title :content="heading" /> <heading-title :content="heading" />
@ -61,8 +53,9 @@ import ControlButton from '@/components/ControlButton.vue'
import ControlDropdown from '@/components/ControlDropdown.vue' import ControlDropdown from '@/components/ControlDropdown.vue'
import ControlSwitch from '@/components/ControlSwitch.vue' import ControlSwitch from '@/components/ControlSwitch.vue'
import { GroupedList } from '@/lib/GroupedList' import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '../components/HeadingTitle.vue' import HeadingTitle from '@/components/HeadingTitle.vue'
import ListAlbums from '@/components/ListAlbums.vue' import ListAlbums from '@/components/ListAlbums.vue'
import ListOptions from '@/components/ListOptions.vue'
import ModalDialogArtist from '@/components/ModalDialogArtist.vue' import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
import { useServicesStore } from '@/stores/services' import { useServicesStore } from '@/stores/services'
import { useUIStore } from '@/stores/ui' import { useUIStore } from '@/stores/ui'
@ -90,6 +83,7 @@ export default {
ControlSwitch, ControlSwitch,
HeadingTitle, HeadingTitle,
ListAlbums, ListAlbums,
ListOptions,
ModalDialogArtist ModalDialogArtist
}, },
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {

22
web-src/src/pages/PageArtistTracks.vue
View File

@ -3,12 +3,8 @@
<content-with-heading> <content-with-heading>
<template #options> <template #options>
<index-button-list :indices="tracks.indices" /> <index-button-list :indices="tracks.indices" />
<div class="columns"> <list-options>
<div class="column"> <template #filter>
<p
class="is-size-7 is-uppercase"
v-text="$t('options.filter.title')"
/>
<control-switch <control-switch
v-if="servicesStore.isSpotifyEnabled" v-if="servicesStore.isSpotifyEnabled"
v-model="uiStore.hideSpotify" v-model="uiStore.hideSpotify"
@ -20,18 +16,14 @@
<span v-text="$t('options.filter.hide-spotify-help')" /> <span v-text="$t('options.filter.hide-spotify-help')" />
</template> </template>
</control-switch> </control-switch>
</div> </template>
<div class="column"> <template #sort>
<p
class="is-size-7 is-uppercase"
v-text="$t('options.sort.title')"
/>
<control-dropdown <control-dropdown
v-model:value="uiStore.artistTracksSort" v-model:value="uiStore.artistTracksSort"
:options="groupings" :options="groupings"
/> />
</div> </template>
</div> </list-options>
</template> </template>
<template #heading-left> <template #heading-left>
<heading-title :content="heading" /> <heading-title :content="heading" />
@ -64,6 +56,7 @@ import ControlSwitch from '@/components/ControlSwitch.vue'
import { GroupedList } from '@/lib/GroupedList' import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue' import HeadingTitle from '@/components/HeadingTitle.vue'
import IndexButtonList from '@/components/IndexButtonList.vue' import IndexButtonList from '@/components/IndexButtonList.vue'
import ListOptions from '@/components/ListOptions.vue'
import ListTracks from '@/components/ListTracks.vue' import ListTracks from '@/components/ListTracks.vue'
import ModalDialogArtist from '@/components/ModalDialogArtist.vue' import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
import { useServicesStore } from '@/stores/services' import { useServicesStore } from '@/stores/services'
@ -92,6 +85,7 @@ export default {
ControlSwitch, ControlSwitch,
HeadingTitle, HeadingTitle,
IndexButtonList, IndexButtonList,
ListOptions,
ListTracks, ListTracks,
ModalDialogArtist ModalDialogArtist
}, },

43
web-src/src/pages/PageArtists.vue
View File

@ -4,12 +4,8 @@
<content-with-heading> <content-with-heading>
<template #options> <template #options>
<index-button-list :indices="artists.indices" /> <index-button-list :indices="artists.indices" />
<div class="columns"> <list-options>
<div class="column"> <template #filter>
<div
class="is-size-7 is-uppercase"
v-text="$t('options.filter.title')"
/>
<control-switch v-model="uiStore.hideSingles"> <control-switch v-model="uiStore.hideSingles">
<template #label> <template #label>
<span v-text="$t('options.filter.hide-singles')" /> <span v-text="$t('options.filter.hide-singles')" />
@ -18,28 +14,25 @@
<span v-text="$t('options.filter.hide-singles-help')" /> <span v-text="$t('options.filter.hide-singles-help')" />
</template> </template>
</control-switch> </control-switch>
<div v-if="servicesStore.isSpotifyEnabled" class="field"> <control-switch
<control-switch v-model="uiStore.hideSpotify"> v-if="servicesStore.isSpotifyEnabled"
<template #label> v-model="uiStore.hideSpotify"
<span v-text="$t('options.filter.hide-spotify')" /> >
</template> <template #label>
<template #help> <span v-text="$t('options.filter.hide-spotify')" />
<span v-text="$t('options.filter.hide-spotify-help')" /> </template>
</template> <template #help>
</control-switch> <span v-text="$t('options.filter.hide-spotify-help')" />
</div> </template>
</div> </control-switch>
<div class="column"> </template>
<div <template #sort>
class="is-size-7 is-uppercase"
v-text="$t('options.sort.title')"
/>
<control-dropdown <control-dropdown
v-model:value="uiStore.artistsSort" v-model:value="uiStore.artistsSort"
:options="groupings" :options="groupings"
/> />
</div> </template>
</div> </list-options>
</template> </template>
<template #heading-left> <template #heading-left>
<heading-title :content="heading" /> <heading-title :content="heading" />
@ -59,6 +52,7 @@ import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue' import HeadingTitle from '@/components/HeadingTitle.vue'
import IndexButtonList from '@/components/IndexButtonList.vue' import IndexButtonList from '@/components/IndexButtonList.vue'
import ListArtists from '@/components/ListArtists.vue' import ListArtists from '@/components/ListArtists.vue'
import ListOptions from '@/components/ListOptions.vue'
import TabsMusic from '@/components/TabsMusic.vue' import TabsMusic from '@/components/TabsMusic.vue'
import { useServicesStore } from '@/stores/services' import { useServicesStore } from '@/stores/services'
import { useUIStore } from '@/stores/ui' import { useUIStore } from '@/stores/ui'
@ -82,6 +76,7 @@ export default {
HeadingTitle, HeadingTitle,
IndexButtonList, IndexButtonList,
ListArtists, ListArtists,
ListOptions,
TabsMusic TabsMusic
}, },
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {

14
web-src/src/pages/PageComposerTracks.vue
View File

@ -3,18 +3,14 @@
<content-with-heading> <content-with-heading>
<template #options> <template #options>
<index-button-list :indices="tracks.indices" /> <index-button-list :indices="tracks.indices" />
<div class="columns"> <list-options>
<div class="column"> <template #sort>
<div
class="is-size-7 is-uppercase"
v-text="$t('options.sort.title')"
/>
<control-dropdown <control-dropdown
v-model:value="uiStore.composerTracksSort" v-model:value="uiStore.composerTracksSort"
:options="groupings" :options="groupings"
/> />
</div> </template>
</div> </list-options>
</template> </template>
<template #heading-left> <template #heading-left>
<heading-title :content="heading" /> <heading-title :content="heading" />
@ -46,6 +42,7 @@ import ControlDropdown from '@/components/ControlDropdown.vue'
import { GroupedList } from '@/lib/GroupedList' import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue' import HeadingTitle from '@/components/HeadingTitle.vue'
import IndexButtonList from '@/components/IndexButtonList.vue' import IndexButtonList from '@/components/IndexButtonList.vue'
import ListOptions from '@/components/ListOptions.vue'
import ListTracks from '@/components/ListTracks.vue' import ListTracks from '@/components/ListTracks.vue'
import ModalDialogComposer from '@/components/ModalDialogComposer.vue' import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
import { useUIStore } from '@/stores/ui' import { useUIStore } from '@/stores/ui'
@ -72,6 +69,7 @@ export default {
ControlDropdown, ControlDropdown,
HeadingTitle, HeadingTitle,
IndexButtonList, IndexButtonList,
ListOptions,
ListTracks, ListTracks,
ModalDialogComposer ModalDialogComposer
}, },

14
web-src/src/pages/PageGenreTracks.vue
View File

@ -3,18 +3,14 @@
<content-with-heading> <content-with-heading>
<template #options> <template #options>
<index-button-list :indices="tracks.indices" /> <index-button-list :indices="tracks.indices" />
<div class="columns"> <list-options>
<div class="column"> <template #sort>
<div
class="is-size-7 is-uppercase"
v-text="$t('options.sort.title')"
/>
<control-dropdown <control-dropdown
v-model:value="uiStore.genreTracksSort" v-model:value="uiStore.genreTracksSort"
:options="groupings" :options="groupings"
/> />
</div> </template>
</div> </list-options>
</template> </template>
<template #heading-left> <template #heading-left>
<heading-title :content="heading" /> <heading-title :content="heading" />
@ -47,6 +43,7 @@ import ControlDropdown from '@/components/ControlDropdown.vue'
import { GroupedList } from '@/lib/GroupedList' import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue' import HeadingTitle from '@/components/HeadingTitle.vue'
import IndexButtonList from '@/components/IndexButtonList.vue' import IndexButtonList from '@/components/IndexButtonList.vue'
import ListOptions from '@/components/ListOptions.vue'
import ListTracks from '@/components/ListTracks.vue' import ListTracks from '@/components/ListTracks.vue'
import ModalDialogGenre from '@/components/ModalDialogGenre.vue' import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
import { useUIStore } from '@/stores/ui' import { useUIStore } from '@/stores/ui'
@ -73,6 +70,7 @@ export default {
ControlDropdown, ControlDropdown,
HeadingTitle, HeadingTitle,
IndexButtonList, IndexButtonList,
ListOptions,
ListTracks, ListTracks,
ModalDialogGenre ModalDialogGenre
}, },

25
web-src/src/pages/PageSearchLibrary.vue
View File

@ -5,7 +5,7 @@
<div class="column is-four-fifths"> <div class="column is-four-fifths">
<form @submit.prevent="search"> <form @submit.prevent="search">
<div class="field"> <div class="field">
<p class="control has-icons-left"> <div class="control has-icons-left">
<input <input
ref="search_field" ref="search_field"
v-model="query" v-model="query"
@ -15,7 +15,7 @@
autocomplete="off" autocomplete="off"
/> />
<mdicon class="icon is-left" name="magnify" size="16" /> <mdicon class="icon is-left" name="magnify" size="16" />
</p> </div>
<i18n-t <i18n-t
tag="p" tag="p"
class="help has-text-centered" class="help has-text-centered"
@ -58,23 +58,22 @@
</template> </template>
<template v-if="!expanded" #footer> <template v-if="!expanded" #footer>
<nav v-if="showAllButton(items)" class="level"> <nav v-if="showAllButton(items)" class="level">
<p class="level-item"> <div class="level-item">
<a <control-button
class="button is-small is-rounded" :button="{
@click="expand(type)" handler: () => expand(type),
v-text=" title: $t(
$t(
`page.search.show-${type}s`, `page.search.show-${type}s`,
{ count: $n(items.total) }, { count: $n(items.total) },
items.total items.total
) )
" }"
/> />
</p> </div>
</nav> </nav>
<p v-if="!items.total" class="has-text-centered-mobile"> <div v-if="!items.total" class="has-text-centered-mobile">
<i v-text="$t('page.search.no-results')" /> <i v-text="$t('page.search.no-results')" />
</p> </div>
</template> </template>
</content-with-heading> </content-with-heading>
</template> </template>
@ -82,6 +81,7 @@
<script> <script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue' import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList' import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue' import HeadingTitle from '@/components/HeadingTitle.vue'
import ListAlbums from '@/components/ListAlbums.vue' import ListAlbums from '@/components/ListAlbums.vue'
@ -108,6 +108,7 @@ export default {
name: 'PageSearchLibrary', name: 'PageSearchLibrary',
components: { components: {
ContentWithHeading, ContentWithHeading,
ControlButton,
HeadingTitle, HeadingTitle,
ListAlbums, ListAlbums,
ListArtists, ListArtists,

25
web-src/src/pages/PageSearchSpotify.vue
View File

@ -5,7 +5,7 @@
<div class="column is-four-fifths"> <div class="column is-four-fifths">
<form @submit.prevent="search"> <form @submit.prevent="search">
<div class="field"> <div class="field">
<p class="control has-icons-left"> <div class="control has-icons-left">
<input <input
ref="search_field" ref="search_field"
v-model="query" v-model="query"
@ -15,7 +15,7 @@
autocomplete="off" autocomplete="off"
/> />
<mdicon class="icon is-left" name="magnify" size="16" /> <mdicon class="icon is-left" name="magnify" size="16" />
</p> </div>
</div> </div>
</form> </form>
<div class="field is-grouped is-grouped-multiline mt-4"> <div class="field is-grouped is-grouped-multiline mt-4">
@ -55,23 +55,22 @@
</template> </template>
<template v-if="!expanded" #footer> <template v-if="!expanded" #footer>
<nav v-if="showAllButton(items)" class="level"> <nav v-if="showAllButton(items)" class="level">
<p class="level-item"> <div class="level-item">
<a <control-button
class="button is-small is-rounded" :button="{
@click="expand(type)" handler: () => expand(type),
v-text=" title: $t(
$t(
`page.spotify.search.show-${type}s`, `page.spotify.search.show-${type}s`,
{ count: `${$n(items.total)}` }, { count: `${$n(items.total)}` },
items.total items.total
) )
" }"
/> />
</p> </div>
</nav> </nav>
<p v-if="!items.total" class="has-text-centered-mobile"> <div v-if="!items.total" class="has-text-centered-mobile">
<i v-text="$t(`page.spotify.search.no-results`)" /> <i v-text="$t(`page.spotify.search.no-results`)" />
</p> </div>
</template> </template>
</content-with-heading> </content-with-heading>
</template> </template>
@ -79,6 +78,7 @@
<script> <script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue' import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import HeadingTitle from '@/components/HeadingTitle.vue' import HeadingTitle from '@/components/HeadingTitle.vue'
import ListAlbumsSpotify from '@/components/ListAlbumsSpotify.vue' import ListAlbumsSpotify from '@/components/ListAlbumsSpotify.vue'
import ListArtistsSpotify from '@/components/ListArtistsSpotify.vue' import ListArtistsSpotify from '@/components/ListArtistsSpotify.vue'
@ -97,6 +97,7 @@ const PAGE_SIZE = 3,
export default { export default {
name: 'PageSearchSpotify', name: 'PageSearchSpotify',
components: { components: {
ControlButton,
ContentWithHeading, ContentWithHeading,
HeadingTitle, HeadingTitle,
ListAlbumsSpotify, ListAlbumsSpotify,