completed tables styling

public/css/modules/globals/tables.css

@@ -6,12 +6,22 @@
 	--vertical-separator: 7px;
 }
 
-.table td:first-child {
+.table tr {
-	padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
+	background: var(--table-bg);
+	transition: background-color 175ms ease-in-out;
 }
 
-.table td:last-child {
+.table tr:nth-child(even) {
-	padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
+	background: var(--table-zebra);
+	transition: background-color 175ms ease-in-out;
+}
+
+.table tr:not(:last-child) {
+	border-bottom: 1px solid var(--table-highlight);
+}
+
+.table tbody tr:not(.table__row-no-highlight):hover {
+	background: var(--table-highlight);
 }
 
 .table td,
@@ -23,23 +33,18 @@
 	padding: var(--vertical-separator) 10px;
 }
 
+.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 img {
 	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:not(.table__row-no-highlight):hover {
-	background: var(--table-highlight);
-}
-
 .table .table__icon {
 	box-sizing: content-box;
 	width: 32px;
@@ -82,7 +87,9 @@
 
 /* .table__cell-content {} */
 
-.table__cell-content--vertical-center {
+.table__cell-content.table__cell-content--vertical-center {
+	/*  Wrap cell content in this to center vertically cells
+	with material icons or both material icons and text */
 	display: flex;
 	align-items: center;
 }
@@ -99,6 +106,22 @@
 	color: var(--table-bg);
 }
 
+.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;
+}
+
 /* === Tracks Table === */
 .table--tracks {
 	border-collapse: collapse;
@@ -139,8 +162,6 @@
 	border-bottom-right-radius: var(--radius);
 }
 
-/* === Tracks Table End === */
-
 /* === Tracklist Table === */
 
 /* .table--tracklist {} */
@@ -166,18 +187,10 @@
 	height: 35px;
 }
 
-.tracklist_table .track_position_head,
-.tracklist_table .track_position {
-	width: 10px;
-	text-align: center;
-}
-
 .explicit_tracklist {
 	margin-left: var(--explicit-separator);
 }
 
-/* === Tracklist Table End === */
-
 /* === Charts Table === */
 
 /* .table--charts {} */
@@ -185,21 +198,3 @@
 .table--charts td {
 	height: 35px;
 }
-
-/* === Charts Table End === */
-
-.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;
-}

public/css/modules/track-preview.css

@@ -1,7 +1,7 @@
 .preview_controls {
 	opacity: 0;
 	display: block;
-	background: rgba(0, 0, 0, .5);
+	background: rgba(0, 0, 0, 0.5);
 	width: 56px;
 	height: 56px;
 	text-align: center;
@@ -11,6 +11,7 @@
 	top: 0;
 	right: 0;
 }
+
 .preview_playlist_controls {
 	cursor: pointer;
 }

public/index.html

@@ -244,6 +244,7 @@ <h1>No Tracks found</h1>
 																play_arrow
 															</i>
 															<img class="rounded coverart" :src="track.album.cover_small">
+														</a>
 													</td>
 													<td class="table__cell table__cell--large breakline">
 														<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
@@ -530,31 +531,35 @@ <h1>No Favorite Tracks found</h1>
 										<td class="top-tracks-position" :class="{ first: track.position === 1 }">
 											{{ track.position }}
 										</td>
-										<td style="width: 48px; text-align: center;">
+										<td>
-											<a href="#" @click="playPausePreview" :class="'rounded' + (track.preview ? ' single-cover' : '')"
+											<a href="#" class="rounded" :class="{ 'single-cover' : !!track.preview }"
-												:data-preview="track.preview">
+												@click="playPausePreview" :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="breakline">
+										<td class="table__cell--large 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">
+										<td class="table__cell--medium table__cell--center 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__cell--medium table__cell--center breakline clickable" @click="albumView"
+											:data-id="track.album.id">
 											{{track.album.title}}
 										</td>
-										<td>
+										<td class="table__cell--small">
 											{{convertDuration(track.duration)}}
 										</td>
-										<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+										<td class="table__cell--download clickable" @contextmenu.prevent="openQualityModal"
-											@click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;"
+											@click.stop="addToQueue" :data-link="track.link" role="button" aria-label="download">
-											class="clickable">
+											<div class="table__cell-content table__cell-content--vertical-center">
 												<i class="material-icons">get_app</i>
+											</div>
 										</td>
 									</tr>
 								</table>

src/js/modules/track-preview.js

@@ -50,6 +50,7 @@ function stopStackedTabsPreview() {
 
 // on hover event
 function previewMouseEnter(e) {
+	console.log('mouse Enter')
 	$(e.currentTarget).css({ opacity: 1 })
 }
 
@@ -68,6 +69,7 @@ function playPausePreview(e) {
 	const { currentTarget: obj } = event
 
 	var icon = obj.tagName == 'I' ? $(obj) : $(obj).children('i')
+
 	if ($(obj).attr('playing')) {
 		if (preview_track.paused) {
 			preview_track.play()