From 18fb5020bb21ae7462c31e35b6f807451d895d8f Mon Sep 17 00:00:00 2001
From: RemixDev <RemixDev64@gmail.com>
Date: Fri, 17 Apr 2020 21:04:51 +0200
Subject: [PATCH] Started working on artist tab style

---
 public/css/modules/globals.css     | 12 +++++++++++-
 public/css/modules/main-search.css | 13 +------------
 public/css/modules/stackedTabs.css |  5 +++++
 public/css/style.css               |  3 ++-
 public/index.html                  | 20 +++++++++-----------
 5 files changed, 28 insertions(+), 25 deletions(-)
 create mode 100644 public/css/modules/stackedTabs.css

diff --git a/public/css/modules/globals.css b/public/css/modules/globals.css
index d2c4ca0..378e9ae 100644
--- a/public/css/modules/globals.css
+++ b/public/css/modules/globals.css
@@ -130,6 +130,16 @@ button[disabled] {
 	opacity: 0.75;
 }
 
+button.selective {
+	background-color: var(--main-background);
+	color: var(--main-text);
+}
+
+button.selective.active {
+	background-color: var(--accent-color);
+	color: var(--accent-text);
+}
+
 input[type="text"],
 input[type="password"],
 input[type="number"] {
@@ -158,4 +168,4 @@ input[type="number"] {
 	height: 64px;
 	width: 100%;
 	margin-top: 24px;
-}
\ No newline at end of file
+}
diff --git a/public/css/modules/main-search.css b/public/css/modules/main-search.css
index 6d96c84..5236b08 100644
--- a/public/css/modules/main-search.css
+++ b/public/css/modules/main-search.css
@@ -1,15 +1,4 @@
 /* Main Search Tab */
-
-.search_tablinks {
-	background-color: var(--main-background);
-	color: var(--main-text);
-}
-
-.search_tablinks.active {
-	background-color: var(--accent-color);
-	color: var(--accent-text);
-}
-
 #main_search>.search_section {
 	float: none;
 }
@@ -70,4 +59,4 @@
 .track_row>td>img {
 	width: 32px;
 	height: 32px;
-}
\ No newline at end of file
+}
diff --git a/public/css/modules/stackedTabs.css b/public/css/modules/stackedTabs.css
new file mode 100644
index 0000000..1bb249d
--- /dev/null
+++ b/public/css/modules/stackedTabs.css
@@ -0,0 +1,5 @@
+#artist_tab header{
+	background-position: 0% 35%;
+	background-size: cover;
+	padding: 220px 24px 8px;
+}
diff --git a/public/css/style.css b/public/css/style.css
index c756acc..23d57bf 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -3,6 +3,7 @@
 @import 'modules/sidebar.css';
 @import 'modules/middle-section.css';
 @import 'modules/tabs.css';
+@import 'modules/stackedTabs.css';
 @import 'modules/settings.css';
 @import 'modules/main-search.css';
-@import 'modules/download-tab.css';
\ No newline at end of file
+@import 'modules/download-tab.css';
diff --git a/public/index.html b/public/index.html
index b2237c3..2f25215 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,11 +36,11 @@
 					<!-- <div id="v-app" style="height: 300px;"><app/></div> -->
 					<div id="search_tab" class="main_tabcontent">
 						<div class="tab">
-							<button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
-							<button class="search_tablinks" id="search_track_tab" onclick="changeTab(event, 'search', 'track_search')">Tracks</button>
-							<button class="search_tablinks" id="search_album_tab" onclick="changeTab(event, 'search', 'album_search')">Album</button>
-							<button class="search_tablinks" id="search_artist_tab" onclick="changeTab(event, 'search', 'artist_search')">Artist</button>
-							<button class="search_tablinks" id="search_playlist_tab" onclick="changeTab(event, 'search', 'playlist_search')">Playlist</button>
+							<button class="search_tablinks selective" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
+							<button class="search_tablinks selective" id="search_track_tab" onclick="changeTab(event, 'search', 'track_search')">Tracks</button>
+							<button class="search_tablinks selective" id="search_album_tab" onclick="changeTab(event, 'search', 'album_search')">Album</button>
+							<button class="search_tablinks selective" id="search_artist_tab" onclick="changeTab(event, 'search', 'artist_search')">Artist</button>
+							<button class="search_tablinks selective" id="search_playlist_tab" onclick="changeTab(event, 'search', 'playlist_search')">Playlist</button>
 						</div>
 						<div id="search_tab_content">
 							<!-- ### Main Search Tab ### -->
@@ -375,17 +375,15 @@ <h1>Settings</h1>
 					<div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
 
 					<div id="artist_tab" class="main_tabcontent fixed_footer">
-						<header>
+						<header v-bind:style="{ 'background-image': ' url(\''+image+'\')' }">
 							<h1>{{ title }}</h1>
 							<div class="fab"><i class="material-icons">get_app</i></div>
 						</header>
 
 						<div>
-				      <ul id="artist-tabs">
-								<template v-for="(item, name, index) in body">
-									<li class="tab"><a v-bind:class="index==0 ? 'active' : ''" v-bind:href="'#artist_' + name" v-on:click="changeTab(name)">{{ name }}</a></li>
-								</template>
-				      </ul>
+							<template v-for="(item, name, index) in body">
+								<button v-bind:class="'selective' + (name==currentTab ? 'active' : '')" v-bind:href="'#artist_' + name" v-on:click="changeTab(name)">{{ name }}</button>
+							</template>
 						</div>
 
 						<table>