From 78af88e1f4389b821815316f03a27be1b55e61da Mon Sep 17 00:00:00 2001 From: Ash Furrow Date: Fri, 21 Apr 2017 12:17:55 -0400 Subject: Hides superluous details on small screens (#2175) * Hides superluous details on small screans. * Addressed feedback from #2175. --- .../javascripts/components/features/getting_started/index.jsx | 6 +++--- .../javascripts/components/features/ui/components/column.jsx | 7 ++++--- .../components/features/ui/components/column_header.jsx | 7 ++++--- .../components/features/ui/components/column_link.jsx | 10 +++++----- 4 files changed, 16 insertions(+), 14 deletions(-) (limited to 'app/assets/javascripts/components/features') diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx index 6167d7cf0..52262a7cd 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 f0e3c25cc..977ea6059 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 1df0b3da9..232db1e14 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 fb253bbbd..9ed34e85f 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; -- cgit