diff options
Diffstat (limited to 'packages/website/ts')
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); + } } |