diff options
author | Brandon Millman <brandon@0xproject.com> | 2018-07-06 05:33:22 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-07-06 05:33:22 +0800 |
commit | 51fa8d3e24939cffc043bf97e478390df129ca27 (patch) | |
tree | 33b98a95da0eda14b5364d0c79ec6e37e4c45e1d /packages/website/ts/components/portal/portal.tsx | |
parent | e0f80c5e6aea48e83108d6c6cd481cdce26c9a4a (diff) | |
parent | 7b8db1156daec88fa691744230bb129efefdfa48 (diff) | |
download | dexon-sol-tools-51fa8d3e24939cffc043bf97e478390df129ca27.tar dexon-sol-tools-51fa8d3e24939cffc043bf97e478390df129ca27.tar.gz dexon-sol-tools-51fa8d3e24939cffc043bf97e478390df129ca27.tar.bz2 dexon-sol-tools-51fa8d3e24939cffc043bf97e478390df129ca27.tar.lz dexon-sol-tools-51fa8d3e24939cffc043bf97e478390df129ca27.tar.xz dexon-sol-tools-51fa8d3e24939cffc043bf97e478390df129ca27.tar.zst dexon-sol-tools-51fa8d3e24939cffc043bf97e478390df129ca27.zip |
Merge pull request #820 from 0xProject/bug/website/top-bar-layout
Various mobile portal fixes and top bar layout refactor
Diffstat (limited to 'packages/website/ts/components/portal/portal.tsx')
-rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 65 |
1 files changed, 42 insertions, 23 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 1adbc86cd..d31de02bc 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -91,7 +91,7 @@ interface PortalState { interface AccountManagementItem { pathName: string; - headerText: string; + headerText?: string; render: () => React.ReactNode; } @@ -106,7 +106,8 @@ const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded); const LEFT_COLUMN_WIDTH = 346; const MENU_PADDING_LEFT = 185; const LARGE_LAYOUT_MAX_WIDTH = 1200; -const LARGE_LAYOUT_MARGIN = 30; +const LARGE_LAYOUT_SIDE_PADDING = 30; +const SMALL_LAYOUT_SIDE_PADDING = 20; export class Portal extends React.Component<PortalProps, PortalState> { private _blockchain: Blockchain; @@ -243,7 +244,9 @@ export class Portal extends React.Component<PortalProps, PortalState> { position: 'fixed', zIndex: zIndex.topBar, }} - maxWidth={LARGE_LAYOUT_MAX_WIDTH} + maxWidth={!this._isSmallScreen() ? LARGE_LAYOUT_MAX_WIDTH : undefined} + paddingLeft={!this._isSmallScreen() ? LARGE_LAYOUT_SIDE_PADDING : SMALL_LAYOUT_SIDE_PADDING} + paddingRight={!this._isSmallScreen() ? LARGE_LAYOUT_SIDE_PADDING : SMALL_LAYOUT_SIDE_PADDING} /> <Container marginTop={TOP_BAR_HEIGHT} minHeight="100vh" backgroundColor={colors.lightestGrey}> <Switch> @@ -324,7 +327,11 @@ export class Portal extends React.Component<PortalProps, PortalState> { return ( <div> <Container className="flex flex-column items-center"> - {isMobile && <Container marginBottom="20px">{this._renderStartOnboarding()}</Container>} + {isMobile && ( + <Container marginTop="20px" marginBottom="20px"> + {this._renderStartOnboarding()} + </Container> + )} <Container marginBottom={marginBottom} width="100%"> <Wallet style={ @@ -402,7 +409,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { }, { pathName: `${WebsitePaths.Portal}/account`, - headerText: 'Your Account', + headerText: this._isSmallScreen() ? undefined : 'Your Account', render: this._isSmallScreen() ? this._renderWallet.bind(this) : this._renderTokenBalances.bind(this), }, { @@ -445,7 +452,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { private _renderAccountManagementItem(item: AccountManagementItem): React.ReactNode { return ( <Section - header={<TextHeader labelText={item.headerText} />} + header={!_.isUndefined(item.headerText) && <TextHeader labelText={item.headerText} />} body={<Loading isLoading={!this.props.blockchainIsLoaded} content={item.render()} />} /> ); @@ -527,15 +534,21 @@ export class Portal extends React.Component<PortalProps, PortalState> { ); } private _renderRelayerIndexSection(): React.ReactNode { - return <Section header={<TextHeader labelText="0x Relayers" />} body={this._renderRelayerIndex()} />; - } - private _renderRelayerIndex(): React.ReactNode { const isMobile = utils.isMobileWidth(this.props.screenWidth); return ( - <Container className="flex flex-column items-center"> - {isMobile && <Container marginBottom="20px">{this._renderStartOnboarding()}</Container>} - <RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} /> - </Container> + <Section + header={!isMobile && <TextHeader labelText="0x Relayers" />} + body={ + <Container className="flex flex-column items-center"> + {isMobile && ( + <Container marginTop="20px" marginBottom="20px"> + {this._renderStartOnboarding()} + </Container> + )} + <RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} /> + </Container> + } + /> ); } private _renderNotFoundMessage(): React.ReactNode { @@ -685,19 +698,19 @@ interface LargeLayoutProps { } const LargeLayout = (props: LargeLayoutProps) => { return ( - <Container className="mx-auto flex flex-center" maxWidth={LARGE_LAYOUT_MAX_WIDTH}> + <Container + className="mx-auto flex flex-center" + maxWidth={LARGE_LAYOUT_MAX_WIDTH} + paddingLeft={LARGE_LAYOUT_SIDE_PADDING} + paddingRight={LARGE_LAYOUT_SIDE_PADDING} + > <div className="flex-last"> - <Container - width={LEFT_COLUMN_WIDTH} - position="fixed" - zIndex={zIndex.aboveTopBar} - marginLeft={LARGE_LAYOUT_MARGIN} - > + <Container width={LEFT_COLUMN_WIDTH} position="fixed" zIndex={zIndex.aboveTopBar}> {props.left} </Container> </div> - <Container className="flex-auto" marginLeft={LEFT_COLUMN_WIDTH + LARGE_LAYOUT_MARGIN}> - <Container className="flex-auto" marginLeft={LARGE_LAYOUT_MARGIN} marginRight={LARGE_LAYOUT_MARGIN}> + <Container className="flex-auto" marginLeft={LEFT_COLUMN_WIDTH}> + <Container className="flex-auto" marginLeft={LARGE_LAYOUT_SIDE_PADDING}> {props.right} </Container> </Container> @@ -711,7 +724,13 @@ interface SmallLayoutProps { const SmallLayout = (props: SmallLayoutProps) => { return ( <div className="flex flex-center"> - <div className="flex-auto px3">{props.content}</div> + <Container + className="flex-auto" + paddingLeft={SMALL_LAYOUT_SIDE_PADDING} + paddingRight={SMALL_LAYOUT_SIDE_PADDING} + > + {props.content} + </Container> </div> ); }; // tslint:disable:max-file-line-count |