Merge branch '616' into 'develop'
Lock body scroll when lightbox is open Closes #616 See merge request pleroma/pleroma-fe!886
This commit is contained in:
Shpuld Shpludson
commit
170372b2bc
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" href="/static/font/css/fontello.css">
|
||||
<link rel="stylesheet" href="/static/font/css/animation.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="hidden">
|
||||
<noscript>To use Pleroma, please enable JavaScript.</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
"@chenfengyuan/vue-qrcode": "^1.0.0",
|
||||
"babel-plugin-add-module-exports": "^0.2.1",
|
||||
"babel-plugin-lodash": "^3.2.11",
|
||||
"body-scroll-lock": "^2.6.4",
|
||||
"chromatism": "^3.0.0",
|
||||
"cropperjs": "^1.4.3",
|
||||
"diff": "^3.0.1",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
27
src/App.vue
27
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="mask"
|
||||
:style="logoMaskStyle"
|
||||
/>
|
||||
<img
|
||||
:src="logo"
|
||||
:style="logoStyle"
|
||||
>
|
||||
</div>
|
||||
<div class="inner-nav">
|
||||
<div
|
||||
class="logo"
|
||||
:style="logoBgStyle"
|
||||
>
|
||||
<div
|
||||
class="mask"
|
||||
:style="logoMaskStyle"
|
||||
/>
|
||||
<img
|
||||
:src="logo"
|
||||
:style="logoStyle"
|
||||
>
|
||||
</div>
|
||||
<div class="item">
|
||||
<router-link
|
||||
class="site-name"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -1196,6 +1196,11 @@ body-parser@1.18.3, body-parser@^1.16.1:
|
|||
raw-body "2.3.3"
|
||||
type-is "~1.6.16"
|
||||
|
||||
body-scroll-lock@^2.6.4:
|
||||
version "2.6.4"
|
||||
resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.4.tgz#567abc60ef4d656a79156781771398ef40462e94"
|
||||
integrity sha512-NP08WsovlmxEoZP9pdlqrE+AhNaivlTrz9a0FF37BQsnOrpN48eNqivKkE7SYpM9N+YIPjsdVzfLAUQDBm6OQw==
|
||||
|
||||
boolbase@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
|
||||
|
|
|
|||
Loading…
Reference in New Issue