diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2019-07-19 09:25:22 +0200 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2019-10-05 22:53:20 +0200 |
commit | 9e2e623ebe25b8e58a6c8f4bf947015481f10c66 (patch) | |
tree | 456537a09210291271436ee013c8335cb063d312 /app/javascript/flavours/glitch/features/ui/components | |
parent | 3921125e5578fb3871fdcae0e8e8a77179f1ad72 (diff) |
[Glitch] Change single-column mode to scroll the whole page
Port aa22b38fdbc1842549b6cbc0e0d948f85a71b92a to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui/components')
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/modal_root.js | 24 |
1 files changed, 24 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.js b/app/javascript/flavours/glitch/features/ui/components/modal_root.js index 117ce4c55..53334835d 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.js +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.js @@ -46,6 +46,28 @@ const MODAL_COMPONENTS = { 'PINNED_ACCOUNTS_EDITOR': PinnedAccountsEditor, }; +let cachedScrollbarWidth = null; + +export const getScrollbarWidth = () => { + if (cachedScrollbarWidth !== null) { + return cachedScrollbarWidth; + } + + const outer = document.createElement('div'); + outer.style.visibility = 'hidden'; + outer.style.overflow = 'scroll'; + document.body.appendChild(outer); + + const inner = document.createElement('div'); + outer.appendChild(inner); + + const scrollbarWidth = outer.offsetWidth - inner.offsetWidth; + cachedScrollbarWidth = scrollbarWidth; + outer.parentNode.removeChild(outer); + + return scrollbarWidth; +}; + export default class ModalRoot extends React.PureComponent { static propTypes = { @@ -61,8 +83,10 @@ export default class ModalRoot extends React.PureComponent { componentDidUpdate (prevProps, prevState, { visible }) { if (visible) { document.body.classList.add('with-modals--active'); + document.documentElement.style.marginRight = `${getScrollbarWidth()}px`; } else { document.body.classList.remove('with-modals--active'); + document.documentElement.style.marginRight = 0; } } |