From abf7c5b85016ec1c660ef8c6598f4b8acbb8c41c Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Fri, 16 Mar 2018 17:19:38 +0100 Subject: [PATCH] [Glitch] Fix column headers accessibility Port 08e4c78e78358c2847967e9cc34b4a6497be97e2 to glitch-soc. SCSS fix inspired by 69f13e7bca90f4855e05a49dd69bba66f843134a. --- .../glitch/components/column_header.js | 19 ++++++++----------- .../glitch/styles/components/columns.scss | 4 +--- 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js index ae90b6f81..e4296ecef 100644 --- a/app/javascript/flavours/glitch/components/column_header.js +++ b/app/javascript/flavours/glitch/components/column_header.js @@ -28,7 +28,6 @@ export default class ColumnHeader extends React.PureComponent { active: PropTypes.bool, localSettings : ImmutablePropTypes.map, multiColumn: PropTypes.bool, - focusable: PropTypes.bool, showBackButton: PropTypes.bool, notifCleaning: PropTypes.bool, // true only for the notification column notifCleaningActive: PropTypes.bool, @@ -41,10 +40,6 @@ export default class ColumnHeader extends React.PureComponent { intl: PropTypes.object.isRequired, }; - static defaultProps = { - focusable: true, - } - state = { collapsed: true, animating: false, @@ -91,7 +86,7 @@ export default class ColumnHeader extends React.PureComponent { } render () { - const { intl, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props; + const { intl, icon, active, children, pinned, onPin, multiColumn, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props; const { collapsed, animating, animatingNCD } = this.state; let title = this.props.title; @@ -172,11 +167,13 @@ export default class ColumnHeader extends React.PureComponent { return (
-

- - - {title} - +

+
{backButton} { notifCleaning ? ( diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 5dcfab4d1..933aea919 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -243,7 +243,6 @@ .column-header { display: flex; font-size: 16px; - padding: 15px; background: lighten($ui-base-color, 4%); flex: 0 0 auto; cursor: pointer; @@ -255,7 +254,7 @@ & > button { margin: 0; border: none; - padding: 15px 0 15px 15px; + padding: 15px; color: inherit; background: transparent; font: inherit; @@ -303,7 +302,6 @@ .column-header__buttons { height: 48px; display: flex; - margin: -15px; margin-left: 0; }