diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2018-07-23 14:37:18 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-07-23 14:37:18 +0900 |
| commit | 8adc7990417f5a3b0a401ecbc276d5e7fc4e7de4 (patch) | |
| tree | 48717d548fc03c1463d572a2335f2388050766bf /src | |
| parent | #1957 (diff) | |
| parent | Go to top (diff) | |
| download | sharkey-8adc7990417f5a3b0a401ecbc276d5e7fc4e7de4.tar.gz sharkey-8adc7990417f5a3b0a401ecbc276d5e7fc4e7de4.tar.bz2 sharkey-8adc7990417f5a3b0a401ecbc276d5e7fc4e7de4.zip | |
Merge pull request #1959 from acid-chicken/top
Go to top
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/app/desktop/views/components/ui.header.nav.vue | 12 | ||||
| -rw-r--r-- | src/client/app/desktop/views/components/ui.header.vue | 40 |
2 files changed, 35 insertions, 17 deletions
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 > * |