diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.scss | 5 | ||||
| -rw-r--r-- | src/App.vue | 25 | ||||
| -rw-r--r-- | src/components/media_modal/media_modal.vue | 5 | ||||
| -rw-r--r-- | src/directives/body_scroll_lock.js | 69 | ||||
| -rw-r--r-- | src/main.js | 2 |
5 files changed, 93 insertions, 13 deletions
diff --git a/src/App.scss b/src/App.scss index ea7b54e8..2190f91a 100644 --- a/src/App.scss +++ b/src/App.scss @@ -10,7 +10,8 @@ position: fixed; z-index: -1; height: 100%; - width: 100%; + left: 0; + right: -20px; background-size: cover; background-repeat: no-repeat; background-position: 0 50%; @@ -347,6 +348,7 @@ i[class*=icon-] { align-items: center; position: fixed; height: 50px; + box-sizing: border-box; .logo { display: flex; @@ -386,6 +388,7 @@ i[class*=icon-] { } .inner-nav { + position: relative; margin: auto; box-sizing: border-box; padding-left: 10px; diff --git a/src/App.vue b/src/App.vue index f1086e60..8d7f6c79 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,6 +4,7 @@ :style="bgAppStyle" > <div + id="app_bg_wrapper" class="app-bg-wrapper" :style="bgStyle" /> @@ -14,20 +15,20 @@ class="nav-bar container" @click="scrollToTop()" > - <div - class="logo" - :style="logoBgStyle" - > + <div class="inner-nav"> <div - class="mask" - :style="logoMaskStyle" - /> - <img - :src="logo" - :style="logoStyle" + class="logo" + :style="logoBgStyle" > - </div> - <div class="inner-nav"> + <div + class="mask" + :style="logoMaskStyle" + /> + <img + :src="logo" + :style="logoStyle" + > + </div> <div class="item"> <router-link class="site-name" diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index ab5a36a5..06ced5a1 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -1,6 +1,7 @@ <template> <div v-if="showing" + v-body-scroll-lock="showing" class="modal-view media-modal-view" @click.prevent="hide" > @@ -43,6 +44,10 @@ .media-modal-view { z-index: 1001; + body:not(.scroll-locked) & { + display: none; + } + &:hover { .modal-view-button-arrow { opacity: 0.75; diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js new file mode 100644 index 00000000..6ab20c3f --- /dev/null +++ b/src/directives/body_scroll_lock.js @@ -0,0 +1,69 @@ +import * as bodyScrollLock from 'body-scroll-lock' + +let previousNavPaddingRight +let previousAppBgWrapperRight + +const disableBodyScroll = (el) => { + const scrollBarGap = window.innerWidth - document.documentElement.clientWidth + bodyScrollLock.disableBodyScroll(el, { + reserveScrollBarGap: true + }) + setTimeout(() => { + // If previousNavPaddingRight is already set, don't set it again. + if (previousNavPaddingRight === undefined) { + const navEl = document.getElementById('nav') + previousNavPaddingRight = window.getComputedStyle(navEl).getPropertyValue('padding-right') + navEl.style.paddingRight = previousNavPaddingRight ? `calc(${previousNavPaddingRight} + ${scrollBarGap}px)` : `${scrollBarGap}px` + } + // If previousAppBgWrapeprRight is already set, don't set it again. + if (previousAppBgWrapperRight === undefined) { + const appBgWrapperEl = document.getElementById('app_bg_wrapper') + previousAppBgWrapperRight = window.getComputedStyle(appBgWrapperEl).getPropertyValue('right') + appBgWrapperEl.style.right = previousAppBgWrapperRight ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)` : `${scrollBarGap}px` + } + document.body.classList.add('scroll-locked') + }) +} + +const enableBodyScroll = (el) => { + setTimeout(() => { + if (previousNavPaddingRight !== undefined) { + document.getElementById('nav').style.paddingRight = previousNavPaddingRight + // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again. + previousNavPaddingRight = undefined + } + if (previousAppBgWrapperRight !== undefined) { + document.getElementById('app_bg_wrapper').style.right = previousAppBgWrapperRight + // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again. + previousAppBgWrapperRight = undefined + } + document.body.classList.remove('scroll-locked') + }) + bodyScrollLock.enableBodyScroll(el) +} + +const directive = { + inserted: (el, binding) => { + if (binding.value) { + disableBodyScroll(el) + } + }, + componentUpdated: (el, binding) => { + if (binding.oldValue === binding.value) { + return + } + + if (binding.value) { + disableBodyScroll(el) + } else { + enableBodyScroll(el) + } + }, + unbind: (el) => { + enableBodyScroll(el) + } +} + +export default (Vue) => { + Vue.directive('body-scroll-lock', directive) +} diff --git a/src/main.js b/src/main.js index a43d31e2..7923ffe8 100644 --- a/src/main.js +++ b/src/main.js @@ -27,6 +27,7 @@ import messages from './i18n/messages.js' import VueChatScroll from 'vue-chat-scroll' import VueClickOutside from 'v-click-outside' import PortalVue from 'portal-vue' +import VBodyScrollLock from './directives/body_scroll_lock' import VTooltip from 'v-tooltip' import afterStoreSetup from './boot/after_store.js' @@ -39,6 +40,7 @@ Vue.use(VueI18n) Vue.use(VueChatScroll) Vue.use(VueClickOutside) Vue.use(PortalVue) +Vue.use(VBodyScrollLock) Vue.use(VTooltip) const i18n = new VueI18n({ |