Implement new responsive, dev section header and home scaffolding

5 files changed, 103 insertions, 53 deletions

diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
index c2bbfc417..148f2f7cb 100644
--- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { DocsLogo } from 'ts/components/documentation/docs_logo';
 import { Container } from 'ts/components/ui/container';
 import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
@@ -17,17 +18,6 @@ interface DocsContentTopBarState {
     isDrawerOpen: boolean;
 }
 
-const styles: Styles = {
-    menuItem: {
-        fontSize: 14,
-        color: colors.darkestGrey,
-        paddingTop: 6,
-        paddingBottom: 6,
-        cursor: 'pointer',
-        fontWeight: 400,
-    },
-};
-
 interface MenuItemInfo {
     title: string;
     url: string;
@@ -50,11 +40,6 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
         }
     }
     public render(): React.ReactNode {
-        const menuIconStyle = {
-            fontSize: 25,
-            color: 'black',
-            cursor: 'pointer',
-        };
         const menuItemInfos: MenuItemInfo[] = [
             {
                 title: this.props.translate.get(Key.Github, Deco.Cap),
@@ -76,9 +61,9 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
             },
         ];
         return (
-            <div style={{ height: 75 }} className="pb1">
-                <Container className="flex items-center" paddingTop={30} width="100%">
-                    <div className="col col-2">
+            <Container height={75} className="pb1">
+                <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%">
+                    <div className="col col-2 sm-hide xs-hide">
                         <Link
                             to={WebsitePaths.Home}
                             style={{ color: colors.linkSectionGrey }}
@@ -90,14 +75,28 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
                             </div>
                         </Link>
                     </div>
-                    <div className="col col-10">
+                    <div className="col col-4 md-hide sm-hide xs-hide" />
+                    <div className="col col-6 md-pl4 md-ml4 sm-hide xs-hide">
                         <div className="flex items-center justify-between right" style={{ width: 300 }}>
                             {this._renderMenuItems(menuItemInfos)}
                         </div>
                     </div>
-                    <div className={'md-hide lg-hide'}>
-                        <div style={menuIconStyle}>
-                            <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} />
+                    <div className="lg-hide md-hide">
+                        <DocsLogo height={30} containerStyle={{ paddingTop: 6, paddingLeft: 18 }} />
+                    </div>
+                    <div className="md-hide lg-hide absolute" style={{ right: 18, top: 12 }}>
+                        <div
+                            style={{
+                                fontSize: 30,
+                                color: 'black',
+                                cursor: 'pointer',
+                            }}
+                        >
+                            <i
+                                className="zmdi zmdi-menu"
+                                style={{ color: colors.grey700 }}
+                                onClick={this._onMenuButtonClick.bind(this)}
+                            />
                         </div>
                     </div>
                 </Container>
@@ -110,7 +109,7 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
                     }}
                 />
                 {this._renderDrawer()}
-            </div>
+            </Container>
         );
     }
     private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode {
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index 2a539c84b..9daf84ad0 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -2,12 +2,21 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { WebsitePaths } from 'ts/types';
 
-export const DocsLogo = () => {
+export interface DocsLogoProps {
+    height: number;
+    containerStyle?: React.CSSProperties;
+}
+
+export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
     return (
-        <div style={{ paddingTop: 28 }}>
+        <div style={props.containerStyle}>
             <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
-                <img src="/images/docs_logo.svg" height="36px" />
+                <img src="/images/docs_logo.svg" height={props.height} />
             </Link>
         </div>
     );
 };
+
+DocsLogo.defaultProps = {
+    containerStyle: {},
+};
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index f2ae68b70..1e0bfd959 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -15,6 +15,7 @@ export interface ContainerProps {
     paddingRight?: StringOrNum;
     paddingLeft?: StringOrNum;
     backgroundColor?: string;
+    background?: string;
     borderRadius?: StringOrNum;
     maxWidth?: StringOrNum;
     maxHeight?: StringOrNum;
diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts
index 79bf68618..9c7b70a6f 100644
--- a/packages/website/ts/containers/docs_home.ts
+++ b/packages/website/ts/containers/docs_home.ts
@@ -1,15 +1,28 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
 import { Home as HomeComponent, HomeProps } from 'ts/pages/documentation/home';
+import { Dispatcher } from 'ts/redux/dispatcher';
 import { State } from 'ts/redux/reducer';
+import { ScreenWidths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
 
 interface ConnectedState {
     translate: Translate;
+    screenWidth: ScreenWidths;
+}
+
+interface ConnectedDispatch {
+    dispatcher: Dispatcher;
 }
 
 const mapStateToProps = (state: State, _ownProps: HomeProps): ConnectedState => ({
     translate: state.translate,
+    screenWidth: state.screenWidth,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
 });
 
-export const DocsHome: React.ComponentClass<HomeProps> = connect(mapStateToProps, undefined)(HomeComponent);
+export const DocsHome: React.ComponentClass<HomeProps> = connect(mapStateToProps, mapDispatchToProps)(HomeComponent);
diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx
index 003212279..a065efc80 100644
--- a/packages/website/ts/pages/documentation/home.tsx
+++ b/packages/website/ts/pages/documentation/home.tsx
@@ -1,53 +1,81 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar';
 import { DocsLogo } from 'ts/components/documentation/docs_logo';
+import { Container } from 'ts/components/ui/container';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { ScreenWidths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
+import { utils } from 'ts/utils/utils';
+
+const THROTTLE_TIMEOUT = 100;
 
 export interface HomeProps {
     location: Location;
     translate: Translate;
+    screenWidth: ScreenWidths;
+    dispatcher: Dispatcher;
 }
 
 export interface HomeState {}
 
 export class Home extends React.Component<HomeProps, HomeState> {
+    private readonly _throttledScreenWidthUpdate: () => void;
+    constructor(props: HomeProps) {
+        super(props);
+        this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
+    }
+    public componentDidMount(): void {
+        window.addEventListener('resize', this._throttledScreenWidthUpdate);
+        window.scrollTo(0, 0);
+    }
+    public componentWillUnmount(): void {
+        window.removeEventListener('resize', this._throttledScreenWidthUpdate);
+    }
     public render(): React.ReactNode {
+        const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
+        const mainContentPadding = isSmallScreen ? 0 : 50;
         return (
-            <div
+            <Container
                 className="flex items-center"
-                style={{
-                    width: '100%',
-                    background: 'linear-gradient(to right, #f5f5f5 0%, #f5f5f5 50%, #ffffff 50%, #ffffff 100%)',
-                }}
+                width="100%"
+                background={`linear-gradient(to right, ${colors.grey100} 0%, ${colors.grey100} 50%, ${
+                    colors.white
+                } 50%, ${colors.white} 100%)`}
             >
                 <DocumentTitle title="0x Docs Home" />
                 <div className="flex mx-auto">
-                    <div
-                        style={{
-                            width: 234,
-                            paddingLeft: 22,
-                            paddingRight: 22,
-                            backgroundColor: '#f5f5f5',
-                            height: '100vh',
-                        }}
+                    <Container
+                        className="sm-hide xs-hide"
+                        width={234}
+                        paddingLeft={22}
+                        paddingRight={22}
+                        paddingTop={2}
+                        backgroundColor={colors.grey100}
+                        height="100vh"
                     >
-                        <DocsLogo />
-                    </div>
-                    <div
-                        style={{
-                            width: 716,
-                            paddingLeft: 50,
-                            paddingRight: 50,
-                            backgroundColor: '#ffffff',
-                            height: '100vh',
-                        }}
+                        <DocsLogo height={36} containerStyle={{ paddingTop: 28 }} />
+                    </Container>
+                    <Container
+                        width={isSmallScreen ? '100vw' : 716}
+                        paddingLeft={mainContentPadding}
+                        paddingRight={mainContentPadding}
+                        backgroundColor={colors.white}
+                        height="100vh"
                     >
                         <DocsContentTopBar location={this.props.location} translate={this.props.translate} />
-                    </div>
+                        <div>
+                            <h1 style={{ color: '#333333', fontSize: 30 }}>Start building on 0x</h1>
+                        </div>
+                    </Container>
                 </div>
-            </div>
+            </Container>
         );
     }
+    private _updateScreenWidth(): void {
+        const newScreenWidth = utils.getScreenWidth();
+        this.props.dispatcher.updateScreenWidth(newScreenWidth);
+    }
 }