evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styled tracklist table; updated tables styles: now a lot of table classes are reusable!

Browse Source
This commit is contained in:
Roberto Tonino 2020-06-01 23:44:04 +02:00
parent 8c82f3fb6d
commit 375b25cb0c
6 changed files with 211 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/css/modules/globals/globals.css
View File

@ -81,6 +81,7 @@ img.circle {
i.disabled {
opacity: 0.5;
cursor: default;
}
i.explicit_icon {

163
public/css/modules/globals/tables.css
View File

@ -2,6 +2,16 @@
width: 100%;
-webkit-border-horizontal-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,
@ -9,6 +19,14 @@
vertical-align: middle;
}
.table td {
padding: var(--vertical-separator) 10px;
}
.table td img {
vertical-align: middle;
}
.table tr {
background: var(--table-bg);
transition: background-color 175ms ease-in-out;
@ -18,43 +36,87 @@
border-bottom: 1px solid var(--table-highlight);
}
.table tbody tr:hover {
.table tbody tr:not(.table__row-no-highlight):hover {
background: var(--table-highlight);
}
.table .table__cover {
.table .table__icon {
box-sizing: content-box;
width: 32px;
}
.table .table__cover.table__cover--big {
.table__icon.table__icon--big {
width: 48px;
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 === */
.table--tracks {
border-collapse: collapse;
--radius: 3px;
--vertical-separator: 7px;
}
.table--tracks thead {
position: sticky;
border-bottom: 2px solid var(--table-highlight);
}
.table--tracks td {
height: 35px;
}
.table--tracks th {
padding-bottom: 10px;
height: 45px;
}
.table--tracks .table__col.table__col--centered {
text-align: center;
.table--tracks td {
height: 35px;
}
.table--tracks td.breakline {
@ -77,60 +139,31 @@
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;
}
.table--tracks td:nth-child(2) {
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 {
.table--tracklist th:last-child {
padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
}
.table--tracks .table__download {
text-align: center;
}
.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);
.table--tracklist td {
height: 35px;
}
.tracklist_table .track_position_head,
@ -143,10 +176,18 @@
margin-left: var(--explicit-separator);
}
.track_checkbox {
cursor: pointer;
/* === Tracklist Table End === */
/* === Charts Table === */
/* .table--charts {} */
.table--charts td {
height: 35px;
}
/* === Charts Table End === */
.track_row > td > img {
width: 32px;
height: 32px;

185
public/index.html
View File

@ -125,30 +125,32 @@ <h2>Start searching!</h2>
<table class="table table--tracks">
<tbody>
<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"
:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'">
</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">
explicit
</i>
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
</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"
v-for="artist in track.ARTISTS">{{artist.ART_NAME}}
</span>
</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}}
</td>
<td class="table__col table__col--centered">
<td class="table__cell table__cell--center">
{{convertDuration(track.DURATION)}}
</td>
<td class="table__download clickable" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" :data-link="'https://www.deezer.com/track/'+track.SNG_ID"
role="button" aria-label="download">
<td class="table__cell--download table__cell--center clickable"
@contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
:data-link="'https://www.deezer.com/track/'+track.SNG_ID" role="button"
aria-label="download">
<i class="material-icons">
get_app
</i>
@ -234,7 +236,7 @@ <h1>No Tracks found</h1>
</thead>
<tbody>
<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"
:class="'rounded' + (track.preview ? ' single-cover' : '')" :data-preview="track.preview">
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
@ -243,25 +245,26 @@ <h1>No Tracks found</h1>
</i>
<img class="rounded coverart" :src="track.album.cover_small">
</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">
explicit
</i>
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
</td>
<td class="table__col table__col--centered breakline clickable" @click="artistView"
:data-id="track.artist.id">
<td class="table__cell table__cell--medium table__cell--center breakline clickable"
@click="artistView" :data-id="track.artist.id">
{{track.artist.name}}
</td>
<td class="table__col table__col--centered breakline clickable" @click="albumView"
:data-id="track.album.id">
<td class="table__cell table__cell--medium table__cell--center breakline clickable"
@click="albumView" :data-id="track.album.id">
{{track.album.title}}
</td>
<td class="table__col table__col--centered">
<td class="table__cell table__cell--small table__cell--center">
{{convertDuration(track.duration)}}
</td>
<td class="table__download clickable" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" :data-link="track.link" role="button" aria-label="download">
<td class="table__cell--download table__cell--center clickable"
@contextmenu.prevent="openQualityModal" @click.stop="addToQueue" :data-link="track.link"
role="button" aria-label="download">
<i class="material-icons">
get_app
</i>
@ -408,38 +411,42 @@ <h2 class="page_heading">Charts</h2>
<button @click="changeCountry">Change Country</button>
<button @contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
:data-link="'https://www.deezer.com/playlist/'+id">Download Chart</button>
<table class="table">
<tr v-for="track in chart" class="track_row">
<td class="top-tracks-position" :class="{ first: track.position === 1 }">
{{ track.position }}
</td>
<td style="width: 48px; text-align: center;">
<a href="#" @click="playPausePreview" :class="'rounded' + (track.preview ? ' single-cover' : '')"
:data-preview="track.preview">
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
class="material-icons preview_controls">
play_arrow
</i>
<img class="rounded coverart" :src="track.album.cover_small">
</td>
<td class="breakline">
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
</td>
<td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
{{track.artist.name}}
</td>
<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
{{track.album.title}}
</td>
<td>
{{convertDuration(track.duration)}}
</td>
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;"
class="clickable">
<i class="material-icons">get_app</i>
</td>
</tr>
<table class="table table--charts">
<tbody>
<tr v-for="track in chart" class="track_row">
<td class="top-tracks-position" :class="{ first: track.position === 1 }">
{{ track.position }}
</td>
<td class="table__icon table__icon--big">
<a href="#" @click="playPausePreview" class="rounded"
:class="{ 'single-cover' : track.preview }" :data-preview="track.preview">
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
class="material-icons preview_controls">
play_arrow
</i>
<img class="rounded coverart" :src="track.album.cover_small">
</a>
</td>
<td class="table__cell--large breakline">
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
</td>
<td class="table__cell--medium table__cell--center breakline clickable" @click="artistView"
:data-id="track.artist.id">
{{track.artist.name}}
</td>
<td class="table__cell--medium table__cell--center breakline clickable" @click="albumView"
:data-id="track.album.id">
{{track.album.title}}
</td>
<td class="table__cell--small table__cell--center">
{{convertDuration(track.duration)}}
</td>
<td class="table__cell--download" @contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
:data-link="track.link" role="button" aria-label="download">
<i class="material-icons">get_app</i>
</td>
</tr>
</tbody>
</table>
</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>
</header>
<table class="table tracklist_table">
<table class="table table--tracklist">
<thead>
<tr>
<th v-for="data in head" v-html="data.title"
:class="{ track_position_head: data.title.trim() === '#' }"
:style="{ 'width': data.width ? data.width : 'auto'}">
<th>
<i class="material-icons">music_note</i>
</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">
</th>
</tr>
</thead>
<tbody>
<template v-if="type!='Spotify Playlist'">
<template v-if="type !== 'Spotify Playlist'">
<template v-for="track in body">
<tr v-if="track.type == 'track'">
<td>
<i v-if="track.preview" @click=playPausePreview
:class="'material-icons' + (track.preview ? ' preview_playlist_controls' : '')"
:data-preview="track.preview">
play_arrow
</i>
<i v-else class="material-icons disabled">
play_arrow
</i>
<td class="table__cell--x-small table__cell--center">
<div class="table__cell-content table__cell-content--vertical-center">
<i class="material-icons"
:class="{ 'preview_playlist_controls' : track.preview, disabled: !track.preview }"
@click='track.preview ? playPausePreview : null' :data-preview="track.preview">
play_arrow
</i>
</div>
</td>
<td class="track_position">
{{ track.track_position }}
<td class="table__cell--small table__cell--center track_position">
{{ type === 'Album' ? track.track_position : (body.indexOf(track) + 1) }}
</td>
<td class="inline-flex">
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
explicit
</i>
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
<td class="table__cell--large table__cell--with-icon">
<div class="table__cell-content table__cell-content--vertical-center">
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
explicit
</i>
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
</div>
</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 }}
</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 }}
</td>
<td>
<td class="table__cell--center"
:class="{ 'table__cell--small' : type === 'Album', 'table__cell--x-small' : type === 'Playlist' }">
{{ convertDuration(track.duration) }}
</td>
<td>
<input class="track_checkbox" type="checkbox" v-model="track.selected">
<td class="table__icon table__cell--center">
<input class="clickable" type="checkbox" v-model="track.selected">
</td>
</tr>
<tr v-else-if="track.type == 'disc_separator'">
<td colspan="6" style="opacity: 0.54;">
<i class="material-icons">
album
</i>
<tr v-else-if="track.type == 'disc_separator'" class="table__row-no-highlight"
style="opacity: 0.54;">
<td>
<div class="table__cell-content table__cell-content--vertical-center" style="opacity: 0.54;">
<i class="material-icons">album</i>
</div>
</td>
<td class="table__cell--center">
{{ track.number }}
</td>
<td colspan="4"></td>
</tr>
</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.album.name }}</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>
</template>
</tbody>

4
public/js/bundle.js
View File

@ -40956,9 +40956,8 @@ const TracklistTab = new Vue({
{ title: 'Artist' },
{ 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;
} else {
this.body = data.tracks;
@ -40979,6 +40978,7 @@ const TracklistTab = new Vue({
{ title: 'Album' },
{ title: '<i class="material-icons">timer</i>', width: '40px' }
];
if (lodash.isEmpty(data.tracks)) {
this.body = null;
} else {

2
public/js/bundle.js.map
View File

File diff suppressed because one or more lines are too long

4
src/js/modules/components/tracklist-tab.js
View File

@ -85,9 +85,8 @@ const TracklistTab = new Vue({
{ title: 'Artist' },
{ 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
} else {
this.body = data.tracks
@ -108,6 +107,7 @@ const TracklistTab = new Vue({
{ title: 'Album' },
{ title: '<i class="material-icons">timer</i>', width: '40px' }
]
if (_.isEmpty(data.tracks)) {
this.body = null
} else {