mirror of https://github.com/lidarr/Lidarr
Improve page scrollbar
Fixed: Scrolling in Firefox in small window (requires refresh) New: Style scrollbar in Firefox Fixed: Scrolling with click and drag Fixes #3088 Fixes #2706
This commit is contained in:
parent
d95d17b9b7
commit
58a697f81a
|
@ -12,9 +12,9 @@ import ModalBody from 'Components/Modal/ModalBody';
|
||||||
import Portal from 'Components/Portal';
|
import Portal from 'Components/Portal';
|
||||||
import Scroller from 'Components/Scroller/Scroller';
|
import Scroller from 'Components/Scroller/Scroller';
|
||||||
import { icons, scrollDirections, sizes } from 'Helpers/Props';
|
import { icons, scrollDirections, sizes } from 'Helpers/Props';
|
||||||
|
import { isMobile as isMobileUtil } from 'Utilities/browser';
|
||||||
import * as keyCodes from 'Utilities/Constants/keyCodes';
|
import * as keyCodes from 'Utilities/Constants/keyCodes';
|
||||||
import getUniqueElememtId from 'Utilities/getUniqueElementId';
|
import getUniqueElememtId from 'Utilities/getUniqueElementId';
|
||||||
import { isMobile as isMobileUtil } from 'Utilities/mobile';
|
|
||||||
import HintedSelectInputOption from './HintedSelectInputOption';
|
import HintedSelectInputOption from './HintedSelectInputOption';
|
||||||
import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
|
import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
|
||||||
import TextInput from './TextInput';
|
import TextInput from './TextInput';
|
||||||
|
|
|
@ -6,9 +6,9 @@ import ReactDOM from 'react-dom';
|
||||||
import FocusLock from 'react-focus-lock';
|
import FocusLock from 'react-focus-lock';
|
||||||
import ErrorBoundary from 'Components/Error/ErrorBoundary';
|
import ErrorBoundary from 'Components/Error/ErrorBoundary';
|
||||||
import { sizes } from 'Helpers/Props';
|
import { sizes } from 'Helpers/Props';
|
||||||
|
import { isIOS } from 'Utilities/browser';
|
||||||
import * as keyCodes from 'Utilities/Constants/keyCodes';
|
import * as keyCodes from 'Utilities/Constants/keyCodes';
|
||||||
import getUniqueElememtId from 'Utilities/getUniqueElementId';
|
import getUniqueElememtId from 'Utilities/getUniqueElementId';
|
||||||
import { isIOS } from 'Utilities/mobile';
|
|
||||||
import { setScrollLock } from 'Utilities/scrollLock';
|
import { setScrollLock } from 'Utilities/scrollLock';
|
||||||
import ModalError from './ModalError';
|
import ModalError from './ModalError';
|
||||||
import styles from './Modal.css';
|
import styles from './Modal.css';
|
||||||
|
|
|
@ -1,23 +1,12 @@
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import OverlayScroller from 'Components/Scroller/OverlayScroller';
|
|
||||||
import Scroller from 'Components/Scroller/Scroller';
|
import Scroller from 'Components/Scroller/Scroller';
|
||||||
import { scrollDirections } from 'Helpers/Props';
|
import { scrollDirections } from 'Helpers/Props';
|
||||||
import { isMobile as isMobileUtil } from 'Utilities/mobile';
|
|
||||||
import { isLocked } from 'Utilities/scrollLock';
|
import { isLocked } from 'Utilities/scrollLock';
|
||||||
import styles from './PageContentBody.css';
|
import styles from './PageContentBody.css';
|
||||||
|
|
||||||
class PageContentBody extends Component {
|
class PageContentBody extends Component {
|
||||||
|
|
||||||
//
|
|
||||||
// Lifecycle
|
|
||||||
|
|
||||||
constructor(props, context) {
|
|
||||||
super(props, context);
|
|
||||||
|
|
||||||
this._isMobile = isMobileUtil();
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Listeners
|
// Listeners
|
||||||
|
|
||||||
|
@ -41,10 +30,8 @@ class PageContentBody extends Component {
|
||||||
...otherProps
|
...otherProps
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const ScrollerComponent = this._isMobile ? Scroller : OverlayScroller;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ScrollerComponent
|
<Scroller
|
||||||
className={className}
|
className={className}
|
||||||
scrollDirection={scrollDirections.VERTICAL}
|
scrollDirection={scrollDirections.VERTICAL}
|
||||||
{...otherProps}
|
{...otherProps}
|
||||||
|
@ -53,7 +40,7 @@ class PageContentBody extends Component {
|
||||||
<div className={innerClassName}>
|
<div className={innerClassName}>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</ScrollerComponent>
|
</Scroller>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { Manager, Popper, Reference } from 'react-popper';
|
||||||
import Portal from 'Components/Portal';
|
import Portal from 'Components/Portal';
|
||||||
import { kinds, tooltipPositions } from 'Helpers/Props';
|
import { kinds, tooltipPositions } from 'Helpers/Props';
|
||||||
import dimensions from 'Styles/Variables/dimensions';
|
import dimensions from 'Styles/Variables/dimensions';
|
||||||
import { isMobile as isMobileUtil } from 'Utilities/mobile';
|
import { isMobile as isMobileUtil } from 'Utilities/browser';
|
||||||
import styles from './Tooltip.css';
|
import styles from './Tooltip.css';
|
||||||
|
|
||||||
let maxWidth = null;
|
let maxWidth = null;
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
@define-mixin scrollbar {
|
@define-mixin scrollbar {
|
||||||
|
scrollbar-color: var(--scrollbarBackgroundColor) transparent;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
|
|
|
@ -10,3 +10,7 @@ export function isMobile() {
|
||||||
export function isIOS() {
|
export function isIOS() {
|
||||||
return mobileDetect.is('iOS');
|
return mobileDetect.is('iOS');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function isFirefox() {
|
||||||
|
return window.navigator.userAgent.toLowerCase().indexOf('firefox/') >= 0;
|
||||||
|
}
|
Loading…
Reference in New Issue