Do not add margin light when opening modal on mobile (#11830)
This commit is contained in:
parent
f5c71a6cd2
commit
03e29f4c51
3 changed files with 46 additions and 31 deletions
|
@ -2,17 +2,17 @@ import React, { PureComponent, Fragment } from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { IntlProvider, addLocaleData } from 'react-intl';
|
import { IntlProvider, addLocaleData } from 'react-intl';
|
||||||
import { getLocale } from '../locales';
|
import { List as ImmutableList, fromJS } from 'immutable';
|
||||||
import MediaGallery from '../components/media_gallery';
|
import { getLocale } from 'mastodon/locales';
|
||||||
import Video from '../features/video';
|
import { getScrollbarWidth } from 'mastodon/utils/scrollbar';
|
||||||
import Card from '../features/status/components/card';
|
import MediaGallery from 'mastodon/components/media_gallery';
|
||||||
import Poll from 'mastodon/components/poll';
|
import Poll from 'mastodon/components/poll';
|
||||||
import Hashtag from 'mastodon/components/hashtag';
|
import Hashtag from 'mastodon/components/hashtag';
|
||||||
|
import ModalRoot from 'mastodon/components/modal_root';
|
||||||
|
import MediaModal from 'mastodon/features/ui/components/media_modal';
|
||||||
|
import Video from 'mastodon/features/video';
|
||||||
|
import Card from 'mastodon/features/status/components/card';
|
||||||
import Audio from 'mastodon/features/audio';
|
import Audio from 'mastodon/features/audio';
|
||||||
import ModalRoot from '../components/modal_root';
|
|
||||||
import { getScrollbarWidth } from '../features/ui/components/modal_root';
|
|
||||||
import MediaModal from '../features/ui/components/media_modal';
|
|
||||||
import { List as ImmutableList, fromJS } from 'immutable';
|
|
||||||
|
|
||||||
const { localeData, messages } = getLocale();
|
const { localeData, messages } = getLocale();
|
||||||
addLocaleData(localeData);
|
addLocaleData(localeData);
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import Base from '../../../components/modal_root';
|
import { getScrollbarWidth } from 'mastodon/utils/scrollbar';
|
||||||
|
import Base from 'mastodon/components/modal_root';
|
||||||
import BundleContainer from '../containers/bundle_container';
|
import BundleContainer from '../containers/bundle_container';
|
||||||
import BundleModalError from './bundle_modal_error';
|
import BundleModalError from './bundle_modal_error';
|
||||||
import ModalLoading from './modal_loading';
|
import ModalLoading from './modal_loading';
|
||||||
|
@ -32,28 +33,6 @@ const MODAL_COMPONENTS = {
|
||||||
'LIST_ADDER':ListAdder,
|
'LIST_ADDER':ListAdder,
|
||||||
};
|
};
|
||||||
|
|
||||||
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 {
|
export default class ModalRoot extends React.PureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
|
36
app/javascript/mastodon/utils/scrollbar.js
Normal file
36
app/javascript/mastodon/utils/scrollbar.js
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
import { isMobile } from '../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