diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue index 4f4f894065bcd8ab37bd6e3e3194671953769426..7d6a1e28a0caec82504a81994607aebb3274a7a7 100644 --- a/src/client/app/desktop/views/components/home.vue +++ b/src/client/app/desktop/views/components/home.vue @@ -38,7 +38,7 @@ </div> </div> </div> - <div class="main" :class="{ withBg: $store.state.i.wallpaperUrl != null }"> + <div class="main"> <template v-if="customize"> <x-draggable v-for="place in ['left', 'right']" :list="widgets[place]" @@ -342,9 +342,6 @@ root(isDark) margin 0 auto max-width 1240px - &.withBg - background rgba(isDark ? #000 : #fff, 0.5) - > * .customize-container cursor move diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue index f1e37cc57724e89a79877e796aa5f344af64b026..c8b9bdb2a27c68e3e620881a3d47fd80ff0ef6c6 100644 --- a/src/client/app/desktop/views/components/ui.header.vue +++ b/src/client/app/desktop/views/components/ui.header.vue @@ -55,7 +55,7 @@ export default Vue.extend({ }, mounted() { - this.$store.commit('setUiHeaderHeight', 48); + this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight); if (this.$store.getters.isSignedIn) { const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000; @@ -120,8 +120,7 @@ export default Vue.extend({ <style lang="stylus" scoped> root(isDark) - position -webkit-sticky - position sticky + position fixed top 0 z-index 1000 width 100% diff --git a/src/client/app/desktop/views/components/ui.vue b/src/client/app/desktop/views/components/ui.vue index a28cb3029e9829c6810ba7284373443bfcdf105e..740eedf43f12efe5ca712f20826a96f6e6ec78a3 100644 --- a/src/client/app/desktop/views/components/ui.vue +++ b/src/client/app/desktop/views/components/ui.vue @@ -1,5 +1,6 @@ <template> -<div class="mk-ui" :style="style" v-hotkey.global="keymap"> +<div class="mk-ui" v-hotkey.global="keymap"> + <div class="bg" v-if="$store.getters.isSignedIn && $store.state.i.wallpaperUrl" :style="style"></div> <x-header class="header" v-show="!zenMode"/> <div class="content"> <slot></slot> @@ -41,6 +42,16 @@ export default Vue.extend({ } }, + watch: { + '$store.state.uiHeaderHeight'() { + this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px'; + } + }, + + mounted() { + this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px'; + }, + methods: { post() { (this as any).apis.post(); @@ -55,20 +66,22 @@ export default Vue.extend({ <style lang="stylus" scoped> .mk-ui - display flex - flex-direction column - flex 1 - background-size cover - background-position center - background-attachment fixed + min-height 100vh + padding-top 48px + + > .bg + position fixed + top 0 + left 0 + width 100% + height 100vh + background-size cover + background-position center + background-attachment fixed + opacity 0.3 > .header @media (max-width 1000px) display none - > .content - display flex - flex-direction column - flex 1 - overflow hidden </style>