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

Various fixes for portal on mobile and top bar layout

Browse Source
This commit is contained in:
Brandon Millman
2018-07-04 14:27:46 -07:00
parent e0f80c5e6a
commit 7b8db1156d
4 changed files with 71 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

43
packages/website/ts/components/top_bar/top_bar.tsx
View File

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

1
packages/website/ts/components/top_bar/top_bar_menu_item.tsx
View File

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

4
packages/website/ts/components/wallet/wallet.tsx
View File

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