normalized tables with meyer reset, set up a rundimental table layout (need to change the name)
This commit is contained in:
Roberto Tonino
parent
085b819a2b
commit
43e6c2bfd0
|
|
@ -29,6 +29,10 @@ html[data-theme='light'] {
|
||||||
--panels-background: #222324;
|
--panels-background: #222324;
|
||||||
--panels-text: #ffffff;
|
--panels-text: #ffffff;
|
||||||
--accent-text: #ffffff;
|
--accent-text: #ffffff;
|
||||||
|
|
||||||
|
--table-bg: #ffffff;
|
||||||
|
--table-zebra: #c9c9c9;
|
||||||
|
--table-highlight: #8f8f8f;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='dark'] {
|
html[data-theme='dark'] {
|
||||||
|
|
@ -39,6 +43,10 @@ html[data-theme='dark'] {
|
||||||
--panels-background: #1a1a1a;
|
--panels-background: #1a1a1a;
|
||||||
--panels-text: #ffffff;
|
--panels-text: #ffffff;
|
||||||
--accent-text: #dfdfdf;
|
--accent-text: #dfdfdf;
|
||||||
|
|
||||||
|
--table-bg: #141414;
|
||||||
|
--table-zebra: #242424;
|
||||||
|
--table-highlight: #747474;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='purple'] {
|
html[data-theme='purple'] {
|
||||||
|
|
@ -50,6 +58,10 @@ html[data-theme='purple'] {
|
||||||
--panels-background: #100727;
|
--panels-background: #100727;
|
||||||
--panels-text: #ffffff;
|
--panels-text: #ffffff;
|
||||||
--accent-text: #dfdfdf;
|
--accent-text: #dfdfdf;
|
||||||
|
|
||||||
|
--table-bg: #0c041b;
|
||||||
|
--table-zebra: #130a29;
|
||||||
|
--table-highlight: #321874;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,27 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
:root {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table,
|
||||||
|
caption,
|
||||||
|
tbody,
|
||||||
|
tfoot,
|
||||||
|
thead,
|
||||||
|
tr,
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,27 +2,69 @@
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background: var(--table-bg);
|
||||||
-webkit-border-horizontal-spacing: 0px;
|
-webkit-border-horizontal-spacing: 0px;
|
||||||
-webkit-border-vertical-spacing: 0px;
|
-webkit-border-vertical-spacing: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table td,
|
.table td,
|
||||||
.table th {
|
.table th {
|
||||||
height: 50px;
|
/* min-height: 50px; */
|
||||||
padding: 4px 12px 4px 5px;
|
/* padding: 4px 12px 4px 5px; */
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
/* border: 0px black solid; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table th {
|
.table th {
|
||||||
text-align: left;
|
/* text-align: left; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.table tr:nth-child(even) {
|
.table tr:nth-child(even) {
|
||||||
background-color: var(--secondary-background);
|
background: var(--table-zebra);
|
||||||
border: 0px black solid;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 {
|
.table td img {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
#main_search .search_section {
|
#main_search .search_section {
|
||||||
float: none;
|
float: none;
|
||||||
cursor: pointer;
|
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
@ -11,6 +10,7 @@
|
||||||
|
|
||||||
.search_header {
|
.search_header {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -122,37 +122,39 @@ <h2>Start searching!</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="section == 'TRACK'">
|
<div v-else-if="section == 'TRACK'">
|
||||||
<table class="table tracks_table">
|
<table class="table table--design-1 tracks_table">
|
||||||
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" class="track_row">
|
<tbody>
|
||||||
<td aria-hidden="true" style="width: 48px; text-align: center;">
|
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" class="track_row">
|
||||||
<img class="rounded coverart"
|
<td class="table__cover" aria-hidden="true">
|
||||||
:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'">
|
<img class="rounded coverart"
|
||||||
</td>
|
:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'">
|
||||||
<td class="breakline inline-flex">
|
</td>
|
||||||
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
|
<td class="breakline">
|
||||||
explicit
|
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
|
||||||
</i>
|
explicit
|
||||||
{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}
|
</i>
|
||||||
</td>
|
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
|
||||||
<td class="breakline">
|
</td>
|
||||||
<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
|
<td class="breakline">
|
||||||
v-for="artist in track.ARTISTS">{{artist.ART_NAME}}
|
<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
|
||||||
</span>
|
v-for="artist in track.ARTISTS">{{artist.ART_NAME}}
|
||||||
</td>
|
</span>
|
||||||
<td class="breakline clickable" @click="albumView" :data-id="track.ALB_ID">
|
</td>
|
||||||
{{track.ALB_TITLE}}
|
<td class="breakline clickable" @click="albumView" :data-id="track.ALB_ID">
|
||||||
</td>
|
{{track.ALB_TITLE}}
|
||||||
<td>
|
</td>
|
||||||
{{convertDuration(track.DURATION)}}
|
<td>
|
||||||
</td>
|
{{convertDuration(track.DURATION)}}
|
||||||
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
</td>
|
||||||
@click.stop="addToQueue" :data-link="'https://www.deezer.com/track/'+track.SNG_ID"
|
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||||
style="width: 56px; text-align: center;" class="clickable">
|
@click.stop="addToQueue" :data-link="'https://www.deezer.com/track/'+track.SNG_ID"
|
||||||
<i class="material-icons">
|
style="width: 56px; text-align: center;" class="clickable">
|
||||||
get_app
|
<i class="material-icons">
|
||||||
</i>
|
get_app
|
||||||
</td>
|
</i>
|
||||||
</tr>
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
|
<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
|
||||||
|
|
@ -216,52 +218,54 @@ <h1>Loading</h1>
|
||||||
<div v-else-if="results.trackTab.data.length == 0">
|
<div v-else-if="results.trackTab.data.length == 0">
|
||||||
<h1>No Tracks found</h1>
|
<h1>No Tracks found</h1>
|
||||||
</div>
|
</div>
|
||||||
<table class="table tracks_table" v-if="results.trackTab.data.length > 0">
|
<table class="table table--design-1 tracks_table" v-if="results.trackTab.data.length > 0">
|
||||||
<tr>
|
<tbody>
|
||||||
<th style="width: 48px;"></th>
|
<tr>
|
||||||
<th>Title</th>
|
<th style="width: 48px;"></th>
|
||||||
<th>Artists</th>
|
<th>Title</th>
|
||||||
<th>Album</th>
|
<th>Artists</th>
|
||||||
<th>
|
<th>Album</th>
|
||||||
<i class="material-icons">
|
<th>
|
||||||
timer
|
<i class="material-icons">
|
||||||
</i>
|
timer
|
||||||
</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;">
|
|
||||||
<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>
|
</i>
|
||||||
<img class="rounded coverart" :src="track.album.cover_small">
|
</th>
|
||||||
</td>
|
<th style="width: 56px;"></th>
|
||||||
<td class="breakline inline-flex">
|
</tr>
|
||||||
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
|
<tr v-for="track in results.trackTab.data" class="track_row">
|
||||||
explicit
|
<td style="width: 48px; text-align: center;">
|
||||||
</i>
|
<a href="#" @click="playPausePreview"
|
||||||
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
:class="'rounded' + (track.preview ? ' single-cover' : '')" :data-preview="track.preview">
|
||||||
</td>
|
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
|
||||||
<td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
|
class="material-icons preview_controls">
|
||||||
{{track.artist.name}}
|
play_arrow
|
||||||
</td>
|
</i>
|
||||||
<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
|
<img class="rounded coverart" :src="track.album.cover_small">
|
||||||
{{track.album.title}}
|
</td>
|
||||||
</td>
|
<td class="breakline inline-flex">
|
||||||
<td>
|
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
|
||||||
{{convertDuration(track.duration)}}
|
explicit
|
||||||
</td>
|
</i>
|
||||||
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
||||||
@click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;"
|
</td>
|
||||||
class="clickable">
|
<td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
|
||||||
<i class="material-icons">
|
{{track.artist.name}}
|
||||||
get_app
|
</td>
|
||||||
</i>
|
<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
|
||||||
</td>
|
{{track.album.title}}
|
||||||
</tr>
|
</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>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<!-- ### Album Search Tab ### -->
|
<!-- ### Album Search Tab ### -->
|
||||||
|
|
|
||||||
42212
public/js/bundle.js
42212
public/js/bundle.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue