Hides superluous details on small screens (mastodon#2175)

* Hides superluous details on small screans. * Addressed feedback from mastodon#2175.
MrGeneration · Apr 21, 2017 · 78af88e · 78af88e
1 parent 74c474a
commit 78af88e
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 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 {