72 lines
1.3 KiB
Vue
72 lines
1.3 KiB
Vue
<template>
|
|
<div id="content" class="flex-column">
|
|
<div class="flex-column ma-horizontal">
|
|
<h1>{{ album.title }}</h1>
|
|
<h2>{{ album.artist_name }}</h2>
|
|
</div>
|
|
<div id="tracks" class="flex-row border-top">
|
|
<div class="flex-column">
|
|
<img id="cover" class="shadow ma24" :src="cover" />
|
|
<p class="center ma-off hideOnMobile">
|
|
<b>{{ album.tracks.length }}</b> Tracks
|
|
</p>
|
|
</div>
|
|
<ul id="trackList" class="tracks">
|
|
<li v-for="track in album.tracks" :key="track._id">
|
|
<TrackItem :track="track" :showCover="false" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TrackItem from "../components/Track";
|
|
export default {
|
|
data() {
|
|
return {
|
|
album: {
|
|
covers: {},
|
|
tracks: [],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
show(album) {
|
|
this.album = album;
|
|
},
|
|
},
|
|
computed: {
|
|
cover() {
|
|
if (!this.album.covers) {
|
|
return "/static/icons/dummy/album.svg";
|
|
}
|
|
return this.album.covers.cover256;
|
|
},
|
|
},
|
|
components: {
|
|
TrackItem,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
#cover {
|
|
align-self: center;
|
|
width: 256px;
|
|
}
|
|
|
|
#content,
|
|
#tracks {
|
|
overflow: auto;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
#tracks {
|
|
flex-direction: column;
|
|
}
|
|
#trackList {
|
|
border-top: 1px solid var(--light-border);
|
|
}
|
|
}
|
|
</style> |