MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-01-27 14:43:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web-src] Add visual indication that for index nav

Browse Source
This commit is contained in:
chme 2018-12-20 06:32:53 +01:00
parent 7b07d9cee7
commit c423266b73
2 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web-src/src/components/IndexButtonList.vue
View File

@ -1,7 +1,12 @@
<template> <template>
<nav class="buttons is-centered fd-is-square" style="margin-bottom: 64px;" v-if="filtered_index.length > 1"> <section>
<nav class="buttons is-centered fd-is-square" style="margin-bottom: 48px;" v-if="filtered_index.length > 1">
<a v-for="char in filtered_index" :key="char" class="button is-small" @click="nav(char)">{{ char }}</a> <a v-for="char in filtered_index" :key="char" class="button is-small" @click="nav(char)">{{ char }}</a>
</nav> </nav>
<nav class="buttons is-centered" style="margin-bottom: 6px;" v-if="filtered_index.length > 1">
<a class="button is-small is-white" @click="scroll_to_top"><span class="icon is-small"><i class="mdi mdi-chevron-up"></i></span></a>
</nav>
</section>
</template> </template>
<script> <script>
@ -20,6 +25,10 @@ export default {
methods: { methods: {
nav: function (id) { nav: function (id) {
this.$router.push({ path: this.$router.currentRoute.path + '#index_' + id }) this.$router.push({ path: this.$router.currentRoute.path + '#index_' + id })
},
scroll_to_top: function () {
window.scrollTo({ top: 0, behavior: 'smooth' })
} }
} }
} }

24
web-src/src/router/index.js
View File

@ -58,25 +58,25 @@ export const router = new VueRouter({
path: '/music/browse', path: '/music/browse',
name: 'Browse', name: 'Browse',
component: PageBrowse, component: PageBrowse,
meta: { show_progress: true } meta: { show_progress: true, has_tabs: true }
}, },
{ {
path: '/music/browse/recently_added', path: '/music/browse/recently_added',
name: 'Browse Recently Added', name: 'Browse Recently Added',
component: PageBrowseRecentlyAdded, component: PageBrowseRecentlyAdded,
meta: { show_progress: true } meta: { show_progress: true, has_tabs: true }
}, },
{ {
path: '/music/browse/recently_played', path: '/music/browse/recently_played',
name: 'Browse Recently Played', name: 'Browse Recently Played',
component: PageBrowseRecentlyPlayed, component: PageBrowseRecentlyPlayed,
meta: { show_progress: true } meta: { show_progress: true, has_tabs: true }
}, },
{ {
path: '/music/artists', path: '/music/artists',
name: 'Artists', name: 'Artists',
component: PageArtists, component: PageArtists,
meta: { show_progress: true, has_index: true } meta: { show_progress: true, has_tabs: true, has_index: true }
}, },
{ {
path: '/music/artists/:artist_id', path: '/music/artists/:artist_id',
@ -94,7 +94,7 @@ export const router = new VueRouter({
path: '/music/albums', path: '/music/albums',
name: 'Albums', name: 'Albums',
component: PageAlbums, component: PageAlbums,
meta: { show_progress: true, has_index: true } meta: { show_progress: true, has_tabs: true, has_index: true }
}, },
{ {
path: '/music/albums/:album_id', path: '/music/albums/:album_id',
@ -106,7 +106,7 @@ export const router = new VueRouter({
path: '/music/genres', path: '/music/genres',
name: 'Genres', name: 'Genres',
component: PageGenres, component: PageGenres,
meta: { show_progress: true, has_index: true } meta: { show_progress: true, has_tabs: true, has_index: true }
}, },
{ {
path: '/music/genres/:genre', path: '/music/genres/:genre',
@ -169,19 +169,19 @@ export const router = new VueRouter({
path: '/music/spotify', path: '/music/spotify',
name: 'Spotify', name: 'Spotify',
component: SpotifyPageBrowse, component: SpotifyPageBrowse,
meta: { show_progress: true } meta: { show_progress: true, has_tabs: true }
}, },
{ {
path: '/music/spotify/new-releases', path: '/music/spotify/new-releases',
name: 'Spotify Browse New Releases', name: 'Spotify Browse New Releases',
component: SpotifyPageBrowseNewReleases, component: SpotifyPageBrowseNewReleases,
meta: { show_progress: true } meta: { show_progress: true, has_tabs: true }
}, },
{ {
path: '/music/spotify/featured-playlists', path: '/music/spotify/featured-playlists',
name: 'Spotify Browse Featured Playlists', name: 'Spotify Browse Featured Playlists',
component: SpotifyPageBrowseFeaturedPlaylists, component: SpotifyPageBrowseFeaturedPlaylists,
meta: { show_progress: true } meta: { show_progress: true, has_tabs: true }
}, },
{ {
path: '/music/spotify/artists/:artist_id', path: '/music/spotify/artists/:artist_id',
@ -226,7 +226,11 @@ export const router = new VueRouter({
} else if (to.meta.has_index) { } else if (to.meta.has_index) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
setTimeout(() => { setTimeout(() => {
resolve({ selector: '#top', offset: { x: 0, y: 110 } }) if (to.meta.has_tabs) {
resolve({ selector: '#top', offset: { x: 0, y: 140 } })
} else {
resolve({ selector: '#top', offset: { x: 0, y: 100 } })
}
}, 10) }, 10)
}) })
} else { } else {