feat: moved back button to top left of Artist and Tracklist

src/components/globals/BackButton.vue

@@ -0,0 +1,34 @@
+<template>
+	<button class="top-back-button" @click="$router.back()">
+		<i class="material-icons mirrored md-36">forward</i>
+	</button>
+</template>
+
+<style lang="scss" scoped>
+$button-dimension: 4rem;
+$button-separator: 10px;
+
+.top-back-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	position: absolute;
+	top: $button-separator;
+	left: $button-separator;
+
+	min-width: unset;
+	width: $button-dimension;
+	height: $button-dimension;
+
+	background: var(--secondary-background);
+	border-radius: 50%;
+	padding: 0.25rem;
+	margin: 0;
+	transition: background 200ms ease-in-out;
+
+	&:hover {
+		background: var(--accent-color);
+	}
+}
+</style>

src/components/pages/Artist.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="artist_tab" class="main_tabcontent fixed_footer image_header" ref="root">
+	<div id="artist_tab" class="main_tabcontent image_header" ref="root">
 		<header
 			class="inline-flex"
 			:style="{
@@ -7,6 +7,8 @@
 					'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>
@@ -67,21 +69,24 @@
 				</tr>
 			</tbody>
 		</table>
-
-		<footer>
-			<button class="back-button" @click="$router.back()">{{ $t('globals.back') }}</button>
-		</footer>
 	</div>
 </template>
 
+<style lang="scss" scoped>
+.main_tabcontent {
+	position: relative;
+}
+</style>
+
 <script>
 import { isEmpty, orderBy } from 'lodash-es'
 import { socket } from '@/utils/socket'
 import Downloads from '@/utils/downloads'
 import EventBus from '@/utils/EventBus'
 
+import BackButton from '@components/globals/BackButton.vue'
+
 export default {
-	name: 'artist-tab',
 	data() {
 		return {
 			currentTab: '',
@@ -95,6 +100,30 @@ export default {
 			body: null
 		}
 	},
+	computed: {
+		showTable() {
+			if (this.body) {
+				if (this.sortKey == 'nb_song')
+					return orderBy(
+						this.body[this.currentTab],
+						function (o) {
+							return new Number(o.nb_song)
+						},
+						this.sortOrder
+					)
+				else return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
+			} else return []
+		}
+	},
+	components: {
+		BackButton
+	},
+	mounted() {
+		socket.on('show_artist', this.showArtist)
+
+		EventBus.$on('artistTab:updateSelected', this.updateSelected)
+		EventBus.$on('artistTab:changeTab', this.changeTab)
+	},
 	methods: {
 		reset() {
 			this.title = 'Loading...'
@@ -157,30 +186,7 @@ export default {
 				this.body = releases
 			}
 		}
-	},
-	computed: {
-		showTable() {
-			if (this.body) {
-				if (this.sortKey == 'nb_song')
-					return orderBy(
-						this.body[this.currentTab],
-						function (o) {
-							return new Number(o.nb_song)
-						},
-						this.sortOrder
-					)
-				else return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
-			} else return []
-		}
-	},
-	mounted() {
-		socket.on('show_artist', this.showArtist)
-
-		EventBus.$on('artistTab:updateSelected', this.updateSelected)
-		EventBus.$on('artistTab:changeTab', this.changeTab)
 	}
 }
 </script>
 
-<style>
-</style>

src/components/pages/Tracklist.vue

@@ -1,17 +1,20 @@
 <template>
-	<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header" ref="root">
+	<div class="main_tabcontent fixed_footer image_header" ref="root">
 		<header
 			:style="{
 				'background-image':
 					'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>
-			<h2 class="inline-flex">
+
-				<span v-if="metadata">{{ metadata }}</span>
+			<h2>
-				<span class="right" v-if="release_date">{{ release_date }}</span>
+				<p v-if="metadata">{{ metadata }}</p>
+				<p v-if="release_date">{{ release_date }}</p>
 			</h2>
 		</header>
 
@@ -137,11 +140,16 @@
 			<button class="with_icon" @click.stop="addToQueue" :data-link="selectedLinks()">
 				{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
 			</button>
-			<button class="back-button" @click="$router.back()">{{ $t('globals.back') }}</button>
 		</footer>
 	</div>
 </template>
 
+<style lang="scss" scoped>
+.main_tabcontent {
+	position: relative;
+}
+</style>
+
 <script>
 import { isEmpty } from 'lodash-es'
 import { socket } from '@/utils/socket'
@@ -149,6 +157,8 @@ 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 {
@@ -163,6 +173,16 @@ export default {
 			body: []
 		}
 	},
+	components: {
+		BackButton
+	},
+	mounted() {
+		EventBus.$on('tracklistTab:selectRow', this.selectRow)
+
+		socket.on('show_album', this.showAlbum)
+		socket.on('show_playlist', this.showPlaylist)
+		socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
+	},
 	methods: {
 		playPausePreview(e) {
 			EventBus.$emit('trackPreview:playPausePreview', e)
@@ -291,16 +311,7 @@ export default {
 		selectRow(index, track) {
 			track.selected = !track.selected
 		}
-	},
-	mounted() {
-		EventBus.$on('tracklistTab:selectRow', this.selectRow)
-
-		socket.on('show_album', this.showAlbum)
-		socket.on('show_playlist', this.showPlaylist)
-		socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
 	}
 }
 </script>
 
-<style>
-</style>

src/styles/scss/globals/_globals.scss

@@ -191,22 +191,25 @@ a {
 .clickable {
 	cursor: pointer !important;
 }
+
 .table--tracklist .clickable:hover,
 .table--charts .clickable:hover {
 	text-decoration: underline;
 }
 
-.fixed_footer footer {
+.fixed_footer {
-	position: sticky;
+	footer {
-	display: flex;
+		position: sticky;
-	align-items: center;
+		display: flex;
-	flex-direction: row;
+		align-items: center;
-	justify-content: flex-end;
+		flex-direction: row;
-	background-color: var(--main-background);
+		justify-content: flex-end;
-	bottom: 0px;
+		background-color: var(--main-background);
-	height: 64px;
+		bottom: 0px;
-	width: 100%;
+		height: 64px;
-	margin-top: 24px;
+		width: 100%;
+		margin-top: 24px;
+	}
 }
 
 .fab {

src/styles/scss/globals/_typography.scss

@@ -15,3 +15,17 @@
 	font-size: 1.75rem;
 	margin-bottom: 25px;
 }
+
+.material-icons {
+	$sizes: 18, 24, 36, 48;
+
+	@each $size in $sizes {
+		&.md-#{$size} {
+			font-size: $size * 1px;
+		}
+	}
+
+	&.mirrored {
+		transform: scaleX(-1);
+	}
+}