github/lidarr
1
0
Fork 0
mirror of https://github.com/lidarr/lidarr.git synced 2025-07-14 00:53:57 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fixed: Modal scrolling causing app to scroll on iOS

Browse source 
Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
This commit is contained in:
Qstick 2019-08-04 22:39:39 -04:00
parent 2273be5afd
commit a09611a580
9 changed files with 78 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/Components/Modal/Modal.css
View file

@ -29,6 +29,12 @@
overflow: hidden !important;
}
.modalOpenIOS {
position: fixed;
right: 0;
left: 0;
}
/*
* Sizes
*/

21
frontend/src/Components/Modal/Modal.js
View file

@ -4,6 +4,8 @@ import ReactDOM from 'react-dom';
import classNames from 'classnames';
import elementClass from 'element-class';
import getUniqueElememtId from 'Utilities/getUniqueElementId';
import { isIOS } from 'Utilities/mobile';
import { setScrollLock } from 'Utilities/scrollLock';
import * as keyCodes from 'Utilities/Constants/keyCodes';
import { sizes } from 'Helpers/Props';
import ErrorBoundary from 'Components/Error/ErrorBoundary';
@ -69,7 +71,14 @@ class Modal extends Component {
window.addEventListener('keydown', this.onKeyDown);
if (openModals.length === 1) {
elementClass(document.body).add(styles.modalOpen);
if (isIOS()) {
setScrollLock(true);
const offset = document.body.scrollTop;
document.body.style.top = `${offset * -1}px`;
elementClass(document.body).add(styles.modalOpenIOS);
} else {
elementClass(document.body).add(styles.modalOpen);
}
}
}
@ -78,7 +87,15 @@ class Modal extends Component {
window.removeEventListener('keydown', this.onKeyDown);
if (openModals.length === 0) {
elementClass(document.body).remove(styles.modalOpen);
setScrollLock(false);
if (isIOS()) {
const offset = parseInt(document.body.style.top);
elementClass(document.body).remove(styles.modalOpenIOS);
document.body.scrollTop = (offset * -1);
} else {
elementClass(document.body).remove(styles.modalOpen);
}
}
}