diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue index 42211b57fe..f46edecb10 100644 --- a/src/client/app/desktop/views/components/ui.header.nav.vue +++ b/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' + }); } } }); diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue index aa7c3ac44d..b6c95dd4af 100644 --- a/src/client/app/desktop/views/components/ui.header.vue +++ b/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 - content "" - position absolute - top 0 - left 0 - display block - width 100% - height 48px - background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg') - background-size 24px - background-position center - background-repeat no-repeat - opacity 0.3 + > .center + margin auto + > .icon + position absolute + top 0 + left 0 + display block + width 48px + height 48px + background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg') + background-size 24px + background-position center + background-repeat no-repeat + opacity 0.3 > .left - margin 0 auto 0 0 height 48px > .right - margin 0 0 0 auto height 48px > *