MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-26 23:25:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web-src] Reduce size of empty search result message

Browse Source
This commit is contained in:
chme 2020-10-17 11:42:50 +02:00
parent 4331153966
commit f9c184cc75
3 changed files with 84 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
web-src/src/pages/PageSearch.vue
View File

@ -29,7 +29,7 @@
<tabs-search></tabs-search>
<!-- Tracks -->
<content-with-heading v-if="show_tracks">
<content-with-heading v-if="show_tracks && tracks.total">
<template slot="heading-left">
<p class="title is-4">Tracks</p>
</template>
@ -42,12 +42,16 @@
<a class="button is-light is-small is-rounded" v-on:click="open_search_tracks">Show all {{ tracks.total.toLocaleString() }} tracks</a>
</p>
</nav>
<p v-if="!tracks.total">No results</p>
</template>
</content-with-heading>
<content-text v-if="show_tracks && !tracks.total" class="mt-6">
<template slot="content">
<p><i>No tracks found</i></p>
</template>
</content-text>
<!-- Artists -->
<content-with-heading v-if="show_artists">
<content-with-heading v-if="show_artists && artists.total">
<template slot="heading-left">
<p class="title is-4">Artists</p>
</template>
@ -60,12 +64,16 @@
<a class="button is-light is-small is-rounded" v-on:click="open_search_artists">Show all {{ artists.total.toLocaleString() }} artists</a>
</p>
</nav>
<p v-if="!artists.total">No results</p>
</template>
</content-with-heading>
<content-text v-if="show_artists && !artists.total">
<template slot="content">
<p><i>No artists found</i></p>
</template>
</content-text>
<!-- Albums -->
<content-with-heading v-if="show_albums">
<content-with-heading v-if="show_albums && albums.total">
<template slot="heading-left">
<p class="title is-4">Albums</p>
</template>
@ -78,12 +86,16 @@
<a class="button is-light is-small is-rounded" v-on:click="open_search_albums">Show all {{ albums.total.toLocaleString() }} albums</a>
</p>
</nav>
<p v-if="!albums.total">No results</p>
</template>
</content-with-heading>
<content-text v-if="show_albums && !albums.total">
<template slot="content">
<p><i>No albums found</i></p>
</template>
</content-text>
<!-- Playlists -->
<content-with-heading v-if="show_playlists">
<content-with-heading v-if="show_playlists && playlists.total">
<template slot="heading-left">
<p class="title is-4">Playlists</p>
</template>
@ -96,12 +108,16 @@
<a class="button is-light is-small is-rounded" v-on:click="open_search_playlists">Show all {{ playlists.total.toLocaleString() }} playlists</a>
</p>
</nav>
<p v-if="!playlists.total">No results</p>
</template>
</content-with-heading>
<content-text v-if="show_playlists && !playlists.total">
<template slot="content">
<p><i>No playlists found</i></p>
</template>
</content-text>
<!-- Podcasts -->
<content-with-heading v-if="show_podcasts">
<content-with-heading v-if="show_podcasts && podcasts.total">
<template slot="heading-left">
<p class="title is-4">Podcasts</p>
</template>
@ -114,12 +130,16 @@
<a class="button is-light is-small is-rounded" v-on:click="open_search_podcasts">Show all {{ podcasts.total.toLocaleString() }} podcasts</a>
</p>
</nav>
<p v-if="!podcasts.total">No results</p>
</template>
</content-with-heading>
<content-text v-if="show_podcasts && !podcasts.total">
<template slot="content">
<p><i>No podcasts found</i></p>
</template>
</content-text>
<!-- Audiobooks -->
<content-with-heading v-if="show_audiobooks">
<content-with-heading v-if="show_audiobooks && audiobooks.total">
<template slot="heading-left">
<p class="title is-4">Audiobooks</p>
</template>
@ -132,14 +152,19 @@
<a class="button is-light is-small is-rounded" v-on:click="open_search_audiobooks">Show all {{ audiobooks.total.toLocaleString() }} audiobooks</a>
</p>
</nav>
<p v-if="!audiobooks.total">No results</p>
</template>
</content-with-heading>
<content-text v-if="show_audiobooks && !audiobooks.total">
<template slot="content">
<p><i>No audiobooks found</i></p>
</template>
</content-text>
</div>
</template>
<script>
import ContentWithHeading from '@/templates/ContentWithHeading'
import ContentText from '@/templates/ContentText'
import TabsSearch from '@/components/TabsSearch'
import ListTracks from '@/components/ListTracks'
import ListArtists from '@/components/ListArtists'
@ -150,7 +175,7 @@ import * as types from '@/store/mutation_types'
export default {
name: 'PageSearch',
components: { ContentWithHeading, TabsSearch, ListTracks, ListArtists, ListAlbums, ListPlaylists },
components: { ContentWithHeading, ContentText, TabsSearch, ListTracks, ListArtists, ListAlbums, ListPlaylists },
data () {
return {

35
web-src/src/pages/SpotifyPageSearch.vue
View File

@ -26,7 +26,7 @@
<tabs-search></tabs-search>
<!-- Tracks -->
<content-with-heading v-if="show_tracks">
<content-with-heading v-if="show_tracks && tracks.total">
<template slot="heading-left">
<p class="title is-4">Tracks</p>
</template>
@ -47,12 +47,16 @@
<a class="button is-light is-small is-rounded" v-on:click="open_search_tracks">Show all {{ tracks.total.toLocaleString() }} tracks</a>
</p>
</nav>
<p v-if="!tracks.total">No results</p>
</template>
</content-with-heading>
<content-text v-if="show_tracks && !tracks.total" class="mt-6">
<template slot="content">
<p><i>No tracks found</i></p>
</template>
</content-text>
<!-- Artists -->
<content-with-heading v-if="show_artists">
<content-with-heading v-if="show_artists && artists.total">
<template slot="heading-left">
<p class="title is-4">Artists</p>
</template>
@ -73,12 +77,16 @@
<a class="button is-light is-small is-rounded" v-on:click="open_search_artists">Show all {{ artists.total.toLocaleString() }} artists</a>
</p>
</nav>
<p v-if="!artists.total">No results</p>
</template>
</content-with-heading>
<content-text v-if="show_artists && !artists.total">
<template slot="content">
<p><i>No artists found</i></p>
</template>
</content-text>
<!-- Albums -->
<content-with-heading v-if="show_albums">
<content-with-heading v-if="show_albums && albums.total">
<template slot="heading-left">
<p class="title is-4">Albums</p>
</template>
@ -112,12 +120,16 @@
<a class="button is-light is-small is-rounded" v-on:click="open_search_albums">Show all {{ albums.total.toLocaleString() }} albums</a>
</p>
</nav>
<p v-if="!albums.total">No results</p>
</template>
</content-with-heading>
<content-text v-if="show_albums && !albums.total">
<template slot="content">
<p><i>No albums found</i></p>
</template>
</content-text>
<!-- Playlists -->
<content-with-heading v-if="show_playlists">
<content-with-heading v-if="show_playlists && playlists.total">
<template slot="heading-left">
<p class="title is-4">Playlists</p>
</template>
@ -138,14 +150,19 @@
<a class="button is-light is-small is-rounded" v-on:click="open_search_playlists">Show all {{ playlists.total.toLocaleString() }} playlists</a>
</p>
</nav>
<p v-if="!playlists.total">No results</p>
</template>
</content-with-heading>
<content-text v-if="show_playlists && !playlists.total">
<template slot="content">
<p><i>No playlists found</i></p>
</template>
</content-text>
</div>
</template>
<script>
import ContentWithHeading from '@/templates/ContentWithHeading'
import ContentText from '@/templates/ContentText'
import TabsSearch from '@/components/TabsSearch'
import SpotifyListItemTrack from '@/components/SpotifyListItemTrack'
import SpotifyListItemArtist from '@/components/SpotifyListItemArtist'
@ -163,7 +180,7 @@ import InfiniteLoading from 'vue-infinite-loading'
export default {
name: 'SpotifyPageSearch',
components: { ContentWithHeading, TabsSearch, SpotifyListItemTrack, SpotifyListItemArtist, SpotifyListItemAlbum, SpotifyListItemPlaylist, SpotifyModalDialogTrack, SpotifyModalDialogArtist, SpotifyModalDialogAlbum, SpotifyModalDialogPlaylist, InfiniteLoading, CoverArtwork },
components: { ContentWithHeading, ContentText, TabsSearch, SpotifyListItemTrack, SpotifyListItemArtist, SpotifyListItemAlbum, SpotifyListItemPlaylist, SpotifyModalDialogTrack, SpotifyModalDialogArtist, SpotifyModalDialogAlbum, SpotifyModalDialogPlaylist, InfiniteLoading, CoverArtwork },
data () {
return {

20
web-src/src/templates/ContentText.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<section class="section fd-content py-3">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">
<slot name="content"></slot>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'ContentText'
}
</script>
<style>
</style>