aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-05-16 05:49:11 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-05-19 02:35:13 +0800
commit7a6a5d75952e8a555fa7f3fc84fdcd26946eea88 (patch)
tree8f0a00df40d65697f91da25ee630c64bbabf5837 /packages/website/ts/components
parent85020c74cf8622d131b21f82a8027d437717712e (diff)
downloaddexon-sol-tools-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.tar
dexon-sol-tools-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.tar.gz
dexon-sol-tools-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.tar.bz2
dexon-sol-tools-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.tar.lz
dexon-sol-tools-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.tar.xz
dexon-sol-tools-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.tar.zst
dexon-sol-tools-7a6a5d75952e8a555fa7f3fc84fdcd26946eea88.zip
Modulate number of columns based on screenwidth
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/portal/portal.tsx2
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx21
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 {