added zoom for cover arts

src/components/ExpandableImage.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+
+    <b-modal id="expanded-image-holder" footerClass="border-0" centered :title="text" size="lg" v-model="expanded">
+      <template slot="modal-footer"><span/></template>
+      <div class="text-center">
+      <b-img-lazy blank-src="@/assets/music_placeholder.png"
+                  :src="src"
+                  id="the-image-itself-expanded"
+      />
+      </div>
+    </b-modal>
+
+    <div @click="expanded = true" id="image-holder">
+      <b-img-lazy blank-src="@/assets/music_placeholder.png"
+                  :src="src"
+                  id="the-image-itself"
+      />
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ExpandableImage",
+  props: {
+    src: String,
+    text: String
+  },
+  data() {
+    return {
+      expanded: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+#image-holder {
+  cursor: zoom-in;
+  width: inherit;
+}
+
+#image-holder img {
+  width: inherit;
+}
+
+#the-image-itself-expanded {
+  max-width: 100%;
+  max-height: 100%;
+}
+</style>