crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix responsiveness broken in rebase

Browse Source
This commit is contained in:
Brandon Millman
2018-05-17 11:37:30 -07:00
parent 317ff81744
commit 157764c0d9
1 changed files with 33 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/website/ts/components/portal/portal.tsx
View File

@@ -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