From 5564ef5092179b59ec966921298d32e1ee14781f Mon Sep 17 00:00:00 2001
From: RemixDev <RemixDev64@gmail.com>
Date: Tue, 21 Apr 2020 12:27:19 +0200
Subject: [PATCH] Finished implementing Album/Artist/Playlist tab

---
 public/css/modules/globals.css     | 12 +++++++++++-
 public/css/modules/stackedTabs.css | 11 +++++++++++
 public/index.html                  | 15 ++++++++-------
 public/js/app.js                   |  4 ++--
 4 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/public/css/modules/globals.css b/public/css/modules/globals.css
index e4fcb88..ec28826 100644
--- a/public/css/modules/globals.css
+++ b/public/css/modules/globals.css
@@ -66,7 +66,7 @@ table {
 	-webkit-border-vertical-spacing: 0px;
 }
 
-table td {
+table td, table th {
 	padding: 4px 12px 4px 5px;
 	vertical-align: middle;
 	border: 0px black solid;
@@ -146,6 +146,15 @@ button.selective.active {
 	color: var(--accent-text);
 }
 
+button.with_icon {
+	display: flex;
+	align-items: center;
+}
+
+button.with_icon i {
+	margin-left: 8px;
+}
+
 input[type="text"],
 input[type="password"],
 input[type="number"] {
@@ -234,6 +243,7 @@ th.sort-desc:after {content: "\25bc";font-size: 0.7em;padding-left: 3px;line-hei
 	display: inline-block;
 	background-color: var(--accent-color);
 	color: var(--accent-text);
+	cursor: pointer;
 }
 .fab i{
 	font-size: 24px;
diff --git a/public/css/modules/stackedTabs.css b/public/css/modules/stackedTabs.css
index 1ab5299..b78dcf5 100644
--- a/public/css/modules/stackedTabs.css
+++ b/public/css/modules/stackedTabs.css
@@ -4,3 +4,14 @@
 	padding: 220px 24px 8px;
 	border-radius: 8px 8px 0px 0px;
 }
+
+.image_header header h1,
+.image_header header h2{
+	margin: 0px;
+}
+
+.image_header header h2{
+	margin: 0px;
+	font-size: 18px;
+	margin-bottom: 12px;
+}
diff --git a/public/index.html b/public/index.html
index 91f0dc9..d0c1250 100644
--- a/public/index.html
+++ b/public/index.html
@@ -482,6 +482,7 @@ <h1>{{ title }}</h1>
 								<thead>
 									<tr>
 										<th v-for="data in head" v-on:click="data.sortKey ? sortBy(data.sortKey) : null"
+											v-bind:style="{ 'width': data.width ? data.width : 'auto'}"
 											v-bind:class="{ 'sort-asc': data.sortKey == sortKey && sortOrder == 'asc', 'sort-desc': data.sortKey == sortKey && sortOrder == 'desc', 'sortable': data.sortKey, 'clickable': data.sortKey }">
 											{{data.title}}
 										</th>
@@ -512,15 +513,15 @@ <h1>{{ title }}</h1>
 						<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header">
 							<header
 								v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
-								<h1>{{ title }} <i v-if="explicit" class="material-icons">explicit</i></h1>
-								<h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ release_date }}</span></h2>
+								<h1 class="inline-flex">{{ title }} <i v-if="explicit" class="material-icons">explicit</i></h1>
+								<h2  class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="right" v-if="release_date">{{ release_date }}</span></h2>
 							</header>
 
 							<table>
 								<thead>
 									<tr>
-										<th v-for="data in head" v-html="data.title"></th>
-										<th><input v-on:click="toggleAll(event)" class="selectAll" type="checkbox"></th>
+										<th v-for="data in head" v-html="data.title" v-bind:style="{ 'width': data.width ? data.width : 'auto'}"></th>
+										<th style="width: 32px"><input v-on:click="toggleAll(event)" class="selectAll" type="checkbox"></th>
 									</tr>
 								</thead>
 								<tbody>
@@ -528,7 +529,7 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
 										<tr v-if="track.type == 'track'">
 											<td><i class="material-icons">play_arrow</i></td>
 											<td>{{ track.track_position }}</td>
-											<td><i v-if="track.explicit_lyrics" class="material-icons">explicit</i>{{ track.title }} <span
+											<td class="inline-flex"><i v-if="track.explicit_lyrics" class="material-icons">explicit</i>{{ track.title }} <span
 													v-if="track.title_version">{{track.title_version}}</span></td>
 											<td class="clickable" v-on:click="artistView(event)" v-bind:data-id="track.artist.id">
 												{{ track.artist.name }}</td>
@@ -549,9 +550,9 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
 							<footer>
 								<button v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)"
 									v-bind:data-link="link">Download {{ type }}</button>
-								<button v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)"
+								<button class="with_icon" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)"
 									v-bind:data-link="selectedLinks()">Download selection<i
-										class="material-icons right">file_download</i></button>
+										class="material-icons">file_download</i></button>
 								<button onclick="backTab()">Back</button>
 							</footer>
 						</div>
diff --git a/public/js/app.js b/public/js/app.js
index 9389674..cb62e0a 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -434,7 +434,7 @@ socket.on('show_artist', function (data) {
 	artistTab.head = [
 		{ title: 'Title', sortKey: 'title' },
 		{ title: 'Release Date', sortKey: 'release_date' },
-		{ title: '', width: '56px' }
+		{ title: '', width: '32px' }
 	]
 	if (_.isEmpty(data.releases)) {
 		artistTab.body = null
@@ -512,7 +512,7 @@ window.search = function (type) {
 }
 
 window.scrolledSearch = function (type) {
-	query = MainSearch.results.query
+	let query = MainSearch.results.query
 	if (MainSearch.results[type + 'Tab'].next < MainSearch.results[type + 'Tab'].total) {
 		socket.emit('search', {
 			term: query,