Hides superluous details on small screens (#2175)
* Hides superluous details on small screans. * Addressed feedback from #2175.lolsob-rspec
parent
6a85e79583
commit
04bbf79994
|
@ -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}
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue