Better cards for albums, now display tracks

dev.yml

@@ -6,9 +6,9 @@ services:
     build:
       dockerfile: ./docker/Dockerfile.dev
       context: .
+    env_file: .env
     environment:
       - "HOST=0.0.0.0"
-      - "BACKEND_URL=http://localhost:6001"
     ports:
       - "8080:8080"
     volumes:

src/App.vue

@@ -34,4 +34,8 @@ export default {
 .ui.small.text.container {
   max-width: 500px !important;
 }
+
+.button.icon.tiny {
+    padding: 0.5em !important;
+}
 </style>

src/components/audio/album/Card.vue

@@ -11,7 +11,26 @@
             {{ album.artist.name }}
           </router-link>
         </div>
-        <div class="description">
+        <div class="description" v-if="mode === 'rich'">
+          <table class="ui very basic fixed single line compact table">
+            <tbody>
+              <tr v-for="track in tracks">
+                <td>
+                  <button @click="queue.append(track)" class="ui tiny icon button">
+                    <i class="play icon"></i>
+                  </button>
+                </td>
+                <td colspan="6">{{ track.title }}</td>
+                <td>
+                  <track-favorite-icon :track="track"></track-favorite-icon>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="center aligned segment" v-if="album.tracks.length > initialTracks">
+            <em v-if="!showAllTracks" @click="showAllTracks = true" class="expand">Show {{ album.tracks.length - initialTracks }} more tracks</em>
+            <em v-else @click="showAllTracks = false" class="expand">Collapse</em>
+          </div>
         </div>
       </div>
       <div class="extra content">
@@ -30,19 +49,47 @@
 <script>
 import queue from '@/audio/queue'
 import backend from '@/audio/backend'
+import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
 
 export default {
-  props: ['album'],
+  props: {
+    album: {type: Object},
+    mode: {type: String, default: 'simple'}
+  },
+  components: {
+    TrackFavoriteIcon
+  },
   data () {
     return {
       backend: backend,
-      queue: queue
+      queue: queue,
+      initialTracks: 4,
+      showAllTracks: false
+    }
+  },
+  computed: {
+    tracks () {
+      if (this.showAllTracks) {
+        return this.album.tracks
+      }
+      return this.album.tracks.slice(0, this.initialTracks)
     }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped lang="scss">
 
+tr {
+  .favorite-icon:not(.favorited) {
+    display: none;
+  }
+  &:hover .favorite-icon {
+    display: inherit;
+  }
+}
+.expand {
+  cursor: pointer;
+}
 </style>

src/components/audio/artist/Card.vue

@@ -7,7 +7,7 @@
           </router-link>
         </div>
         <div class="description">
-          <table class="ui compact very basic fixed single line  table">
+          <table class="ui compact very basic fixed single line table">
             <tbody>
               <tr v-for="album in artist.albums.slice(0, 3)">
                 <td>

src/components/audio/track/Table.vue

@@ -13,7 +13,7 @@
     <tbody>
       <tr v-for="track in tracks">
         <td>
-          <button @click="queue.append(track)" class="ui tiny teal icon button">
+          <button @click="queue.append(track)" class="ui tiny icon button">
             <i class="play icon"></i>
           </button>
         </td>

src/components/browse/Artist.vue

@@ -27,8 +27,10 @@
         </a>
       </div>
       <h2>Albums by this artist</h2>
-      <div class="ui cards">
-        <album-card :album="album" :key="album.id" v-for="album in albums"></album-card>
+      <div class="ui stackable three column grid">
+        <div class="column" :key="album.id" v-for="album in albums">
+          <album-card :mode="'rich'" class="fluid" :album="album"></album-card>
+        </div>
       </div>
     </template>
   </div>

src/components/favorites/TrackFavoriteIcon.vue

 <template>
-  <i @click="favoriteTracks.set(track.id, !isFavorite)" :class="['heart', {'pink': isFavorite}, 'icon']" :title="title"></i>
+  <i @click="favoriteTracks.set(track.id, !isFavorite)" :class="['favorite-icon', 'heart', {'pink': isFavorite}, {'favorited': isFavorite}, 'icon']" :title="title"></i>
 </template>
 
 <script>