graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-12-25 07:13:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

Go to top

Browse source
This commit is contained in:
Acid Chicken (硫酸鶏) 2018-07-23 14:35:00 +09:00
parent 7ec9b03990
commit 41e657b64e
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
> * > *