Merge remote-tracking branch 'origin/master'

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"] {

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;
 }

public/css/modules/stackedTabs.css

@@ -0,0 +1,5 @@
+#artist_tab header{
+	background-position: 0% 35%;
+	background-size: cover;
+	padding: 220px 24px 8px;
+}

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';

public/index.html

@@ -247,17 +247,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">
-								<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>
-									<li class="tab"><a v-bind:class="index==0 ? 'active' : ''" v-bind:href="'#artist_' + name" v-on:click="changeTab(name)">{{ name }}</a></li>
+							</template>
-								</template>
-				      </ul>
 						</div>
 
 						<table>

public/js/app/components/TheSearchTab.vue

@@ -2,28 +2,28 @@
 	<div id="search_tab" class="main_tabcontent">
 		<div class="tab">
 			<button
+				class="search_tablinks selective"
 				id="search_all_tab"
-				class="search_tablinks"
 				onclick="changeTab(event, 'search', 'main_search')"
 			>All</button>
 			<button
+				class="search_tablinks selective"
 				id="search_track_tab"
-				class="search_tablinks"
 				onclick="changeTab(event, 'search', 'track_search')"
 			>Tracks</button>
 			<button
+				class="search_tablinks selective"
 				id="search_album_tab"
-				class="search_tablinks"
 				onclick="changeTab(event, 'search', 'album_search')"
 			>Album</button>
 			<button
+				class="search_tablinks selective"
 				id="search_artist_tab"
-				class="search_tablinks"
 				onclick="changeTab(event, 'search', 'artist_search')"
 			>Artist</button>
 			<button
+				class="search_tablinks selective"
 				id="search_playlist_tab"
-				class="search_tablinks"
 				onclick="changeTab(event, 'search', 'playlist_search')"
 			>Playlist</button>
 		</div>