diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js index 89e2f91896..d3256fbec8 100644 --- a/app/javascript/mastodon/components/column_header.js +++ b/app/javascript/mastodon/components/column_header.js @@ -21,6 +21,7 @@ export default class ColumnHeader extends React.PureComponent { icon: PropTypes.string.isRequired, active: PropTypes.bool, multiColumn: PropTypes.bool, + focusable: PropTypes.bool, showBackButton: PropTypes.bool, children: PropTypes.node, pinned: PropTypes.bool, @@ -29,6 +30,10 @@ export default class ColumnHeader extends React.PureComponent { onClick: PropTypes.func, }; + static defaultProps = { + focusable: true, + } + state = { collapsed: true, animating: false, @@ -61,7 +66,7 @@ export default class ColumnHeader extends React.PureComponent { } render () { - const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton, intl: { formatMessage } } = this.props; + const { title, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage } } = this.props; const { collapsed, animating } = this.state; const wrapperClassName = classNames('column-header__wrapper', { @@ -123,12 +128,12 @@ export default class ColumnHeader extends React.PureComponent { } if (children || multiColumn) { - collapseButton = ; + collapseButton = ; } return (
-
+
{title} @@ -138,7 +143,7 @@ export default class ColumnHeader extends React.PureComponent {
-
+
{(!collapsed || animating) && collapsedContent}
diff --git a/app/javascript/mastodon/features/notifications/components/column_settings.js b/app/javascript/mastodon/features/notifications/components/column_settings.js index 31cac5bc7a..88a29d4d31 100644 --- a/app/javascript/mastodon/features/notifications/components/column_settings.js +++ b/app/javascript/mastodon/features/notifications/components/column_settings.js @@ -36,40 +36,48 @@ export default class ColumnSettings extends React.PureComponent {
- +
+ -
- - {showPushSettings && } - - +
+ + {showPushSettings && } + + +
- +
+ -
- - {showPushSettings && } - - +
+ + {showPushSettings && } + + +
- +
+ -
- - {showPushSettings && } - - +
+ + {showPushSettings && } + + +
- +
+ -
- - {showPushSettings && } - - +
+ + {showPushSettings && } + + +
); diff --git a/app/javascript/mastodon/features/ui/components/column.js b/app/javascript/mastodon/features/ui/components/column.js index ce1dca171e..2d46264a21 100644 --- a/app/javascript/mastodon/features/ui/components/column.js +++ b/app/javascript/mastodon/features/ui/components/column.js @@ -3,6 +3,7 @@ import ColumnHeader from './column_header'; import PropTypes from 'prop-types'; import { debounce } from 'lodash'; import scrollTop from '../../../scroll'; +import { isMobile } from '../../../is_mobile'; export default class Column extends React.PureComponent { @@ -37,13 +38,12 @@ export default class Column extends React.PureComponent { render () { const { heading, icon, children, active, hideHeadingOnMobile } = this.props; - let columnHeaderId = null; - let header = ''; + const showHeading = !hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)); - if (heading) { - columnHeaderId = heading.replace(/ /g, '-'); - header = ; - } + const columnHeaderId = showHeading && heading.replace(/ /g, '-'); + const header = showHeading && ( + + ); return (
+
{icon} {type}
diff --git a/app/javascript/mastodon/features/ui/components/column_link.js b/app/javascript/mastodon/features/ui/components/column_link.js index cbdb6534fd..ad7ec9318d 100644 --- a/app/javascript/mastodon/features/ui/components/column_link.js +++ b/app/javascript/mastodon/features/ui/components/column_link.js @@ -2,17 +2,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import Link from 'react-router-dom/Link'; -const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => { +const ColumnLink = ({ icon, text, to, href, method }) => { if (href) { return ( - + {text} ); } else { return ( - + {text} diff --git a/app/javascript/mastodon/features/ui/components/column_loading.js b/app/javascript/mastodon/features/ui/components/column_loading.js index 7ecfaf77a5..1c4058926c 100644 --- a/app/javascript/mastodon/features/ui/components/column_loading.js +++ b/app/javascript/mastodon/features/ui/components/column_loading.js @@ -6,7 +6,7 @@ import ColumnHeader from '../../../components/column_header'; const ColumnLoading = ({ title = '', icon = ' ' }) => ( - +
); diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 8de456754b..a51cd962e3 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1743,12 +1743,6 @@ &:hover { background: lighten($ui-base-color, 11%); } - - &.hidden-on-mobile { - @media screen and (max-width: 1024px) { - display: none; - } - } } .column-link__icon { @@ -2132,12 +2126,6 @@ button.icon-button.active i.fa-retweet { } } - &.hidden-on-mobile { - @media screen and (max-width: 1024px) { - display: none; - } - } - &:focus, &:active { outline: 0;