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

1 files changed, 22 insertions, 31 deletions

diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx
index 0bc235b53..fab32a31e 100644
--- a/app/assets/javascripts/components/features/ui/index.jsx
+++ b/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' }} />