chore: fixed some route names that were not correct; style: made back button in artist, playlist and album tabs stick to the top of the window

src/components/TheContent.vue

@@ -7,23 +7,24 @@
 	>
 		<div id="container">
 			<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="!loading" />
+			<BackButton v-if="showBackButton" class="sticky -ml-20" style="top: 1rem" />
 
 			<keep-alive>
 				<router-view
 					v-if="!$route.meta.notKeepAlive"
 					v-show="!loading"
+					class="-mt-16"
 					:key="$route.fullPath"
 					:perform-scrolled-search="performScrolledSearch"
-					exclude=""
 				></router-view>
 			</keep-alive>
 
 			<router-view
 				v-if="$route.meta.notKeepAlive"
 				v-show="!loading"
+				class="-mt-16"
 				:key="$route.fullPath"
 				:perform-scrolled-search="performScrolledSearch"
-				exclude=""
 			></router-view>
 		</div>
 	</main>
@@ -34,6 +35,7 @@
 	margin: 0 auto;
 	max-width: 1280px;
 	width: var(--container-width);
+	transform: scale(1);
 }
 
 main {
@@ -64,15 +66,22 @@ main::-webkit-scrollbar-thumb {
 <script>
 import { debounce } from '@/utils/utils'
 import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
+import BackButton from '@components/globals/BackButton.vue'
 
 export default {
 	components: {
-		BaseLoadingPlaceholder
+		BaseLoadingPlaceholder,
+		BackButton
 	},
 	data: () => ({
 		performScrolledSearch: false,
 		loading: false
 	}),
+	computed: {
+		showBackButton() {
+			return ['Tracklist', 'Artist', 'Album', 'Playlist', 'Spotify Playlist'].indexOf(this.$route.name) !== -1
+		}
+	},
 	mounted() {
 		this.$root.$on('updateSearchLoadingState', loading => {
 			this.loading = loading

src/components/globals/BackButton.vue

@@ -1,6 +1,6 @@
 <template>
 	<button
-		class="btn-primary border-transparent border-solid absolute flex items-center justify-center p-1 m-0 w-16 h-16 rounded-full"
+		class="btn-primary border-transparent border-solid flex items-center justify-center p-1 m-0 w-16 h-16 rounded-full z-10"
 		@click="$router.back()"
 	>
 		<i class="material-icons mirrored text-4xl text-white">forward</i>
@@ -9,9 +9,6 @@
 
 <style scoped>
 button {
-	top: 10px;
-	left: 10px;
-
 	transition: background 200ms ease-in-out;
 }
 </style>

src/components/pages/Artist.vue

@@ -7,8 +7,6 @@
 					'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
 			}"
 		>
-			<BackButton />
-
 			<h1>{{ title }}</h1>
 			<div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right">
 				<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
@@ -84,8 +82,6 @@ import { socket } from '@/utils/socket'
 import Downloads from '@/utils/downloads'
 import EventBus from '@/utils/EventBus'
 
-import BackButton from '@components/globals/BackButton.vue'
-
 export default {
 	data() {
 		return {
@@ -115,9 +111,6 @@ export default {
 			} else return []
 		}
 	},
-	components: {
-		BackButton
-	},
 	mounted() {
 		socket.on('show_artist', this.showArtist)
 

src/components/pages/Tracklist.vue

@@ -6,8 +6,6 @@
 					'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
 			}"
 		>
-			<BackButton />
-
 			<h1 class="inline-flex">
 				{{ title }} <i v-if="explicit" class="material-icons explicit_icon explicit_icon--right">explicit</i>
 			</h1>
@@ -157,8 +155,6 @@ import Downloads from '@/utils/downloads'
 import Utils from '@/utils/utils'
 import EventBus from '@/utils/EventBus'
 
-import BackButton from '@components/globals/BackButton.vue'
-
 export default {
 	data() {
 		return {
@@ -173,9 +169,6 @@ export default {
 			body: []
 		}
 	},
-	components: {
-		BackButton
-	},
 	mounted() {
 		EventBus.$on('tracklistTab:selectRow', this.selectRow)
 

src/router.js

@@ -42,12 +42,12 @@ const routes = [
 		component: Tracklist
 	},
 	{
-		path: '/tracklist/:id',
+		path: '/playlist/:id',
 		name: 'Playlist',
 		component: Tracklist
 	},
 	{
-		path: '/tracklist/:id',
+		path: '/spotify-playlist/:id',
 		name: 'Spotify Playlist',
 		component: Tracklist
 	},