aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/documentation/docs_content_top_bar.tsx47
-rw-r--r--packages/website/ts/components/documentation/docs_logo.tsx15
-rw-r--r--packages/website/ts/components/ui/container.tsx1
-rw-r--r--packages/website/ts/containers/docs_home.ts15
-rw-r--r--packages/website/ts/pages/documentation/home.tsx78
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);
+ }
}