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

5 files changed, 90 insertions, 36 deletions

diff --git a/app/assets/javascripts/components/features/ui/components/column.jsx b/app/assets/javascripts/components/features/ui/components/column.jsx
index bb9331267..be4fa8908 100644
--- a/app/assets/javascripts/components/features/ui/components/column.jsx
+++ b/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>
diff --git a/app/assets/javascripts/components/features/ui/components/columns_area.jsx b/app/assets/javascripts/components/features/ui/components/columns_area.jsx
index 94433539b..3f88b1ea3 100644
--- a/app/assets/javascripts/components/features/ui/components/columns_area.jsx
+++ b/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>
     );
diff --git a/app/assets/javascripts/components/features/ui/components/drawer.jsx b/app/assets/javascripts/components/features/ui/components/drawer.jsx
index dfba11ad2..1fbb9333e 100644
--- a/app/assets/javascripts/components/features/ui/components/drawer.jsx
+++ b/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>
     );
diff --git a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
new file mode 100644
index 000000000..f5d985996
--- /dev/null
+++ b/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;
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' }} />