Hides superluous details on small screens (#2175)

* Hides superluous details on small screans.

* Addressed feedback from #2175.

5 files changed, 29 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;
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 2fdbde513..0d3ddccd7 100644
--- 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 {