Commit 2da084b7 authored by Agate's avatar Agate 💬

Artists / albums now have their own card component

parent 94dbfece
......@@ -24,7 +24,7 @@ export default {
.main.pusher {
margin-left: 350px !important;
transform: none !important;
padding: 1rem 2rem;
padding: 1.5rem;
}
.stripe.segment {
......
......@@ -10,71 +10,14 @@
<template v-if="query.length > 0">
<h3 class="ui title">Artists</h3>
<div v-if="results.artists.length > 0" class="ui cards">
<div v-for="artist in results.artists" class="card">
<div class="content">
<div class="header">{{ artist.name }}</div>
<div class="description">
<table class="ui compact very basic fixed single line table">
<tbody>
<tr v-for="album in artist.albums.slice(0, 3)">
<td>
<img class="ui mini image" v-if="album.cover" :src="backend.absoluteUrl(album.cover)">
<img class="ui mini image" v-else src="../../assets/audio/default-cover.png">
</td>
<td colspan="4">
<strong>{{ album.title }}</strong><br />
{{ album.tracks.length }} tracks
</td>
<td>
<button @click="queue.appendMany(album.tracks)" class="ui mini icon right floated teal button">
<i class="ui play icon"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="extra content">
<!-- <button @click="queue.appendMany(artist.tracks)" class="ui right floated button">
Play
</button> -->
<span>
<i class="sound icon"></i>
{{ artist.albums.length }} albums
</span>
</div>
</div>
<artist-card :artist="artist" v-for="artist in results.artists"></artist-card>
</div>
<p v-else>Sorry, we did not found any artist matching your query</p>
</template>
<template v-if="query.length > 0">
<h3 class="ui title">Albums</h3>
<div v-if="results.albums.length > 0" class="ui cards">
<div v-for="album in results.albums" class="card">
<div class="content">
<div class="right floated tiny ui image">
<img v-if="album.cover" :src="backend.absoluteUrl(album.cover)">
<img v-else src="../../assets/audio/default-cover.png">
</div>
<div class="header">{{ album.title }}</div>
<div class="meta">
<a>By {{ album.artist.name }}</a>
</div>
<div class="description">
</div>
</div>
<div class="extra content">
<button @click="queue.appendMany(album.tracks)" class="ui mini icon right floated teal button">
<i class="ui play icon"></i>
Play
</button>
<span>
<i class="music icon"></i>
{{ album.tracks.length }} tracks
</span>
</div>
</div>
<album-card :album="album" v-for="album in results.albums"></album-card>
</div>
<p v-else>Sorry, we did not found any album matching your query</p>
</template>
......@@ -85,10 +28,16 @@
import logger from '@/logging'
import queue from '@/audio/queue'
import backend from '@/audio/backend'
import AlbumCard from '@/components/audio/album/Card'
import ArtistCard from '@/components/audio/artist/Card'
const SEARCH_URL = process.env.API_URL + 'search'
export default {
components: {
AlbumCard,
ArtistCard
},
data () {
return {
query: '',
......
<template>
<div class="card">
<div class="content">
<div class="right floated tiny ui image">
<img v-if="album.cover" :src="backend.absoluteUrl(album.cover)">
<img v-else src="../../../assets/audio/default-cover.png">
</div>
<div class="header">{{ album.title }}</div>
<div class="meta">
By <a>{{ album.artist.name }}</a>
</div>
<div class="description">
</div>
</div>
<div class="extra content">
<button @click="queue.appendMany(album.tracks)" class="ui mini icon right floated teal button">
<i class="ui play icon"></i>
Play
</button>
<span>
<i class="music icon"></i>
{{ album.tracks.length }} tracks
</span>
</div>
</div>
</template>
<script>
import queue from '@/audio/queue'
import backend from '@/audio/backend'
export default {
props: ['album'],
data () {
return {
backend: backend,
queue: queue
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<template>
<div class="card">
<div class="content">
<div class="header">{{ artist.name }}</div>
<div class="description">
<table class="ui compact very basic fixed single line table">
<tbody>
<tr v-for="album in artist.albums.slice(0, 3)">
<td>
<img class="ui mini image" v-if="album.cover" :src="backend.absoluteUrl(album.cover)">
<img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
</td>
<td colspan="4">
<strong>{{ album.title }}</strong><br />
{{ album.tracks.length }} tracks
</td>
<td>
<button @click="queue.appendMany(album.tracks)" class="ui mini icon right floated teal button">
<i class="ui play icon"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="extra content">
<!-- <button @click="queue.appendMany(artist.tracks)" class="ui right floated button">
Play
</button> -->
<span>
<i class="sound icon"></i>
{{ artist.albums.length }} albums
</span>
</div>
</div>
</template>
<script>
import queue from '@/audio/queue'
import backend from '@/audio/backend'
export default {
props: ['artist'],
data () {
return {
backend: backend,
queue: queue
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
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