Commit 9cfdf306 authored by Agate's avatar Agate 💬

Better cards for albums, now display tracks

parent d422dddd
......@@ -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:
......
......@@ -34,4 +34,8 @@ export default {
.ui.small.text.container {
max-width: 500px !important;
}
.button.icon.tiny {
padding: 0.5em !important;
}
</style>
......@@ -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>
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
<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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment