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 { i.disabled {
opacity: 0.5; opacity: 0.5;
cursor: default;
} }
i.explicit_icon { i.explicit_icon {

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

@ -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;

131
public/index.html
View File

@ -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">
<tbody>
<tr v-for="track in chart" class="track_row"> <tr v-for="track in chart" class="track_row">
<td class="top-tracks-position" :class="{ first: track.position === 1 }"> <td class="top-tracks-position" :class="{ first: track.position === 1 }">
{{ track.position }} {{ track.position }}
</td> </td>
<td style="width: 48px; text-align: center;"> <td class="table__icon table__icon--big">
<a href="#" @click="playPausePreview" :class="'rounded' + (track.preview ? ' single-cover' : '')" <a href="#" @click="playPausePreview" class="rounded"
:data-preview="track.preview"> :class="{ 'single-cover' : track.preview }" :data-preview="track.preview">
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview" <i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
class="material-icons preview_controls"> class="material-icons preview_controls">
play_arrow play_arrow
</i> </i>
<img class="rounded coverart" :src="track.album.cover_small"> <img class="rounded coverart" :src="track.album.cover_small">
</a>
</td> </td>
<td class="breakline"> <td class="table__cell--large breakline">
{{ 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="breakline clickable" @click="artistView" :data-id="track.artist.id"> <td class="table__cell--medium table__cell--center breakline clickable" @click="artistView"
:data-id="track.artist.id">
{{track.artist.name}} {{track.artist.name}}
</td> </td>
<td class="breakline clickable" @click="albumView" :data-id="track.album.id"> <td class="table__cell--medium table__cell--center breakline clickable" @click="albumView"
:data-id="track.album.id">
{{track.album.title}} {{track.album.title}}
</td> </td>
<td> <td class="table__cell--small table__cell--center">
{{convertDuration(track.duration)}} {{convertDuration(track.duration)}}
</td> </td>
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal" <td class="table__cell--download" @contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
@click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;" :data-link="track.link" role="button" aria-label="download">
class="clickable">
<i class="material-icons">get_app</i> <i class="material-icons">get_app</i>
</td> </td>
</tr> </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>
<i v-else class="material-icons disabled">
play_arrow play_arrow
</i> </i>
</div>
</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">
<div class="table__cell-content table__cell-content--vertical-center">
<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 : '') }}
</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>

4
public/js/bundle.js
View File

@ -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 {

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: '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 {