From 78af88e1f4389b821815316f03a27be1b55e61da Mon Sep 17 00:00:00 2001 From: Ash Furrow Date: Fri, 21 Apr 2017 12:17:55 -0400 Subject: [PATCH] Hides superluous details on small screens (#2175) * Hides superluous details on small screans. * Addressed feedback from #2175. --- .../components/features/getting_started/index.jsx | 6 +++--- .../components/features/ui/components/column.jsx | 7 ++++--- .../features/ui/components/column_header.jsx | 7 ++++--- .../features/ui/components/column_link.jsx | 10 +++++----- app/assets/stylesheets/components.scss | 13 +++++++++++++ 5 files changed, 29 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx index 6167d7cf073..52262a7cd1e 100644 --- a/app/assets/javascripts/components/features/getting_started/index.jsx +++ b/app/assets/javascripts/components/features/getting_started/index.jsx @@ -30,10 +30,10 @@ const GettingStarted = ({ intl, me }) => { } return ( - +
- - + + {followRequests} diff --git a/app/assets/javascripts/components/features/ui/components/column.jsx b/app/assets/javascripts/components/features/ui/components/column.jsx index f0e3c25cc18..977ea6059c9 100644 --- a/app/assets/javascripts/components/features/ui/components/column.jsx +++ b/app/assets/javascripts/components/features/ui/components/column.jsx @@ -35,7 +35,8 @@ const Column = React.createClass({ heading: React.PropTypes.string, icon: React.PropTypes.string, children: React.PropTypes.node, - active: React.PropTypes.bool + active: React.PropTypes.bool, + hideHeadingOnMobile: React.PropTypes.bool }, mixins: [PureRenderMixin], @@ -55,12 +56,12 @@ const Column = React.createClass({ }, render () { - const { heading, icon, children, active } = this.props; + const { heading, icon, children, active, hideHeadingOnMobile } = this.props; let header = ''; if (heading) { - header = ; + header = ; } return ( diff --git a/app/assets/javascripts/components/features/ui/components/column_header.jsx b/app/assets/javascripts/components/features/ui/components/column_header.jsx index 1df0b3da98f..232db1e1433 100644 --- a/app/assets/javascripts/components/features/ui/components/column_header.jsx +++ b/app/assets/javascripts/components/features/ui/components/column_header.jsx @@ -6,7 +6,8 @@ const ColumnHeader = React.createClass({ icon: React.PropTypes.string, type: React.PropTypes.string, active: React.PropTypes.bool, - onClick: React.PropTypes.func + onClick: React.PropTypes.func, + hideOnMobile: React.PropTypes.bool }, mixins: [PureRenderMixin], @@ -16,7 +17,7 @@ const ColumnHeader = React.createClass({ }, render () { - const { type, active } = this.props; + const { type, active, hideOnMobile } = this.props; let icon = ''; @@ -25,7 +26,7 @@ const ColumnHeader = React.createClass({ } return ( -
+
{icon} {type}
diff --git a/app/assets/javascripts/components/features/ui/components/column_link.jsx b/app/assets/javascripts/components/features/ui/components/column_link.jsx index fb253bbbdc4..9ed34e85f5a 100644 --- a/app/assets/javascripts/components/features/ui/components/column_link.jsx +++ b/app/assets/javascripts/components/features/ui/components/column_link.jsx @@ -1,7 +1,6 @@ import { Link } from 'react-router'; const outerStyle = { - display: 'block', padding: '15px', fontSize: '16px', textDecoration: 'none' @@ -12,17 +11,17 @@ const iconStyle = { marginRight: '5px' }; -const ColumnLink = ({ icon, text, to, href, method }) => { +const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => { if (href) { return ( - + {text} ); } else { return ( - + {text} @@ -35,7 +34,8 @@ ColumnLink.propTypes = { text: React.PropTypes.string.isRequired, to: React.PropTypes.string, href: React.PropTypes.string, - method: React.PropTypes.string + method: React.PropTypes.string, + hideOnMobile: React.PropTypes.bool }; export default ColumnLink; diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 2fdbde5138d..0d3ddccd7b4 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -1183,10 +1183,17 @@ a.status__content__spoiler-link { .column-link { background: lighten($color1, 8%); color: $color5; + display: block; &:hover { background: lighten($color1, 11%); } + + &.hidden-on-mobile { + @media screen and (max-width: 1024px) { + display: none; + } + } } .autosuggest-textarea, .spoiler-input { @@ -1382,6 +1389,12 @@ button.icon-button.active i.fa-retweet { color: $color4; text-shadow: 0 0 10px rgba($color4, 0.4); } + + &.hidden-on-mobile { + @media screen and (max-width: 1024px) { + display: none; + } + } } .loading-indicator {