WIP
This commit is contained in:
Eliot Berriot
parent
8024c4654f
commit
f0b72c8204
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<div class="app-card card">
|
||||
<div :class="['ui', 'head-image', 'circular', 'image', {'default-cover': !cover.original}]" v-lazy:background-image="imageUrl">
|
||||
<div
|
||||
@click="$router.push({name: 'library.artists.detail', params: {id: artist.id}})"
|
||||
:class="['ui', 'head-image', 'circular', 'image', {'default-cover': !cover.original}]" v-lazy:background-image="imageUrl">
|
||||
<play-button :icon-only="true" :is-playable="artist.is_playable" :button-classes="['ui', 'circular', 'large', 'orange', 'icon', 'button']" :artist="artist"></play-button>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
|
|
|||
|
|
@ -1,45 +1,24 @@
|
|||
<template>
|
||||
<div class="ui playlist card">
|
||||
<div class="ui top attached icon button" :style="coversStyle">
|
||||
<div class="ui app-card card">
|
||||
<div
|
||||
@click="$router.push({name: 'library.playlists.detail', params: {id: playlist.id }})"
|
||||
:class="['ui', 'head-image', 'squares']">
|
||||
<img v-lazy="url" v-for="(url, idx) in images" :key="idx" />
|
||||
<play-button :icon-only="true" :is-playable="playlist.is_playable" :button-classes="['ui', 'circular', 'large', 'orange', 'icon', 'button']" :playlist="playlist"></play-button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div class="right floated">
|
||||
<play-button
|
||||
:is-playable="playlist.is_playable"
|
||||
:icon-only="true" class="ui inline"
|
||||
:button-classes="['ui', 'circular', 'large', {orange: playlist.tracks_count > 0}, 'icon', 'button', {disabled: playlist.tracks_count === 0}]"
|
||||
:playlist="playlist"></play-button>
|
||||
<play-button
|
||||
:is-playable="playlist.is_playable"
|
||||
class="basic inline icon"
|
||||
:dropdown-only="true"
|
||||
:dropdown-icon-classes="['ellipsis', 'vertical', 'large', {disabled: playlist.tracks_count === 0}, 'grey']"
|
||||
:account="playlist.actor"
|
||||
:playlist="playlist"></play-button>
|
||||
</div>
|
||||
<router-link :title="playlist.name" class="discrete link" :to="{name: 'library.playlists.detail', params: {id: playlist.id }}">
|
||||
{{ playlist.name | truncate(30) }}
|
||||
<strong>
|
||||
<router-link class="discrete link" :title="playlist.name" :to="{name: 'library.playlists.detail', params: {id: playlist.id }}">
|
||||
{{ playlist.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<duration :seconds="playlist.duration" />
|
||||
|
|
||||
<i class="sound icon"></i>
|
||||
<translate translate-context="Content/*/Card/List item"
|
||||
translate-plural="%{ count } tracks"
|
||||
:translate-n="playlist.tracks_count"
|
||||
:translate-params="{count: playlist.tracks_count}">
|
||||
%{ count} track
|
||||
</translate>
|
||||
</strong>
|
||||
<div class="description">
|
||||
<user-link :user="playlist.user" class="left floated" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra content">
|
||||
<user-link :user="playlist.user" class="left floated" />
|
||||
<span class="right floated">
|
||||
<i class="clock outline icon" />
|
||||
<human-date :date="playlist.creation_date" />
|
||||
</span>
|
||||
<translate translate-context="*/*/*" :translate-params="{count: playlist.tracks_count}" :translate-n="playlist.tracks_count" translate-plural="%{ count } tracks">%{ count } track</translate>
|
||||
<play-button class="right floated basic icon" :dropdown-only="true" :is-playable="playlist.is_playable" :dropdown-icon-classes="['ellipsis', 'horizontal', 'large', 'grey']" :playlist="playlist"></play-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -53,41 +32,18 @@ export default {
|
|||
PlayButton
|
||||
},
|
||||
computed: {
|
||||
coversStyle () {
|
||||
images () {
|
||||
let self = this
|
||||
let urls = this.playlist.album_covers.map((url) => {
|
||||
url = self.$store.getters['instance/absoluteUrl'](url)
|
||||
return `url("${url}")`
|
||||
return self.$store.getters['instance/absoluteUrl'](url)
|
||||
}).slice(0, 4)
|
||||
return {
|
||||
'background-image': urls.join(', ')
|
||||
while (urls.length < 4) {
|
||||
urls.push(
|
||||
'../../../assets/audio/default-cover.png'
|
||||
)
|
||||
}
|
||||
return urls
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style>
|
||||
.playlist.card .header .ellipsis.vertical.large.grey {
|
||||
font-size: 1.2em;
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.card .header {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.attached.button {
|
||||
background-size: 25%;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: border-box;
|
||||
background-position: 0 0, 33.33% 0, 66.67% 0, 100% 0;
|
||||
/* background-position: 0 0, 50% 0, 100% 0; */
|
||||
/* background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0; */
|
||||
font-size: 4em;
|
||||
box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
|
||||
padding: unset;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,8 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="playlists.length > 0"
|
||||
v-masonry
|
||||
transition-duration="0"
|
||||
item-selector=".card"
|
||||
percent-position="true"
|
||||
stagger="0">
|
||||
<div class="ui cards">
|
||||
<div v-if="playlists.length > 0">
|
||||
<div class="ui app-cards cards">
|
||||
<playlist-card
|
||||
:playlist="playlist"
|
||||
v-masonry-tile
|
||||
v-for="playlist in playlists"
|
||||
:key="playlist.id"
|
||||
></playlist-card>
|
||||
|
|
|
|||
|
|
@ -449,6 +449,22 @@ input + .help {
|
|||
margin: 0.5em;
|
||||
|
||||
}
|
||||
&.squares {
|
||||
display: block !important;
|
||||
position: relative;
|
||||
.button {
|
||||
position: absolute;
|
||||
bottom: 0.5em;
|
||||
right: 0.5em;
|
||||
}
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.extra {
|
||||
border-top: 0 !important;
|
||||
|
|
|
|||
Loading…
Reference in New Issue