[web-src] Index based navigation for artists, albums, genres

web-src/src/components/IndexButtonList.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="buttons is-centered fd-is-square">
+    <a v-for="char in filtered_index" :key="char" class="button is-small" @click="nav(char)">{{ char }}</a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'IndexButtonList',
+
+  props: ['index'],
+
+  computed: {
+    filtered_index () {
+      const specialChars = '!"#$%&\'()*+,-./:;<=>?@[\\]^`{|}~'
+      return this.index.filter(c => !specialChars.includes(c))
+    }
+  },
+
+  methods: {
+    nav: function (id) {
+      this.$router.push({ path: this.$router.currentRoute.path + '#index_' + id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ListItemAlbum.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media" :id="'index_' + anchor">
     <div class="media-content fd-has-action is-clipped" v-on:click="open_album">
       <h1 class="title is-6">{{ album.name }}</h1>
       <h2 class="subtitle is-7 has-text-grey"><b>{{ album.artist }}</b></h2>
@@ -56,7 +56,7 @@ export default {
   name: 'ListItemAlbum',
   components: { ModalDialog },
 
-  props: ['album', 'media_kind'],
+  props: ['album', 'media_kind', 'anchor'],
 
   data () {
     return {

web-src/src/components/ListItemArtist.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media" :id="'index_' + anchor">
     <div class="media-content fd-has-action is-clipped" v-on:click="open_artist">
       <h1 class="title is-6">{{ artist.name }}</h1>
     </div>
@@ -51,7 +51,7 @@ export default {
   name: 'PartArtist',
   components: { ModalDialog },
 
-  props: ['artist'],
+  props: ['artist', 'anchor'],
 
   data () {
     return {

web-src/src/components/ListItemGenre.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media" :id="'index_' + anchor">
     <div class="media-content fd-has-action is-clipped" v-on:click="open_genre">
       <h1 class="title is-6">{{ genre.name }}</h1>
     </div>
@@ -53,7 +53,7 @@ export default {
   name: 'PartGenre',
   components: { ModalDialog },
 
-  props: [ 'genre' ],
+  props: [ 'genre', 'anchor' ],
 
   data () {
     return {

web-src/src/components/TabsSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="section fd-tabs-section" v-if="spotify_enabled">
+  <section class="section fd-remove-padding-bottom" v-if="spotify_enabled">
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">