diff options
| -rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 46 |
1 files changed, 33 insertions, 13 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 121e07e84..e35e99642 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -180,8 +180,6 @@ export class Portal extends React.Component<PortalProps, PortalState> { this.state.tokenManagementState === TokenManagementState.Add ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED; - - const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; return ( <div style={styles.root}> <DocumentTitle title="0x Portal DApp" /> @@ -201,14 +199,11 @@ export class Portal extends React.Component<PortalProps, PortalState> { /> <div id="portal" style={styles.body}> <Switch> - <Route - path={`${WebsitePaths.Portal}/:route`} - render={this._renderMenuAndAccountManagement.bind(this)} - /> + <Route path={`${WebsitePaths.Portal}/:route`} render={this._renderOtherRoutes.bind(this)} /> <Route exact={true} path={`${WebsitePaths.Portal}/`} - render={this._renderWalletAndRelayerIndex.bind(this)} + render={this._renderMainRoute.bind(this)} /> </Switch> <BlockchainErrDialog @@ -249,11 +244,19 @@ export class Portal extends React.Component<PortalProps, PortalState> { </div> ); } - private _renderWalletAndRelayerIndex(): React.ReactNode { - return <PortalLayout left={this._renderWallet()} right={this._renderRelayerIndexSection()} />; + private _renderMainRoute(): React.ReactNode { + if (this._isSmallScreen()) { + return <SmallLayout content={this._renderRelayerIndexSection()} />; + } else { + return <LargeLayout left={this._renderWallet()} right={this._renderRelayerIndexSection()} />; + } } - private _renderMenuAndAccountManagement(routeComponentProps: RouteComponentProps<any>): React.ReactNode { - return <PortalLayout left={this._renderMenu(routeComponentProps)} right={this._renderAccountManagement()} />; + private _renderOtherRoutes(routeComponentProps: RouteComponentProps<any>): React.ReactNode { + if (this._isSmallScreen()) { + return <SmallLayout content={this._renderAccountManagement()} />; + } else { + return <LargeLayout left={this._renderMenu(routeComponentProps)} right={this._renderAccountManagement()} />; + } } private _renderMenu(routeComponentProps: RouteComponentProps<any>): React.ReactNode { return ( @@ -450,13 +453,17 @@ export class Portal extends React.Component<PortalProps, PortalState> { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); } + private _isSmallScreen(): boolean { + const result = this.props.screenWidth === ScreenWidths.Sm; + return result; + } } -interface PortalLayoutProps { +interface LargeLayoutProps { left: React.ReactNode; right: React.ReactNode; } -const PortalLayout = (props: PortalLayoutProps) => { +const LargeLayout = (props: LargeLayoutProps) => { return ( <div className="sm-flex flex-center"> <div className="flex-last px3"> @@ -467,4 +474,17 @@ const PortalLayout = (props: PortalLayoutProps) => { </div> </div> ); +}; + +interface SmallLayoutProps { + content: React.ReactNode; +} +const SmallLayout = (props: SmallLayoutProps) => { + return ( + <div className="sm-flex flex-center"> + <div className="flex-auto px3" style={styles.scrollContainer}> + {props.content} + </div> + </div> + ); }; // tslint:disable:max-file-line-count |