forked from fedi/mastodon
Make columns-area unscrollable when modal opened (#6241)
* Add aria-autocomplete='list' in Textaria ref: https://www.w3.org/TR/wai-aria-1.1/#aria-autocomplete * Make detect empty string brefore assign upload description * Change code elements in keyboard-shortcuts component to kbd * Add validation for onMuteNotifications * Make columns-area unscrollable when modal opend * Make columns-area unscrollable when modal opened
This commit is contained in:
parent
dcc614f869
commit
2091ae92be
|
@ -37,6 +37,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
columns: ImmutablePropTypes.list.isRequired,
|
columns: ImmutablePropTypes.list.isRequired,
|
||||||
|
isModalOpen: PropTypes.bool.isRequired,
|
||||||
singleColumn: PropTypes.bool,
|
singleColumn: PropTypes.bool,
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
};
|
};
|
||||||
|
@ -144,7 +145,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { columns, children, singleColumn } = this.props;
|
const { columns, children, singleColumn, isModalOpen } = this.props;
|
||||||
const { shouldAnimate } = this.state;
|
const { shouldAnimate } = this.state;
|
||||||
|
|
||||||
const columnIndex = getIndex(this.context.router.history.location.pathname);
|
const columnIndex = getIndex(this.context.router.history.location.pathname);
|
||||||
|
@ -159,7 +160,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='columns-area' ref={this.setRef}>
|
<div className={`columns-area ${ isModalOpen ? 'unscrollable' : '' }`} ref={this.setRef}>
|
||||||
{columns.map(column => {
|
{columns.map(column => {
|
||||||
const params = column.get('params', null) === null ? null : column.get('params').toJS();
|
const params = column.get('params', null) === null ? null : column.get('params').toJS();
|
||||||
|
|
||||||
|
|
|
@ -3,6 +3,7 @@ import ColumnsArea from '../components/columns_area';
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
columns: state.getIn(['settings', 'columns']),
|
columns: state.getIn(['settings', 'columns']),
|
||||||
|
isModalOpen: !!state.get('modal').modalType,
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(mapStateToProps, null, null, { withRef: true })(ColumnsArea);
|
export default connect(mapStateToProps, null, null, { withRef: true })(ColumnsArea);
|
||||||
|
|
|
@ -1613,6 +1613,10 @@
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
&.unscrollable {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 360px) {
|
@media screen and (min-width: 360px) {
|
||||||
|
|
Loading…
Reference in a new issue