MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-10-29 15:55:02 -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>
<template #options>
<index-button-list :indices="albums.indices" />
<div class="columns">
<div class="column">
<div
class="is-size-7 is-uppercase"
v-text="$t('options.filter.title')"
/>
<list-options>
<template #filter>
<control-switch v-model="uiStore.hideSingles">
<template #label>
<span v-text="$t('options.filter.hide-singles')" />
@ -29,18 +25,14 @@
<span v-text="$t('options.filter.hide-spotify-help')" />
</template>
</control-switch>
</div>
<div class="column">
<div
class="is-size-7 is-uppercase"
v-text="$t('options.sort.title')"
/>
</template>
<template #sort>
<control-dropdown
v-model:value="uiStore.albumsSort"
:options="groupings"
/>
</div>
</div>
</template>
</list-options>
</template>
<template #heading-left>
<heading-title :content="heading" />
@ -60,6 +52,7 @@ import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import IndexButtonList from '@/components/IndexButtonList.vue'
import ListAlbums from '@/components/ListAlbums.vue'
import ListOptions from '@/components/ListOptions.vue'
import TabsMusic from '@/components/TabsMusic.vue'
import { useServicesStore } from '@/stores/services'
import { useUIStore } from '@/stores/ui'
@ -83,6 +76,7 @@ export default {
HeadingTitle,
IndexButtonList,
ListAlbums,
ListOptions,
TabsMusic
},
beforeRouteEnter(to, from, next) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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