mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-11-30 07:48:13 +09:00
Code

Merge pull request #1959 from acid-chicken/top

Browse Source 
Go to top
This commit is contained in:
syuilo 2018-07-23 14:37:18 +09:00 committed by GitHub
commit 8adc799041
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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'
});
}
}
});

40
src/client/app/desktop/views/components/ui.header.vue
View File

@ -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
> *