diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-07-05 05:27:46 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-07-06 05:31:05 +0800 |
commit | 7b8db1156daec88fa691744230bb129efefdfa48 (patch) | |
tree | 33b98a95da0eda14b5364d0c79ec6e37e4c45e1d /packages/website/ts | |
parent | e0f80c5e6aea48e83108d6c6cd481cdce26c9a4a (diff) | |
download | dexon-0x-contracts-7b8db1156daec88fa691744230bb129efefdfa48.tar dexon-0x-contracts-7b8db1156daec88fa691744230bb129efefdfa48.tar.gz dexon-0x-contracts-7b8db1156daec88fa691744230bb129efefdfa48.tar.bz2 dexon-0x-contracts-7b8db1156daec88fa691744230bb129efefdfa48.tar.lz dexon-0x-contracts-7b8db1156daec88fa691744230bb129efefdfa48.tar.xz dexon-0x-contracts-7b8db1156daec88fa691744230bb129efefdfa48.tar.zst dexon-0x-contracts-7b8db1156daec88fa691744230bb129efefdfa48.zip |
Various fixes for portal on mobile and top bar layout
Diffstat (limited to 'packages/website/ts')
4 files changed, 71 insertions, 42 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 diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 778536663..dd3de7950 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -11,6 +11,7 @@ import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; +import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; @@ -45,6 +46,8 @@ export interface TopBarProps { onVersionSelected?: (semver: string) => void; sidebarHeader?: React.ReactNode; maxWidth?: number; + paddingLeft?: number; + paddingRight?: number; } interface TopBarState { @@ -67,13 +70,12 @@ const styles: Styles = { color: colors.darkestGrey, paddingTop: 6, paddingBottom: 6, - marginTop: 17, cursor: 'pointer', fontWeight: 400, }, }; -const DEFAULT_HEIGHT = 59; +const DEFAULT_HEIGHT = 68; const EXPANDED_HEIGHT = 75; export class TopBar extends React.Component<TopBarProps, TopBarState> { @@ -81,6 +83,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { displayType: TopBarDisplayType.Default, style: {}, isNightVersion: false, + paddingLeft: 20, + paddingRight: 20, }; public static heightForDisplayType(displayType: TopBarDisplayType): number { const result = displayType === TopBarDisplayType.Expanded ? EXPANDED_HEIGHT : DEFAULT_HEIGHT; @@ -102,7 +106,9 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { public render(): React.ReactNode { const isNightVersion = this.props.isNightVersion; const isExpandedDisplayType = this.props.displayType === TopBarDisplayType.Expanded; - const parentClassNames = `flex mx-auto ${isExpandedDisplayType ? 'pl3 py1' : 'max-width-4'}`; + const parentClassNames = !isExpandedDisplayType + ? 'flex mx-auto items-center max-width-4' + : 'flex mx-auto items-center'; const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT; const developerSectionMenuItems = [ <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none"> @@ -197,7 +203,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { fontSize: 25, color: isNightVersion ? 'white' : 'black', cursor: 'pointer', - paddingTop: 16, }; const activeNode = ( <div className="flex relative" style={{ color: menuIconStyle.color }}> @@ -211,15 +216,21 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { // TODO : Remove this once we ship portal v2 const shouldShowPortalV2Drawer = this._isViewingPortal() && utils.shouldShowPortalV2(); return ( - <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} className="pb1"> - <div className={parentClassNames} style={{ maxWidth: this.props.maxWidth }}> - <div className="col col-2 sm-pl1 md-pl2 lg-pl0" style={{ paddingTop: 15 }}> - <Link to={`${WebsitePaths.Home}`} className="text-decoration-none"> - <img src={logoUrl} height="30" /> - </Link> - </div> - <div className={`col col-${isExpandedDisplayType ? '8' : '9'} lg-hide md-hide`} /> - <div className={`col col-${isExpandedDisplayType ? '6' : '5'} sm-hide xs-hide`} /> + <div + style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} + className="pb1 flex items-center" + > + <Container + className={parentClassNames} + width="100%" + maxWidth={this.props.maxWidth} + paddingLeft={this.props.paddingLeft} + paddingRight={this.props.paddingRight} + > + <Link to={`${WebsitePaths.Home}`} className="text-decoration-none"> + <img src={logoUrl} height="30" /> + </Link> + <div className="flex-auto" /> {!this._isViewingPortal() && ( <div className={menuClasses}> <div className="flex justify-between"> @@ -264,7 +275,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </div> )} {this._isViewingPortal() && ( - <div className="sm-hide xs-hide col col-5" style={{ paddingTop: 8, marginRight: 36 }}> + <div className="sm-hide xs-hide"> <ProviderDisplay dispatcher={this.props.dispatcher} userAddress={this.props.userAddress} @@ -277,12 +288,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { /> </div> )} - <div className={`col ${isExpandedDisplayType ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`}> + <div className={'md-hide lg-hide'}> <div style={menuIconStyle}> <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} /> </div> </div> - </div> + </Container> {shouldShowPortalV2Drawer ? this._renderPortalV2Drawer() : this._renderDrawer()} </div> ); diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx index 2e4254cfa..e96d27c3f 100644 --- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx @@ -31,7 +31,6 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM ? { borderRadius: 4, border: `1px solid ${this.props.isNightVersion ? colors.grey : colors.greyishPink}`, - marginTop: 15, paddingLeft: 9, paddingRight: 9, minWidth: 77, diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 1e0b9ec48..1d7be5dbc 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -224,10 +224,10 @@ export class Wallet extends React.Component<WalletProps, WalletState> { popoverContent={ <SimpleMenu minWidth="150px"> <CopyAddressSimpleMenuItem userAddress={this.props.userAddress} /> - <DifferentWalletSimpleMenuItem onClick={this.props.onToggleLedgerDialog} /> + {!isMobile && <DifferentWalletSimpleMenuItem onClick={this.props.onToggleLedgerDialog} />} <SimpleMenuItem displayText="Add Tokens..." onClick={this.props.onAddToken} /> <SimpleMenuItem displayText="Remove Tokens..." onClick={this.props.onRemoveToken} /> - <GoToAccountManagementSimpleMenuItem /> + {!isMobile && <GoToAccountManagementSimpleMenuItem />} </SimpleMenu> } anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} |