Merge pull request #1959 from acid-chicken/top

Go to top

src/client/app/desktop/views/components/ui.header.nav.vue

@@ -2,13 +2,13 @@
 <div class="nav">
 	<ul>
 		<template v-if="$store.getters.isSignedIn">
-			<li class="home" :class="{ active: $route.name == 'index' }">
+			<li class="home" :class="{ active: $route.name == 'index' }" @click="goToTop">
 				<router-link to="/">
 					%fa:home%
 					<p>%i18n:@home%</p>
 				</router-link>
 			</li>
-			<li class="deck" :class="{ active: $route.name == 'deck' }">
+			<li class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
 				<router-link to="/deck">
 					%fa:columns%
 					<p>%i18n:@deck% <small>(beta)</small></p>
@@ -82,6 +82,14 @@ export default Vue.extend({
 
 		game() {
 			(this as any).os.new(MkGameWindow);
+		},
+
+		goToTop(e: HTMLElement) {
+			if (e.classList.contains('active'))
+				window.scrollTo({
+					top: 0,
+					behavior: 'smooth'
+				});
 		}
 	}
 });

src/client/app/desktop/views/components/ui.header.vue

@@ -9,6 +9,9 @@
 				<div class="left">
 					<x-nav/>
 				</div>
+				<div class="center">
+					<div class="icon" @click="goToTop"></div>
+				</div>
 				<div class="right">
 					<x-search/>
 					<x-account v-if="$store.getters.isSignedIn"/>
@@ -42,6 +45,14 @@ export default Vue.extend({
 		XPost,
 		XClock,
 	},
+	methods: {
+		goToTop() {
+			window.scrollTo({
+				top: 0,
+				behavior: 'smooth'
+			});
+		}
+	},
 	mounted() {
 		this.$store.commit('setUiHeaderHeight', 48);
 
@@ -142,26 +153,25 @@ root(isDark)
 				max-width 1300px
 				margin 0 auto
 
-				&:before
+				> .center
-					content ""
+					margin auto
-					position absolute
+					> .icon
-					top 0
+						position absolute
-					left 0
+						top 0
-					display block
+						left 0
-					width 100%
+						display block
-					height 48px
+						width 48px
-					background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg')
+						height 48px
-					background-size 24px
+						background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg')
-					background-position center
+						background-size 24px
-					background-repeat no-repeat
+						background-position center
-					opacity 0.3
+						background-repeat no-repeat
+						opacity 0.3
 
 				> .left
-					margin 0 auto 0 0
 					height 48px
 
 				> .right
-					margin 0 0 0 auto
 					height 48px
 
 					> *