mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-02 08:48:11 +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"> <div class="nav">
<ul> <ul>
<template v-if="$store.getters.isSignedIn"> <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="/"> <router-link to="/">
%fa:home% %fa:home%
<p>%i18n:@home%</p> <p>%i18n:@home%</p>
</router-link> </router-link>
</li> </li>
<li class="deck" :class="{ active: $route.name == 'deck' }"> <li class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
<router-link to="/deck"> <router-link to="/deck">
%fa:columns% %fa:columns%
<p>%i18n:@deck% <small>(beta)</small></p> <p>%i18n:@deck% <small>(beta)</small></p>
@ -82,6 +82,14 @@ export default Vue.extend({
game() { game() {
(this as any).os.new(MkGameWindow); (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"> <div class="left">
<x-nav/> <x-nav/>
</div> </div>
<div class="center">
<div class="icon" @click="goToTop"></div>
</div>
<div class="right"> <div class="right">
<x-search/> <x-search/>
<x-account v-if="$store.getters.isSignedIn"/> <x-account v-if="$store.getters.isSignedIn"/>
@ -42,6 +45,14 @@ export default Vue.extend({
XPost, XPost,
XClock, XClock,
}, },
methods: {
goToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
},
mounted() { mounted() {
this.$store.commit('setUiHeaderHeight', 48); this.$store.commit('setUiHeaderHeight', 48);
@ -142,26 +153,25 @@ root(isDark)
max-width 1300px max-width 1300px
margin 0 auto 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 > .left
margin 0 auto 0 0
height 48px height 48px
> .right > .right
margin 0 0 0 auto
height 48px height 48px
> * > *