From 255807858d29030c1fa4eb5b5ed743f429f85756 Mon Sep 17 00:00:00 2001 From: David Jay Date: Thu, 9 Mar 2017 18:06:44 -0500 Subject: [PATCH 1/2] Scrolling to keep selected comments in view. --- .../containers/ModerationQueue/ModerationContainer.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index e53162992..70fe0cdd5 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -3,6 +3,7 @@ import {connect} from 'react-redux'; import {compose} from 'react-apollo'; import key from 'keymaster'; import isEqual from 'lodash/isEqual'; +import styles from './components/styles.css'; import {modQueueQuery} from '../../graphql/queries'; import {banUser, setCommentStatus} from '../../graphql/mutations'; @@ -90,6 +91,15 @@ class ModerationContainer extends Component { key.unbind('t'); } + componentDidUpdate(_, prevState) { + + // If paging through using keybaord shortcuts, scroll the page to keep the selected + // comment in view. + if (prevState.selectedIndex !== this.state.selectedIndex) { + document.querySelector(`.${styles.selected}`).scrollIntoViewIfNeeded(); + } + } + componentWillReceiveProps(nextProps) { const {updateAssets} = this.props; if(!isEqual(nextProps.data.assets, this.props.data.assets)) { From f999be6fbfce0b44855b2334f7f086fef84a3f41 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Mon, 13 Mar 2017 11:13:28 -0600 Subject: [PATCH 2/2] scrollIntoView will work in more browsers --- .../src/containers/ModerationQueue/ModerationContainer.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 70fe0cdd5..e254a75d6 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -96,7 +96,9 @@ class ModerationContainer extends Component { // If paging through using keybaord shortcuts, scroll the page to keep the selected // comment in view. if (prevState.selectedIndex !== this.state.selectedIndex) { - document.querySelector(`.${styles.selected}`).scrollIntoViewIfNeeded(); + + // the 'smooth' flag only works in FF as of March 2017 + document.querySelector(`.${styles.selected}`).scrollIntoView({behavior: 'smooth'}); } }