diff options
Diffstat (limited to 'app/assets/javascripts/components/features/ui/index.jsx')
-rw-r--r-- | app/assets/javascripts/components/features/ui/index.jsx | 53 |
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' }} /> |