cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/components/features/getting_started/index.jsx
View File

@ -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}

7
app/assets/javascripts/components/features/ui/components/column.jsx
View File

@ -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 (

7
app/assets/javascripts/components/features/ui/components/column_header.jsx
View File

@ -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>

10
app/assets/javascripts/components/features/ui/components/column_link.jsx
View File

@ -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;

13
app/assets/stylesheets/components.scss
View File

@ -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 {