Hides superluous details on small screens (#2175)

* Hides superluous details on small screans.

* Addressed feedback from #2175.
This commit is contained in:
Ash Furrow 2017-04-21 12:17:55 -04:00 committed by Eugen
parent 74c474a652
commit 78af88e1f4
5 changed files with 29 additions and 14 deletions

View File

@ -30,10 +30,10 @@ const GettingStarted = ({ intl, me }) => {
} }
return ( return (
<Column icon='asterisk' heading={intl.formatMessage(messages.heading)}> <Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile={true}>
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
<ColumnLink icon='users' text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' /> <ColumnLink icon='users' hideOnMobile={true} text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' />
<ColumnLink icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' /> <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='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />
<ColumnLink icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' /> <ColumnLink icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />
{followRequests} {followRequests}

View File

@ -35,7 +35,8 @@ const Column = React.createClass({
heading: React.PropTypes.string, heading: React.PropTypes.string,
icon: React.PropTypes.string, icon: React.PropTypes.string,
children: React.PropTypes.node, children: React.PropTypes.node,
active: React.PropTypes.bool active: React.PropTypes.bool,
hideHeadingOnMobile: React.PropTypes.bool
}, },
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
@ -55,12 +56,12 @@ const Column = React.createClass({
}, },
render () { render () {
const { heading, icon, children, active } = this.props; const { heading, icon, children, active, hideHeadingOnMobile } = this.props;
let header = ''; let header = '';
if (heading) { 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 ( return (

View File

@ -6,7 +6,8 @@ const ColumnHeader = React.createClass({
icon: React.PropTypes.string, icon: React.PropTypes.string,
type: React.PropTypes.string, type: React.PropTypes.string,
active: React.PropTypes.bool, active: React.PropTypes.bool,
onClick: React.PropTypes.func onClick: React.PropTypes.func,
hideOnMobile: React.PropTypes.bool
}, },
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
@ -16,7 +17,7 @@ const ColumnHeader = React.createClass({
}, },
render () { render () {
const { type, active } = this.props; const { type, active, hideOnMobile } = this.props;
let icon = ''; let icon = '';
@ -25,7 +26,7 @@ const ColumnHeader = React.createClass({
} }
return ( 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} {icon}
{type} {type}
</div> </div>

View File

@ -1,7 +1,6 @@
import { Link } from 'react-router'; import { Link } from 'react-router';
const outerStyle = { const outerStyle = {
display: 'block',
padding: '15px', padding: '15px',
fontSize: '16px', fontSize: '16px',
textDecoration: 'none' textDecoration: 'none'
@ -12,17 +11,17 @@ const iconStyle = {
marginRight: '5px' marginRight: '5px'
}; };
const ColumnLink = ({ icon, text, to, href, method }) => { const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => {
if (href) { if (href) {
return ( 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} /> <i className={`fa fa-fw fa-${icon}`} style={iconStyle} />
{text} {text}
</a> </a>
); );
} else { } else {
return ( 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} /> <i className={`fa fa-fw fa-${icon}`} style={iconStyle} />
{text} {text}
</Link> </Link>
@ -35,7 +34,8 @@ ColumnLink.propTypes = {
text: React.PropTypes.string.isRequired, text: React.PropTypes.string.isRequired,
to: React.PropTypes.string, to: React.PropTypes.string,
href: React.PropTypes.string, href: React.PropTypes.string,
method: React.PropTypes.string method: React.PropTypes.string,
hideOnMobile: React.PropTypes.bool
}; };
export default ColumnLink; export default ColumnLink;

View File

@ -1183,10 +1183,17 @@ a.status__content__spoiler-link {
.column-link { .column-link {
background: lighten($color1, 8%); background: lighten($color1, 8%);
color: $color5; color: $color5;
display: block;
&:hover { &:hover {
background: lighten($color1, 11%); background: lighten($color1, 11%);
} }
&.hidden-on-mobile {
@media screen and (max-width: 1024px) {
display: none;
}
}
} }
.autosuggest-textarea, .spoiler-input { .autosuggest-textarea, .spoiler-input {
@ -1382,6 +1389,12 @@ button.icon-button.active i.fa-retweet {
color: $color4; color: $color4;
text-shadow: 0 0 10px rgba($color4, 0.4); text-shadow: 0 0 10px rgba($color4, 0.4);
} }
&.hidden-on-mobile {
@media screen and (max-width: 1024px) {
display: none;
}
}
} }
.loading-indicator { .loading-indicator {