Skip to content
Snippets Groups Projects
Commit 9cfdf306 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Better cards for albums, now display tracks

parent d422dddd
Branches
No related tags found
No related merge requests found
......@@ -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>
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment