mirror of
https://git.bsd.gay/fef/nyastodon.git
synced 2024-12-26 07:53:43 +01:00
[Glitch] Do not add margin light when opening modal on mobile
Port 0a49b26793
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
parent
4b181eba13
commit
7d79e1f31c
3 changed files with 43 additions and 28 deletions
|
@ -2,17 +2,17 @@ import React, { PureComponent, Fragment } from 'react';
|
|||
import ReactDOM from 'react-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { IntlProvider, addLocaleData } from 'react-intl';
|
||||
import { List as ImmutableList, fromJS } from 'immutable';
|
||||
import { getLocale } from 'mastodon/locales';
|
||||
import { getScrollbarWidth } from 'flavours/glitch/util/scrollbar';
|
||||
import MediaGallery from 'flavours/glitch/components/media_gallery';
|
||||
import Video from 'flavours/glitch/features/video';
|
||||
import Card from 'flavours/glitch/features/status/components/card';
|
||||
import Poll from 'flavours/glitch/components/poll';
|
||||
import Hashtag from 'flavours/glitch/components/hashtag';
|
||||
import Audio from 'flavours/glitch/features/audio';
|
||||
import ModalRoot from 'flavours/glitch/components/modal_root';
|
||||
import { getScrollbarWidth } from 'flavours/glitch/features/ui/components/modal_root';
|
||||
import MediaModal from 'flavours/glitch/features/ui/components/media_modal';
|
||||
import { List as ImmutableList, fromJS } from 'immutable';
|
||||
import Video from 'flavours/glitch/features/video';
|
||||
import Card from 'flavours/glitch/features/status/components/card';
|
||||
import Audio from 'flavours/glitch/features/audio';
|
||||
|
||||
const { localeData, messages } = getLocale();
|
||||
addLocaleData(localeData);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Base from '../../../components/modal_root';
|
||||
import { getScrollbarWidth } from 'flavours/glitch/util/scrollbar';
|
||||
import Base from 'flavours/glitch/components/modal_root';
|
||||
import BundleContainer from '../containers/bundle_container';
|
||||
import BundleModalError from './bundle_modal_error';
|
||||
import ModalLoading from './modal_loading';
|
||||
|
@ -46,28 +47,6 @@ 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 = {
|
||||
|
|
36
app/javascript/flavours/glitch/util/scrollbar.js
Normal file
36
app/javascript/flavours/glitch/util/scrollbar.js
Normal file
|
@ -0,0 +1,36 @@
|
|||
import { isMobile } from 'flavours/glitch/util/is_mobile';
|
||||
|
||||
/** @type {number | null} */
|
||||
let cachedScrollbarWidth = null;
|
||||
|
||||
/**
|
||||
* @return {number}
|
||||
*/
|
||||
const getActualScrollbarWidth = () => {
|
||||
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;
|
||||
outer.parentNode.removeChild(outer);
|
||||
|
||||
return scrollbarWidth;
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {number}
|
||||
*/
|
||||
export const getScrollbarWidth = () => {
|
||||
if (cachedScrollbarWidth !== null) {
|
||||
return cachedScrollbarWidth;
|
||||
}
|
||||
|
||||
const scrollbarWidth = isMobile(window.innerWidth) ? 0 : getActualScrollbarWidth();
|
||||
cachedScrollbarWidth = scrollbarWidth;
|
||||
|
||||
return scrollbarWidth;
|
||||
};
|
Loading…
Reference in a new issue