styled tracklist table; updated tables styles: now a lot of table classes are reusable!
This commit is contained in:
Roberto Tonino
parent
8c82f3fb6d
commit
375b25cb0c
@ -81,6 +81,7 @@ img.circle {
|
|||||||
|
|
||||||
i.disabled {
|
i.disabled {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.explicit_icon {
|
i.explicit_icon {
|
||||||
|
|||||||
@ -2,6 +2,16 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
-webkit-border-horizontal-spacing: 0px;
|
-webkit-border-horizontal-spacing: 0px;
|
||||||
-webkit-border-vertical-spacing: 0px;
|
-webkit-border-vertical-spacing: 0px;
|
||||||
|
|
||||||
|
--vertical-separator: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table td:first-child {
|
||||||
|
padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table td:last-child {
|
||||||
|
padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table td,
|
.table td,
|
||||||
@ -9,6 +19,14 @@
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table td {
|
||||||
|
padding: var(--vertical-separator) 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table td img {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
.table tr {
|
.table tr {
|
||||||
background: var(--table-bg);
|
background: var(--table-bg);
|
||||||
transition: background-color 175ms ease-in-out;
|
transition: background-color 175ms ease-in-out;
|
||||||
@ -18,43 +36,87 @@
|
|||||||
border-bottom: 1px solid var(--table-highlight);
|
border-bottom: 1px solid var(--table-highlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table tbody tr:hover {
|
.table tbody tr:not(.table__row-no-highlight):hover {
|
||||||
background: var(--table-highlight);
|
background: var(--table-highlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table .table__cover {
|
.table .table__icon {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table .table__cover.table__cover--big {
|
.table__icon.table__icon--big {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* .table .table__cell {} */
|
||||||
|
|
||||||
|
.table__cell--x-small {
|
||||||
|
width: 0.32%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table__cell--small {
|
||||||
|
width: 3.2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table__cell--medium {
|
||||||
|
width: 28.7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table__cell--large {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table__cell--left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table__cell--center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table__cell--right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .table__cell-content {} */
|
||||||
|
|
||||||
|
.table__cell-content--vertical-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table__cell--download {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table__cell--download i.material-icons {
|
||||||
|
transition: color 175ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table__cell--download:hover i.material-icons {
|
||||||
|
color: var(--table-bg);
|
||||||
|
}
|
||||||
|
|
||||||
/* === Tracks Table === */
|
/* === Tracks Table === */
|
||||||
.table--tracks {
|
.table--tracks {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
|
||||||
--radius: 3px;
|
--radius: 3px;
|
||||||
--vertical-separator: 7px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table--tracks thead {
|
.table--tracks thead {
|
||||||
position: sticky;
|
|
||||||
border-bottom: 2px solid var(--table-highlight);
|
border-bottom: 2px solid var(--table-highlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table--tracks td {
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table--tracks th {
|
.table--tracks th {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
|
height: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table--tracks .table__col.table__col--centered {
|
.table--tracks td {
|
||||||
text-align: center;
|
height: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table--tracks td.breakline {
|
.table--tracks td.breakline {
|
||||||
@ -77,60 +139,31 @@
|
|||||||
border-bottom-right-radius: var(--radius);
|
border-bottom-right-radius: var(--radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table--tracks td:first-child {
|
/* === Tracks Table End === */
|
||||||
|
|
||||||
|
/* === Tracklist Table === */
|
||||||
|
|
||||||
|
/* .table--tracklist {} */
|
||||||
|
|
||||||
|
.table--tracklist thead {
|
||||||
|
border-bottom: 2px solid var(--table-highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table--tracklist th {
|
||||||
|
height: 45px;
|
||||||
|
padding: var(--vertical-separator) 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table--tracklist th:first-child {
|
||||||
padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
|
padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table--tracks td:nth-child(2) {
|
.table--tracklist th:last-child {
|
||||||
width: 50%;
|
|
||||||
padding: var(--vertical-separator) 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table--tracks td:nth-child(3) {
|
|
||||||
width: 16.8%;
|
|
||||||
padding: var(--vertical-separator) 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table--tracks td:nth-child(4) {
|
|
||||||
width: 16.8%;
|
|
||||||
padding: var(--vertical-separator) 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table--tracks td:nth-child(5) {
|
|
||||||
width: 6%;
|
|
||||||
padding: var(--vertical-separator) 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table--tracks td:last-child {
|
|
||||||
padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
|
padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table--tracks .table__download {
|
.table--tracklist td {
|
||||||
text-align: center;
|
height: 35px;
|
||||||
}
|
|
||||||
|
|
||||||
.table--tracks .table__download i.material-icons {
|
|
||||||
transition: color 175ms ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table--tracks .table__download:hover i.material-icons {
|
|
||||||
color: var(--table-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === Tracks Table End === */
|
|
||||||
|
|
||||||
.table td img {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tracklist_table td {
|
|
||||||
height: 50px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tracklist_table .explicit_icon {
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-right: var(--explicit-separator);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tracklist_table .track_position_head,
|
.tracklist_table .track_position_head,
|
||||||
@ -143,10 +176,18 @@
|
|||||||
margin-left: var(--explicit-separator);
|
margin-left: var(--explicit-separator);
|
||||||
}
|
}
|
||||||
|
|
||||||
.track_checkbox {
|
/* === Tracklist Table End === */
|
||||||
cursor: pointer;
|
|
||||||
|
/* === Charts Table === */
|
||||||
|
|
||||||
|
/* .table--charts {} */
|
||||||
|
|
||||||
|
.table--charts td {
|
||||||
|
height: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* === Charts Table End === */
|
||||||
|
|
||||||
.track_row > td > img {
|
.track_row > td > img {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
|||||||
@ -125,30 +125,32 @@ <h2>Start searching!</h2>
|
|||||||
<table class="table table--tracks">
|
<table class="table table--tracks">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)">
|
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)">
|
||||||
<td class="table__cover" aria-hidden="true">
|
<td class="table__icon" aria-hidden="true">
|
||||||
<img class="rounded coverart"
|
<img class="rounded coverart"
|
||||||
:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'">
|
:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'">
|
||||||
</td>
|
</td>
|
||||||
<td class="table__col breakline">
|
<td class="table__cell table__cell--large breakline">
|
||||||
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
|
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
|
||||||
explicit
|
explicit
|
||||||
</i>
|
</i>
|
||||||
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
|
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
|
||||||
</td>
|
</td>
|
||||||
<td class="table__col breakline">
|
<td class="table__cell table__cell--medium table__cell--center breakline">
|
||||||
<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
|
<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
|
||||||
v-for="artist in track.ARTISTS">{{artist.ART_NAME}}
|
v-for="artist in track.ARTISTS">{{artist.ART_NAME}}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="breakline clickable" @click="albumView" :data-id="track.ALB_ID">
|
<td class="table__cell--medium table__cell--center breakline clickable"
|
||||||
|
@click="albumView" :data-id="track.ALB_ID">
|
||||||
{{track.ALB_TITLE}}
|
{{track.ALB_TITLE}}
|
||||||
</td>
|
</td>
|
||||||
<td class="table__col table__col--centered">
|
<td class="table__cell table__cell--center">
|
||||||
{{convertDuration(track.DURATION)}}
|
{{convertDuration(track.DURATION)}}
|
||||||
</td>
|
</td>
|
||||||
<td class="table__download clickable" @contextmenu.prevent="openQualityModal"
|
<td class="table__cell--download table__cell--center clickable"
|
||||||
@click.stop="addToQueue" :data-link="'https://www.deezer.com/track/'+track.SNG_ID"
|
@contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
|
||||||
role="button" aria-label="download">
|
:data-link="'https://www.deezer.com/track/'+track.SNG_ID" role="button"
|
||||||
|
aria-label="download">
|
||||||
<i class="material-icons">
|
<i class="material-icons">
|
||||||
get_app
|
get_app
|
||||||
</i>
|
</i>
|
||||||
@ -234,7 +236,7 @@ <h1>No Tracks found</h1>
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="track in results.trackTab.data">
|
<tr v-for="track in results.trackTab.data">
|
||||||
<td class="table__cover table__cover--big">
|
<td class="table__icon table__icon--big">
|
||||||
<a href="#" @click="playPausePreview"
|
<a href="#" @click="playPausePreview"
|
||||||
:class="'rounded' + (track.preview ? ' single-cover' : '')" :data-preview="track.preview">
|
:class="'rounded' + (track.preview ? ' single-cover' : '')" :data-preview="track.preview">
|
||||||
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
|
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
|
||||||
@ -243,25 +245,26 @@ <h1>No Tracks found</h1>
|
|||||||
</i>
|
</i>
|
||||||
<img class="rounded coverart" :src="track.album.cover_small">
|
<img class="rounded coverart" :src="track.album.cover_small">
|
||||||
</td>
|
</td>
|
||||||
<td class="table__col breakline">
|
<td class="table__cell table__cell--large breakline">
|
||||||
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
|
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
|
||||||
explicit
|
explicit
|
||||||
</i>
|
</i>
|
||||||
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
||||||
</td>
|
</td>
|
||||||
<td class="table__col table__col--centered breakline clickable" @click="artistView"
|
<td class="table__cell table__cell--medium table__cell--center breakline clickable"
|
||||||
:data-id="track.artist.id">
|
@click="artistView" :data-id="track.artist.id">
|
||||||
{{track.artist.name}}
|
{{track.artist.name}}
|
||||||
</td>
|
</td>
|
||||||
<td class="table__col table__col--centered breakline clickable" @click="albumView"
|
<td class="table__cell table__cell--medium table__cell--center breakline clickable"
|
||||||
:data-id="track.album.id">
|
@click="albumView" :data-id="track.album.id">
|
||||||
{{track.album.title}}
|
{{track.album.title}}
|
||||||
</td>
|
</td>
|
||||||
<td class="table__col table__col--centered">
|
<td class="table__cell table__cell--small table__cell--center">
|
||||||
{{convertDuration(track.duration)}}
|
{{convertDuration(track.duration)}}
|
||||||
</td>
|
</td>
|
||||||
<td class="table__download clickable" @contextmenu.prevent="openQualityModal"
|
<td class="table__cell--download table__cell--center clickable"
|
||||||
@click.stop="addToQueue" :data-link="track.link" role="button" aria-label="download">
|
@contextmenu.prevent="openQualityModal" @click.stop="addToQueue" :data-link="track.link"
|
||||||
|
role="button" aria-label="download">
|
||||||
<i class="material-icons">
|
<i class="material-icons">
|
||||||
get_app
|
get_app
|
||||||
</i>
|
</i>
|
||||||
@ -408,38 +411,42 @@ <h2 class="page_heading">Charts</h2>
|
|||||||
<button @click="changeCountry">Change Country</button>
|
<button @click="changeCountry">Change Country</button>
|
||||||
<button @contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
|
<button @contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
|
||||||
:data-link="'https://www.deezer.com/playlist/'+id">Download Chart</button>
|
:data-link="'https://www.deezer.com/playlist/'+id">Download Chart</button>
|
||||||
<table class="table">
|
<table class="table table--charts">
|
||||||
<tr v-for="track in chart" class="track_row">
|
<tbody>
|
||||||
<td class="top-tracks-position" :class="{ first: track.position === 1 }">
|
<tr v-for="track in chart" class="track_row">
|
||||||
{{ track.position }}
|
<td class="top-tracks-position" :class="{ first: track.position === 1 }">
|
||||||
</td>
|
{{ track.position }}
|
||||||
<td style="width: 48px; text-align: center;">
|
</td>
|
||||||
<a href="#" @click="playPausePreview" :class="'rounded' + (track.preview ? ' single-cover' : '')"
|
<td class="table__icon table__icon--big">
|
||||||
:data-preview="track.preview">
|
<a href="#" @click="playPausePreview" class="rounded"
|
||||||
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
|
:class="{ 'single-cover' : track.preview }" :data-preview="track.preview">
|
||||||
class="material-icons preview_controls">
|
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
|
||||||
play_arrow
|
class="material-icons preview_controls">
|
||||||
</i>
|
play_arrow
|
||||||
<img class="rounded coverart" :src="track.album.cover_small">
|
</i>
|
||||||
</td>
|
<img class="rounded coverart" :src="track.album.cover_small">
|
||||||
<td class="breakline">
|
</a>
|
||||||
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
</td>
|
||||||
</td>
|
<td class="table__cell--large breakline">
|
||||||
<td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
|
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
||||||
{{track.artist.name}}
|
</td>
|
||||||
</td>
|
<td class="table__cell--medium table__cell--center breakline clickable" @click="artistView"
|
||||||
<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
|
:data-id="track.artist.id">
|
||||||
{{track.album.title}}
|
{{track.artist.name}}
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td class="table__cell--medium table__cell--center breakline clickable" @click="albumView"
|
||||||
{{convertDuration(track.duration)}}
|
:data-id="track.album.id">
|
||||||
</td>
|
{{track.album.title}}
|
||||||
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
</td>
|
||||||
@click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;"
|
<td class="table__cell--small table__cell--center">
|
||||||
class="clickable">
|
{{convertDuration(track.duration)}}
|
||||||
<i class="material-icons">get_app</i>
|
</td>
|
||||||
</td>
|
<td class="table__cell--download" @contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
|
||||||
</tr>
|
:data-link="track.link" role="button" aria-label="download">
|
||||||
|
<i class="material-icons">get_app</i>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1198,61 +1205,75 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
|
|||||||
v-if="release_date">{{ release_date }}</span></h2>
|
v-if="release_date">{{ release_date }}</span></h2>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<table class="table tracklist_table">
|
<table class="table table--tracklist">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th v-for="data in head" v-html="data.title"
|
<th>
|
||||||
:class="{ track_position_head: data.title.trim() === '#' }"
|
<i class="material-icons">music_note</i>
|
||||||
:style="{ 'width': data.width ? data.width : 'auto'}">
|
|
||||||
</th>
|
</th>
|
||||||
<th style="width: 32px">
|
<th>#</th>
|
||||||
|
<th>Song</th>
|
||||||
|
<th>Artist</th>
|
||||||
|
<th v-if="type == 'Playlist'">Album</th>
|
||||||
|
<th>
|
||||||
|
<i class="material-icons">timer</i>
|
||||||
|
</th>
|
||||||
|
<th class="table__icon table__cell--center clickable">
|
||||||
<input @click="toggleAll" class="selectAll" type="checkbox">
|
<input @click="toggleAll" class="selectAll" type="checkbox">
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<template v-if="type!='Spotify Playlist'">
|
<template v-if="type !== 'Spotify Playlist'">
|
||||||
<template v-for="track in body">
|
<template v-for="track in body">
|
||||||
<tr v-if="track.type == 'track'">
|
<tr v-if="track.type == 'track'">
|
||||||
<td>
|
<td class="table__cell--x-small table__cell--center">
|
||||||
<i v-if="track.preview" @click=playPausePreview
|
<div class="table__cell-content table__cell-content--vertical-center">
|
||||||
:class="'material-icons' + (track.preview ? ' preview_playlist_controls' : '')"
|
<i class="material-icons"
|
||||||
:data-preview="track.preview">
|
:class="{ 'preview_playlist_controls' : track.preview, disabled: !track.preview }"
|
||||||
play_arrow
|
@click='track.preview ? playPausePreview : null' :data-preview="track.preview">
|
||||||
</i>
|
play_arrow
|
||||||
<i v-else class="material-icons disabled">
|
</i>
|
||||||
play_arrow
|
</div>
|
||||||
</i>
|
|
||||||
</td>
|
</td>
|
||||||
<td class="track_position">
|
<td class="table__cell--small table__cell--center track_position">
|
||||||
{{ track.track_position }}
|
{{ type === 'Album' ? track.track_position : (body.indexOf(track) + 1) }}
|
||||||
</td>
|
</td>
|
||||||
<td class="inline-flex">
|
<td class="table__cell--large table__cell--with-icon">
|
||||||
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
|
<div class="table__cell-content table__cell-content--vertical-center">
|
||||||
explicit
|
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
|
||||||
</i>
|
explicit
|
||||||
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
</i>
|
||||||
|
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="clickable" @click="artistView" :data-id="track.artist.id">
|
<td class="table__cell--medium table__cell--center clickable" @click="artistView"
|
||||||
|
:data-id="track.artist.id">
|
||||||
{{ track.artist.name }}
|
{{ track.artist.name }}
|
||||||
</td>
|
</td>
|
||||||
<td class="clickable" v-if="type == 'Playlist'" @click="albumView" :data-id="track.album.id">
|
<td v-if="type == 'Playlist'" class="table__cell--medium table__cell--center clickable"
|
||||||
|
@click="albumView" :data-id="track.album.id">
|
||||||
{{ track.album.title }}
|
{{ track.album.title }}
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td class="table__cell--center"
|
||||||
|
:class="{ 'table__cell--small' : type === 'Album', 'table__cell--x-small' : type === 'Playlist' }">
|
||||||
{{ convertDuration(track.duration) }}
|
{{ convertDuration(track.duration) }}
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td class="table__icon table__cell--center">
|
||||||
<input class="track_checkbox" type="checkbox" v-model="track.selected">
|
<input class="clickable" type="checkbox" v-model="track.selected">
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr v-else-if="track.type == 'disc_separator'">
|
<tr v-else-if="track.type == 'disc_separator'" class="table__row-no-highlight"
|
||||||
<td colspan="6" style="opacity: 0.54;">
|
style="opacity: 0.54;">
|
||||||
<i class="material-icons">
|
<td>
|
||||||
album
|
<div class="table__cell-content table__cell-content--vertical-center" style="opacity: 0.54;">
|
||||||
</i>
|
<i class="material-icons">album</i>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="table__cell--center">
|
||||||
{{ track.number }}
|
{{ track.number }}
|
||||||
</td>
|
</td>
|
||||||
|
<td colspan="4"></td>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
@ -1272,7 +1293,7 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
|
|||||||
<td>{{ track.artists[0].name }}</td>
|
<td>{{ track.artists[0].name }}</td>
|
||||||
<td>{{ track.album.name }}</td>
|
<td>{{ track.album.name }}</td>
|
||||||
<td>{{ convertDuration(Math.floor(track.duration_ms/1000)) }}</td>
|
<td>{{ convertDuration(Math.floor(track.duration_ms/1000)) }}</td>
|
||||||
<td><input class="track_checkbox" type="checkbox" v-model="track.selected"></td>
|
<td><input class="clickable" type="checkbox" v-model="track.selected"></td>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|||||||
@ -40956,9 +40956,8 @@ const TracklistTab = new Vue({
|
|||||||
{ title: 'Artist' },
|
{ title: 'Artist' },
|
||||||
{ title: '<i class="material-icons">timer</i>', width: '40px' }
|
{ title: '<i class="material-icons">timer</i>', width: '40px' }
|
||||||
];
|
];
|
||||||
if (lodash.isEmpty(data.tracks)) {
|
|
||||||
console.log('show e lodash ok');
|
|
||||||
|
|
||||||
|
if (lodash.isEmpty(data.tracks)) {
|
||||||
this.body = null;
|
this.body = null;
|
||||||
} else {
|
} else {
|
||||||
this.body = data.tracks;
|
this.body = data.tracks;
|
||||||
@ -40979,6 +40978,7 @@ const TracklistTab = new Vue({
|
|||||||
{ title: 'Album' },
|
{ title: 'Album' },
|
||||||
{ title: '<i class="material-icons">timer</i>', width: '40px' }
|
{ title: '<i class="material-icons">timer</i>', width: '40px' }
|
||||||
];
|
];
|
||||||
|
|
||||||
if (lodash.isEmpty(data.tracks)) {
|
if (lodash.isEmpty(data.tracks)) {
|
||||||
this.body = null;
|
this.body = null;
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -85,9 +85,8 @@ const TracklistTab = new Vue({
|
|||||||
{ title: 'Artist' },
|
{ title: 'Artist' },
|
||||||
{ title: '<i class="material-icons">timer</i>', width: '40px' }
|
{ title: '<i class="material-icons">timer</i>', width: '40px' }
|
||||||
]
|
]
|
||||||
if (_.isEmpty(data.tracks)) {
|
|
||||||
console.log('show e lodash ok')
|
|
||||||
|
|
||||||
|
if (_.isEmpty(data.tracks)) {
|
||||||
this.body = null
|
this.body = null
|
||||||
} else {
|
} else {
|
||||||
this.body = data.tracks
|
this.body = data.tracks
|
||||||
@ -108,6 +107,7 @@ const TracklistTab = new Vue({
|
|||||||
{ title: 'Album' },
|
{ title: 'Album' },
|
||||||
{ title: '<i class="material-icons">timer</i>', width: '40px' }
|
{ title: '<i class="material-icons">timer</i>', width: '40px' }
|
||||||
]
|
]
|
||||||
|
|
||||||
if (_.isEmpty(data.tracks)) {
|
if (_.isEmpty(data.tracks)) {
|
||||||
this.body = null
|
this.body = null
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user