diff options
Diffstat (limited to 'app/assets/javascripts/components')
4 files changed, 16 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 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 ( - <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 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 = <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 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 ( - <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 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 ( - <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; |