commit: 78af88e1f4389b821815316f03a27be1b55e61da parent: 74c474a652d32294394ef7b329d1bcddb64cc2e0 Author: Ash Furrow <ash@ashfurrow.com> Date: Fri, 21 Apr 2017 12:17:55 -0400 Hides superluous details on small screens (#2175) * Hides superluous details on small screans. * Addressed feedback from #2175.Diffstat:
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 @@ -30,10 +30,10 @@ const GettingStarted = ({ intl, me }) => { } return ( - <Column icon='asterisk' heading={intl.formatMessage(messages.heading)}> + <Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile={true}> <div style={{ position: 'relative' }}> - <ColumnLink icon='users' text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' /> - <ColumnLink icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' /> + <ColumnLink icon='users' hideOnMobile={true} text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' /> + <ColumnLink icon='globe' hideOnMobile={true} text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' /> <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' /> <ColumnLink icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' /> {followRequests} diff --git 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 = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} />; + header = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} hideOnMobile={hideHeadingOnMobile} />; } 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 @@ -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 ( - <div role='button' tabIndex='0' aria-label={type} className={`column-header ${active ? 'active' : ''}`} onClick={this.handleClick}> + <div role='button' tabIndex='0' aria-label={type} className={`column-header ${active ? 'active' : ''} ${hideOnMobile ? 'hidden-on-mobile' : ''}`} onClick={this.handleClick}> {icon} {type} </div> diff --git 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 ( - <a href={href} style={outerStyle} className='column-link' data-method={method}> + <a href={href} style={outerStyle} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`} data-method={method}> <i className={`fa fa-fw fa-${icon}`} style={iconStyle} /> {text} </a> ); } else { return ( - <Link to={to} style={outerStyle} className='column-link'> + <Link to={to} style={outerStyle} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`}> <i className={`fa fa-fw fa-${icon}`} style={iconStyle} /> {text} </Link> @@ -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 @@ -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 {