diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-05-16 05:49:11 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-05-19 02:35:13 +0800 |
commit | 7a6a5d75952e8a555fa7f3fc84fdcd26946eea88 (patch) | |
tree | 8f0a00df40d65697f91da25ee630c64bbabf5837 /packages/website | |
parent | 85020c74cf8622d131b21f82a8027d437717712e (diff) | |
download | dexon-0x-contracts-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.tar dexon-0x-contracts-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.tar.gz dexon-0x-contracts-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.tar.bz2 dexon-0x-contracts-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.tar.lz dexon-0x-contracts-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.tar.xz dexon-0x-contracts-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.tar.zst dexon-0x-contracts-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.zip |
Modulate number of columns based on screenwidth
Diffstat (limited to 'packages/website')
-rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/components/relayer_index/relayer_index.tsx | 21 |
2 files changed, 19 insertions, 4 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index d9d50c5ab..9b1fe69a3 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -383,7 +383,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { return ( <Section header={<TextHeader labelText="Explore 0x Relayers" />} - body={<RelayerIndex networkId={this.props.networkId} />} + body={<RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />} /> ); } diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index b327c9817..9e028fc06 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -6,11 +6,12 @@ import { GridList } from 'material-ui/GridList'; import * as React from 'react'; import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; -import { WebsiteBackendRelayerInfo } from 'ts/types'; +import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; export interface RelayerIndexProps { networkId: number; + screenWidth: ScreenWidths; } interface RelayerIndexState { @@ -35,7 +36,9 @@ const styles: Styles = { }; const CELL_HEIGHT = 290; -const NUMBER_OF_COLUMNS = 4; +const NUMBER_OF_COLUMNS_LARGE = 4; +const NUMBER_OF_COLUMNS_MEDIUM = 3; +const NUMBER_OF_COLUMNS_SMALL = 2; const GRID_PADDING = 20; export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerIndexState> { @@ -69,11 +72,12 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde </div> ); } else { + const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth); return ( <div style={styles.root}> <GridList cellHeight={CELL_HEIGHT} - cols={NUMBER_OF_COLUMNS} + cols={numberOfColumns} padding={GRID_PADDING} style={styles.gridList} > @@ -107,6 +111,17 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde } } } + private _numberOfColumnsForScreenWidth(screenWidth: ScreenWidths): number { + switch (screenWidth) { + case ScreenWidths.Md: + return NUMBER_OF_COLUMNS_MEDIUM; + case ScreenWidths.Sm: + return NUMBER_OF_COLUMNS_SMALL; + case ScreenWidths.Lg: + default: + return NUMBER_OF_COLUMNS_LARGE; + } + } } interface RetryProps { |