finished styling of tracks table
This commit is contained in:
parent
43e6c2bfd0
commit
8c82f3fb6d
@ -46,7 +46,7 @@ html[data-theme='dark'] {
|
||||
|
||||
--table-bg: #141414;
|
||||
--table-zebra: #242424;
|
||||
--table-highlight: #747474;
|
||||
--table-highlight: #343434;
|
||||
}
|
||||
|
||||
html[data-theme='purple'] {
|
||||
|
@ -1,120 +1,3 @@
|
||||
/* Tables */
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
background: var(--table-bg);
|
||||
-webkit-border-horizontal-spacing: 0px;
|
||||
-webkit-border-vertical-spacing: 0px;
|
||||
}
|
||||
|
||||
.table td,
|
||||
.table th {
|
||||
/* min-height: 50px; */
|
||||
/* padding: 4px 12px 4px 5px; */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table th {
|
||||
/* text-align: left; */
|
||||
}
|
||||
|
||||
.table tr:nth-child(even) {
|
||||
background: var(--table-zebra);
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: var(--table-highlight);
|
||||
}
|
||||
|
||||
/* === Tracks Table === */
|
||||
.table--design-1 {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table--design-1 td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table--design-1 td:first-child {
|
||||
/* width: 32px; */
|
||||
padding: 0 10px 0 20px;
|
||||
}
|
||||
|
||||
.table--design-1 td:nth-child(2) {
|
||||
width: 45%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.table--design-1 td:nth-child(3) {
|
||||
width: 16.8%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.table--design-1 td:nth-child(4) {
|
||||
width: 16.8%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.table--design-1 td:nth-child(5) {
|
||||
width: 6%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.table--design-1 td:last-child {
|
||||
padding: 0 20px 0 10px;
|
||||
}
|
||||
|
||||
/* === 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 {
|
||||
width: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.explicit_tracklist {
|
||||
margin-left: var(--explicit-separator);
|
||||
}
|
||||
|
||||
.track_checkbox {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.track_row > td > img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.track_row > td > a > img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.tracks_table td.breakline {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.top-tracks-position {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Tables End */
|
||||
|
||||
#loading_overlay {
|
||||
justify-content: center;
|
||||
align-items: center;
|
164
public/css/modules/globals/tables.css
Normal file
164
public/css/modules/globals/tables.css
Normal file
@ -0,0 +1,164 @@
|
||||
.table {
|
||||
width: 100%;
|
||||
-webkit-border-horizontal-spacing: 0px;
|
||||
-webkit-border-vertical-spacing: 0px;
|
||||
}
|
||||
|
||||
.table td,
|
||||
.table th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tr {
|
||||
background: var(--table-bg);
|
||||
transition: background-color 175ms ease-in-out;
|
||||
}
|
||||
|
||||
.table tr:not(:last-child) {
|
||||
border-bottom: 1px solid var(--table-highlight);
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: var(--table-highlight);
|
||||
}
|
||||
|
||||
.table .table__cover {
|
||||
box-sizing: content-box;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.table .table__cover.table__cover--big {
|
||||
width: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* === 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;
|
||||
}
|
||||
|
||||
.table--tracks .table__col.table__col--centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table--tracks td.breakline {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.table--tracks tr:first-child td:first-child {
|
||||
border-top-left-radius: var(--radius);
|
||||
}
|
||||
|
||||
.table--tracks tr:first-child td:last-child {
|
||||
border-top-right-radius: var(--radius);
|
||||
}
|
||||
|
||||
.table--tracks tr:last-child td:first-child {
|
||||
border-bottom-left-radius: var(--radius);
|
||||
}
|
||||
|
||||
.table--tracks tr:last-child td:last-child {
|
||||
border-bottom-right-radius: var(--radius);
|
||||
}
|
||||
|
||||
.table--tracks td: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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.tracklist_table .track_position_head,
|
||||
.tracklist_table .track_position {
|
||||
width: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.explicit_tracklist {
|
||||
margin-left: var(--explicit-separator);
|
||||
}
|
||||
|
||||
.track_checkbox {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.track_row > td > img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.track_row > td > a > img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.top-tracks-position {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
@ -4,7 +4,8 @@
|
||||
@import './vendor/toastify.css';
|
||||
|
||||
@import './modules/base/base.css';
|
||||
@import './modules/globals.css';
|
||||
@import './modules/globals/globals.css';
|
||||
@import './modules/globals/tables.css';
|
||||
@import './modules/animations.css';
|
||||
@import './modules/progressbar.css';
|
||||
|
||||
|
@ -122,20 +122,20 @@ <h2>Start searching!</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="section == 'TRACK'">
|
||||
<table class="table table--design-1 tracks_table">
|
||||
<table class="table table--tracks">
|
||||
<tbody>
|
||||
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" class="track_row">
|
||||
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)">
|
||||
<td class="table__cover" 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="breakline">
|
||||
<td class="table__col 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="breakline">
|
||||
<td class="table__col breakline">
|
||||
<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
|
||||
v-for="artist in track.ARTISTS">{{artist.ART_NAME}}
|
||||
</span>
|
||||
@ -143,12 +143,12 @@ <h2>Start searching!</h2>
|
||||
<td class="breakline clickable" @click="albumView" :data-id="track.ALB_ID">
|
||||
{{track.ALB_TITLE}}
|
||||
</td>
|
||||
<td>
|
||||
<td class="table__col table__col--centered">
|
||||
{{convertDuration(track.DURATION)}}
|
||||
</td>
|
||||
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||
<td class="table__download clickable" @contextmenu.prevent="openQualityModal"
|
||||
@click.stop="addToQueue" :data-link="'https://www.deezer.com/track/'+track.SNG_ID"
|
||||
style="width: 56px; text-align: center;" class="clickable">
|
||||
role="button" aria-label="download">
|
||||
<i class="material-icons">
|
||||
get_app
|
||||
</i>
|
||||
@ -218,11 +218,10 @@ <h1>Loading</h1>
|
||||
<div v-else-if="results.trackTab.data.length == 0">
|
||||
<h1>No Tracks found</h1>
|
||||
</div>
|
||||
<table class="table table--design-1 tracks_table" v-if="results.trackTab.data.length > 0">
|
||||
<tbody>
|
||||
<table class="table table--tracks" v-if="results.trackTab.data.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 48px;"></th>
|
||||
<th>Title</th>
|
||||
<th colspan="2">Title</th>
|
||||
<th>Artists</th>
|
||||
<th>Album</th>
|
||||
<th>
|
||||
@ -232,8 +231,10 @@ <h1>No Tracks found</h1>
|
||||
</th>
|
||||
<th style="width: 56px;"></th>
|
||||
</tr>
|
||||
<tr v-for="track in results.trackTab.data" class="track_row">
|
||||
<td style="width: 48px; text-align: center;">
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="track in results.trackTab.data">
|
||||
<td class="table__cover table__cover--big">
|
||||
<a href="#" @click="playPausePreview"
|
||||
:class="'rounded' + (track.preview ? ' single-cover' : '')" :data-preview="track.preview">
|
||||
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
|
||||
@ -242,24 +243,25 @@ <h1>No Tracks found</h1>
|
||||
</i>
|
||||
<img class="rounded coverart" :src="track.album.cover_small">
|
||||
</td>
|
||||
<td class="breakline inline-flex">
|
||||
<td class="table__col 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="breakline clickable" @click="artistView" :data-id="track.artist.id">
|
||||
<td class="table__col table__col--centered breakline clickable" @click="artistView"
|
||||
:data-id="track.artist.id">
|
||||
{{track.artist.name}}
|
||||
</td>
|
||||
<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
|
||||
<td class="table__col table__col--centered breakline clickable" @click="albumView"
|
||||
:data-id="track.album.id">
|
||||
{{track.album.title}}
|
||||
</td>
|
||||
<td>
|
||||
<td class="table__col table__col--centered">
|
||||
{{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">
|
||||
<td class="table__download clickable" @contextmenu.prevent="openQualityModal"
|
||||
@click.stop="addToQueue" :data-link="track.link" role="button" aria-label="download">
|
||||
<i class="material-icons">
|
||||
get_app
|
||||
</i>
|
||||
|
Loading…
Reference in New Issue
Block a user