add download link; update player and pages layout

assets/src/assets/styles.scss

@@ -1,8 +1,11 @@
 @charset "utf-8";
+
 @import "~bulma/sass/utilities/_all.sass";
 @import "~bulma/sass/components/dropdown.sass";
 
 $body-background-color: $light;
+$menu-item-hover-background-color: #dfdfdf;
+$menu-item-active-background-color: #d2d2d2;
 
 @import "~bulma";
 
@@ -36,6 +39,17 @@ $body-background-color: $light;
 .overflow-hidden { overflow: hidden }
 .overflow-hidden.is-fullwidth { max-width: 100%; }
 
+
+@keyframes blink {
+    from { opacity: 1; }
+    to { opacity: 0.4; }
+}
+
+.blink {
+    animation: 1s ease-in-out 3s infinite alternate blink;
+}
+
+
 //-- navbar
 .navbar + .container {
     margin-top: 1em;
@@ -276,15 +290,15 @@ aside {
     }
 }
 
-
 .sound-item {
     .cover { height: 5em; }
     .media-content a { padding: 0em; }
+    margin-bottom: 0.2em;
 }
-
-.is-round, .sound-item .button {
-    border: 1px $grey solid;
-    border-radius: 1em;
+.sound-item .media-right .button {
+    margin-right: 0.2em;
+    min-width: 2.5em;
+    display: inline-block;
 }
 
 

assets/src/components/APlaylist.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="playlist">
         <slot name="header"></slot>
         <ul :class="listClass">
             <li v-for="(item,index) in items" :class="itemClass" @click="!hasAction('play') && select(index)"
@@ -9,9 +9,9 @@
                         :data="item" :index="index" :set="set" :player="player_"
                         @togglePlay="togglePlay(index)"
                         :actions="actions">
-                        <template v-slot:actions="{}">
+                        <template v-slot:extra-right="{}">
                             <button class="button" v-if="editable" @click.stop="remove(index,true)">
-                                <span class="icon is-small"><span class="fa fa-minus"></span></span>
+                                <span class="icon is-small"><span class="fa fa-close"></span></span>
                             </button>
                         </template>
                     </ASoundItem>

assets/src/components/ASoundItem.vue

@@ -1,19 +1,16 @@
 <template>
     <div class="media sound-item">
-        <div class="media-left">
+        <div class="media-left" @click.stop="$emit('togglePlay')">
             <img class="cover is-tiny" :src="item.data.cover" v-if="item.data.cover">
         </div>
-        <div class="media-left">
-            <button class="button" @click.stop="$emit('togglePlay')">
-                <div class="icon">
-                    <span class="fa fa-pause" v-if="playing"></span>
-                    <span class="fa fa-play" v-else></span>
-                </div>
-            </button>
-        </div>
         <div class="media-content">
             <slot name="content" :player="player" :item="item" :loaded="loaded">
-                <h4 class="title is-4">{{ name || item.name }}</h4>
+                <h4 class="title is-5" @click.stop="$emit('togglePlay')">
+                    <span class="icon is-small is-size-7 blink" v-if="playing">
+                        <span class="fa fa-play"></span>
+                    </span>
+                    {{ name || item.name }}
+                </h4>
                 <a class="subtitle is-6 is-inline-block" v-if="hasAction('page') && item.data.page_url"
                     :href="item.data.page_url">
                     {{ item.data.page_title }}
@@ -21,6 +18,12 @@
             </slot>
         </div>
         <div class="media-right">
+            <a class="button" v-if="item.data.is_downloadable"
+                    :href="item.data.url" target="_blank">
+                <span class="icon is-small">
+                    <span class="fa fa-download"></span>
+                </span>
+            </a>
             <button class="button" v-if="player && player.sets.pin != $parent.set" @click.stop="player.togglePin(item)">
                 <span class="icon is-small">
                     <span :class="(pinned ? '' : 'has-text-grey-light ') + 'fa fa-thumbtack'"></span>
@@ -28,6 +31,7 @@
             </button>
             <slot name="actions" :player="player" :item="item" :loaded="loaded"></slot>
         </div>
+        <slot name="extra-right" :player="player" :item="item" :loaded="loaded"></slot>
     </div>
 </template>
 <script>

assets/src/index.js

@@ -3,8 +3,7 @@
  * administration interface)
  */
 //-- vendor
-import '@fortawesome/fontawesome-free/css/all.min.css'
-import '@fortawesome/fontawesome-free/css/fontawesome.min.css'
+import '@fortawesome/fontawesome-free/css/all.min.css';
 
 
 //-- aircox