normalized tables with meyer reset, set up a rundimental table layout (need to change the name)

This commit is contained in:
Roberto Tonino 2020-05-27 22:03:09 +02:00
parent 085b819a2b
commit 43e6c2bfd0
7 changed files with 42372 additions and 89 deletions

View File

@ -29,6 +29,10 @@ html[data-theme='light'] {
--panels-background: #222324;
--panels-text: #ffffff;
--accent-text: #ffffff;
--table-bg: #ffffff;
--table-zebra: #c9c9c9;
--table-highlight: #8f8f8f;
}
html[data-theme='dark'] {
@ -39,6 +43,10 @@ html[data-theme='dark'] {
--panels-background: #1a1a1a;
--panels-text: #ffffff;
--accent-text: #dfdfdf;
--table-bg: #141414;
--table-zebra: #242424;
--table-highlight: #747474;
}
html[data-theme='purple'] {
@ -50,6 +58,10 @@ html[data-theme='purple'] {
--panels-background: #100727;
--panels-text: #ffffff;
--accent-text: #dfdfdf;
--table-bg: #0c041b;
--table-zebra: #130a29;
--table-highlight: #321874;
}
body {

View File

@ -4,6 +4,27 @@
box-sizing: border-box;
}
body {
:root {
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;
}

View File

@ -2,27 +2,69 @@
.table {
width: 100%;
background: var(--table-bg);
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
}
.table td,
.table th {
height: 50px;
padding: 4px 12px 4px 5px;
/* min-height: 50px; */
/* padding: 4px 12px 4px 5px; */
vertical-align: middle;
/* border: 0px black solid; */
}
.table th {
text-align: left;
/* text-align: left; */
}
.table tr:nth-child(even) {
background-color: var(--secondary-background);
border: 0px black solid;
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;
}

View File

@ -1,6 +1,5 @@
#main_search .search_section {
float: none;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
}
@ -11,6 +10,7 @@
.search_header {
display: inline-block;
cursor: pointer;
font-size: 1.75rem;
margin-bottom: 25px;
}

View File

@ -122,17 +122,18 @@ <h2>Start searching!</h2>
</div>
</div>
<div v-else-if="section == 'TRACK'">
<table class="table tracks_table">
<table class="table table--design-1 tracks_table">
<tbody>
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" class="track_row">
<td aria-hidden="true" style="width: 48px; text-align: center;">
<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 inline-flex">
<td class="breakline">
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
explicit
</i>
{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
</td>
<td class="breakline">
<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
@ -153,6 +154,7 @@ <h2>Start searching!</h2>
</i>
</td>
</tr>
</tbody>
</table>
</div>
<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
@ -216,7 +218,8 @@ <h1>Loading</h1>
<div v-else-if="results.trackTab.data.length == 0">
<h1>No Tracks found</h1>
</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">
<tbody>
<tr>
<th style="width: 48px;"></th>
<th>Title</th>
@ -262,6 +265,7 @@ <h1>No Tracks found</h1>
</i>
</td>
</tr>
</tbody>
</table>
</div>
<!-- ### Album Search Tab ### -->

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long