Responsively changing layout to single-column + nav on smaller screens

app/assets/javascripts/components/containers/mastodon.jsx

@@ -15,12 +15,15 @@ import {
   hashHistory,
   IndexRoute
 }                         from 'react-router';
+import UI                 from '../features/ui';
 import Account            from '../features/account';
 import Status             from '../features/status';
 import GettingStarted     from '../features/getting_started';
 import PublicTimeline     from '../features/public_timeline';
-import UI                 from '../features/ui';
 import AccountTimeline    from '../features/account_timeline';
+import HomeTimeline       from '../features/home_timeline';
+import MentionsTimeline   from '../features/mentions_timeline';
+import Compose            from '../features/compose';
 
 const store = configureStore();
 
@@ -77,6 +80,9 @@ const Mastodon = React.createClass({
         <Router history={hashHistory}>
           <Route path='/' component={UI}>
             <IndexRoute component={GettingStarted} />
+            <Route path='/statuses/new' component={Compose} />
+            <Route path='/statuses/home' component={HomeTimeline} />
+            <Route path='/statuses/mentions' component={MentionsTimeline} />
             <Route path='/statuses/all' component={PublicTimeline} />
             <Route path='/statuses/:statusId' component={Status} />
             <Route path='/accounts/:accountId' component={Account}>

app/assets/javascripts/components/features/compose/index.jsx

@@ -0,0 +1,28 @@
+import Drawer               from '../ui/components/drawer';
+import ComposeFormContainer from '../ui/containers/compose_form_container';
+import FollowFormContainer  from '../ui/containers/follow_form_container';
+import UploadFormContainer  from '../ui/containers/upload_form_container';
+import NavigationContainer  from '../ui/containers/navigation_container';
+import PureRenderMixin      from 'react-addons-pure-render-mixin';
+
+const Compose = React.createClass({
+
+  mixins: [PureRenderMixin],
+
+  render () {
+    return (
+      <Drawer>
+        <div style={{ flex: '1 1 auto' }}>
+          <NavigationContainer />
+          <ComposeFormContainer />
+          <UploadFormContainer />
+        </div>
+
+        <FollowFormContainer />
+      </Drawer>
+    );
+  }
+
+});
+
+export default Compose;

app/assets/javascripts/components/features/home_timeline/index.jsx

@@ -0,0 +1,19 @@
+import PureRenderMixin     from 'react-addons-pure-render-mixin';
+import StatusListContainer from '../ui/containers/status_list_container';
+import Column              from '../ui/components/column';
+
+const HomeTimeline = React.createClass({
+
+  mixins: [PureRenderMixin],
+
+  render () {
+    return (
+      <Column icon='home' heading='Home'>
+        <StatusListContainer type='home' />
+      </Column>
+    );
+  },
+
+});
+
+export default HomeTimeline;

app/assets/javascripts/components/features/mentions_timeline/index.jsx

@@ -0,0 +1,19 @@
+import PureRenderMixin     from 'react-addons-pure-render-mixin';
+import StatusListContainer from '../ui/containers/status_list_container';
+import Column              from '../ui/components/column';
+
+const MentionsTimeline = React.createClass({
+
+  mixins: [PureRenderMixin],
+
+  render () {
+    return (
+      <Column icon='at' heading='Mentions'>
+        <StatusListContainer type='mentions' />
+      </Column>
+    );
+  },
+
+});
+
+export default MentionsTimeline;

app/assets/javascripts/components/features/public_timeline/index.jsx

@@ -1,43 +1,14 @@
 import { connect }         from 'react-redux';
 import PureRenderMixin     from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes  from 'react-immutable-proptypes';
-import StatusList          from '../../components/status_list';
+import StatusListContainer from '../ui/containers/status_list_container';
 import Column              from '../ui/components/column';
-import Immutable           from 'immutable';
-import { makeGetTimeline } from '../../selectors';
 import {
-  updateTimeline,
   refreshTimeline,
-  expandTimeline
+  updateTimeline
 }                          from '../../actions/timelines';
-import { deleteStatus }    from '../../actions/statuses';
-import { replyCompose }    from '../../actions/compose';
-import {
-  favourite,
-  reblog,
-  unreblog,
-  unfavourite
-}                          from '../../actions/interactions';
-
-const makeMapStateToProps = () => {
-  const getTimeline = makeGetTimeline();
-
-  const mapStateToProps = (state) => ({
-    statuses: getTimeline(state, 'public'),
-    me: state.getIn(['timelines', 'me'])
-  });
-
-  return mapStateToProps;
-};
 
 const PublicTimeline = React.createClass({
 
-  propTypes: {
-    statuses: ImmutablePropTypes.list.isRequired,
-    me: React.PropTypes.number.isRequired,
-    dispatch: React.PropTypes.func.isRequired
-  },
-
   mixins: [PureRenderMixin],
 
   componentWillMount () {
@@ -62,44 +33,14 @@ const PublicTimeline = React.createClass({
     }
   },
 
-  handleReply (status) {
-    this.props.dispatch(replyCompose(status));
-  },
-
-  handleReblog (status) {
-    if (status.get('reblogged')) {
-      this.props.dispatch(unreblog(status));
-    } else {
-      this.props.dispatch(reblog(status));
-    }
-  },
-
-  handleFavourite (status) {
-    if (status.get('favourited')) {
-      this.props.dispatch(unfavourite(status));
-    } else {
-      this.props.dispatch(favourite(status));
-    }
-  },
-
-  handleDelete (status) {
-    this.props.dispatch(deleteStatus(status.get('id')));
-  },
-
-  handleScrollToBottom () {
-    this.props.dispatch(expandTimeline('public'));
-  },
-
   render () {
-    const { statuses, me } = this.props;
-
     return (
       <Column icon='globe' heading='Public'>
-        <StatusList statuses={statuses} me={me} onScrollToBottom={this.handleScrollToBottom} onReply={this.handleReply} onReblog={this.handleReblog} onFavourite={this.handleFavourite} onDelete={this.handleDelete} />
+        <StatusListContainer type='public' />
       </Column>
     );
   },
 
 });
 
-export default connect(makeMapStateToProps)(PublicTimeline);
+export default connect()(PublicTimeline);

app/assets/javascripts/components/features/ui/components/column.jsx

@@ -29,6 +29,15 @@ const scrollTop = (node) => {
   };
 };
 
+const style = {
+  height: '100%',
+  boxSizing: 'border-box',
+  flex: '0 0 auto',
+  background: '#282c37',
+  display: 'flex',
+  flexDirection: 'column'
+};
+
 const Column = React.createClass({
 
   propTypes: {
@@ -56,10 +65,8 @@ const Column = React.createClass({
       header = <ColumnHeader icon={this.props.icon} type={this.props.heading} onClick={this.handleHeaderClick} />;
     }
 
-    const style = { width: '330px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', marginBottom: '0', display: 'flex', flexDirection: 'column' };
-
     return (
-      <div style={style} onWheel={this.handleWheel}>
+      <div className='column' style={style} onWheel={this.handleWheel}>
         {header}
         {this.props.children}
       </div>

app/assets/javascripts/components/features/ui/components/columns_area.jsx

@@ -1,12 +1,20 @@
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
+const style = {
+  display: 'flex',
+  flex: '1 1 auto',
+  flexDirection: 'row',
+  justifyContent: 'flex-start',
+  overflowX: 'auto'
+};
+
 const ColumnsArea = React.createClass({
 
   mixins: [PureRenderMixin],
 
   render () {
     return (
-      <div style={{ display: 'flex', flexDirection: 'row', flex: '1', justifyContent: 'flex-start', marginRight: '10px', marginBottom: '10px', overflowX: 'auto' }}>
+      <div className='columns-area' style={style}>
         {this.props.children}
       </div>
     );

app/assets/javascripts/components/features/ui/components/drawer.jsx

@@ -1,12 +1,22 @@
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
+const style = {
+  height: '100%',
+  flex: '0 0 auto',
+  boxSizing: 'border-box',
+  background: '#454b5e',
+  padding: '0',
+  display: 'flex',
+  flexDirection: 'column'
+};
+
 const Drawer = React.createClass({
 
   mixins: [PureRenderMixin],
 
   render () {
     return (
-      <div style={{ width: '280px', flex: '0 0 auto', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '0', display: 'flex', flexDirection: 'column' }}>
+      <div className='drawer' style={style}>
         {this.props.children}
       </div>
     );

app/assets/javascripts/components/features/ui/components/tabs_bar.jsx

@@ -0,0 +1,38 @@
+import { Link } from 'react-router';
+
+const outerStyle = {
+  background: '#373b4a',
+  margin: '10px',
+  flex: '0 0 auto',
+  marginBottom: '0',
+  display: 'flex'
+};
+
+const tabStyle = {
+  display: 'block',
+  flex: '1 1 auto',
+  padding: '10px',
+  color: '#fff',
+  textDecoration: 'none',
+  fontSize: '12px',
+  fontWeight: '500',
+  borderBottom: '2px solid #373b4a'
+};
+
+const tabActiveStyle = {
+  borderBottom: '2px solid #2b90d9',
+  color: '#2b90d9'
+};
+
+const TabsBar = () => {
+  return (
+    <div style={outerStyle}>
+      <Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/new'><i className='fa fa-fw fa-pencil' /> Compose</Link>
+      <Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/home'><i className='fa fa-fw fa-home' /> Home</Link>
+      <Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/mentions'><i className='fa fa-fw fa-at' /> Mentions</Link>
+      <Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/all'><i className='fa fa-fw fa-globe' /> Public</Link>
+    </div>
+  );
+};
+
+export default TabsBar;

app/assets/javascripts/components/features/ui/index.jsx

@@ -1,47 +1,38 @@
 import ColumnsArea            from './components/columns_area';
-import Column                 from './components/column';
-import Drawer                 from './components/drawer';
-import ComposeFormContainer   from './containers/compose_form_container';
-import FollowFormContainer    from './containers/follow_form_container';
-import UploadFormContainer    from './containers/upload_form_container';
-import StatusListContainer    from './containers/status_list_container';
 import NotificationsContainer from './containers/notifications_container';
-import NavigationContainer    from './containers/navigation_container';
 import PureRenderMixin        from 'react-addons-pure-render-mixin';
 import LoadingBarContainer    from './containers/loading_bar_container';
+import HomeTimeline           from '../home_timeline';
+import MentionsTimeline       from '../mentions_timeline';
+import Compose                from '../compose';
+import MediaQuery             from 'react-responsive';
+import TabsBar                from './components/tabs_bar';
 
 const UI = React.createClass({
 
-  propTypes: {
-    router: React.PropTypes.object
-  },
-
   mixins: [PureRenderMixin],
 
   render () {
+    const layoutBreakpoint = 1024;
+
     return (
-      <div style={{ flex: '0 0 auto', display: 'flex', width: '100%', height: '100%', background: '#1a1c23' }}>
-        <Drawer>
-          <div style={{ flex: '1 1 auto' }}>
-            <NavigationContainer />
-            <ComposeFormContainer />
-            <UploadFormContainer />
-          </div>
-
-          <FollowFormContainer />
-        </Drawer>
-
-        <ColumnsArea>
-          <Column icon='home' heading='Home'>
-            <StatusListContainer type='home' />
-          </Column>
-
-          <Column icon='at' heading='Mentions'>
-            <StatusListContainer type='mentions' />
-          </Column>
+      <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: '#1a1c23' }}>
+        <MediaQuery maxWidth={layoutBreakpoint}>
+          <TabsBar />
+        </MediaQuery>
 
+        <MediaQuery maxWidth={layoutBreakpoint} component={ColumnsArea}>
           {this.props.children}
-        </ColumnsArea>
+        </MediaQuery>
+
+        <MediaQuery minWidth={layoutBreakpoint}>
+          <ColumnsArea>
+            <Compose />
+            <HomeTimeline />
+            <MentionsTimeline />
+            {this.props.children}
+          </ColumnsArea>
+        </MediaQuery>
 
         <NotificationsContainer />
         <LoadingBarContainer style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} />

app/assets/stylesheets/components.scss

@@ -227,3 +227,31 @@
     margin-bottom: 20px;
   }
 }
+
+.columns-area {
+  margin: 10px;
+  margin-left: 0;
+}
+
+.column {
+  width: 330px;
+}
+
+.drawer {
+  width: 280px;
+}
+
+.column, .drawer {
+  margin-left: 10px;
+}
+
+@media screen and (max-width: 1024px) {
+  .column, .drawer {
+    width: 100%;
+    margin: 0;
+  }
+
+  .columns-area {
+    margin: 10px;
+  }
+}

package.json

@@ -38,5 +38,8 @@
     "redux-thunk": "^2.1.0",
     "reselect": "^2.5.4",
     "sinon": "^1.17.6"
+  },
+  "dependencies": {
+    "react-responsive": "^1.1.5"
   }
 }

yarn.lock

@@ -1541,6 +1541,10 @@ css-loader@0.25.0:
     postcss-modules-values "^1.1.0"
     source-list-map "^0.1.4"
 
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+
 css-select@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@@ -2359,6 +2363,10 @@ https-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.0.tgz#b3ffdfe734b2a3d4a9efd58e8654c91fce86eafd"
 
+hyphenate-style-name@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.1.tgz#bc49b9446e02b4570641afdd29c1ce7609d1b9cc"
+
 iconv-lite@^0.4.13, iconv-lite@~0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
@@ -2928,6 +2936,12 @@ mantra-core@^1.6.1:
     react-komposer "^1.9.0"
     react-simple-di "^1.2.0"
 
+matchmedia@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/matchmedia/-/matchmedia-0.1.2.tgz#cfd47f2bf68fbc7f5ea1bd3a3cf1715ecba3c1bd"
+  dependencies:
+    css-mediaquery "^0.1.2"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.14"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"
@@ -3823,6 +3837,14 @@ react-redux@^5.0.0-beta.3:
     lodash-es "^4.2.0"
     loose-envify "^1.1.0"
 
+react-responsive:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-1.1.5.tgz#a7019a28817dcb601ef31d10d72f798a0d710a17"
+  dependencies:
+    hyphenate-style-name "^1.0.0"
+    matchmedia "^0.1.2"
+    object-assign "^4.0.1"
+
 react-router@^2.8.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-2.8.1.tgz#73e9491f6ceb316d0f779829081863e378ee4ed7"