diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-18 18:35:07 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-18 18:35:07 +0800 |
commit | cdd650d0eb83153a992922c6ffff35b494f299d3 (patch) | |
tree | fc12135e69ae74403a26408d2d7625e8a3fe334e /packages/website/ts/components/relayer_index/relayer_index.tsx | |
parent | c333d093b585fa0250a6973f2d396eb3cf227334 (diff) | |
parent | bd8ba14bf46cb901e14f0ee718ac01cdbc833e86 (diff) | |
download | dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.gz dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.bz2 dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.lz dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.xz dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.zst dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.zip |
merge development
Diffstat (limited to 'packages/website/ts/components/relayer_index/relayer_index.tsx')
-rw-r--r-- | packages/website/ts/components/relayer_index/relayer_index.tsx | 23 |
1 files changed, 19 insertions, 4 deletions
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 91dbeb27a..e88c20d7e 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -3,14 +3,20 @@ import CircularProgress from 'material-ui/CircularProgress'; import { GridList } from 'material-ui/GridList'; import * as React from 'react'; -import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; +import { RelayerGridTile, RelayerGridTileStyle } from 'ts/components/relayer_index/relayer_grid_tile'; import { Retry } from 'ts/components/ui/retry'; import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; +export enum RelayerIndexCellStyle { + Expanded = 0, + Minimized, +} + export interface RelayerIndexProps { networkId: number; screenWidth: ScreenWidths; + cellStyle: RelayerIndexCellStyle; } interface RelayerIndexState { @@ -18,7 +24,8 @@ interface RelayerIndexState { error?: Error; } -const CELL_HEIGHT = 290; +const CELL_HEIGHT_EXPANDED = 290; +const CELL_HEIGHT_MINIMIZED = 225; const NUMBER_OF_COLUMNS_LARGE = 3; const NUMBER_OF_COLUMNS_MEDIUM = 2; const NUMBER_OF_COLUMNS_SMALL = 2; @@ -61,15 +68,23 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde numberOfRelayers, this._numberOfColumnsForScreenWidth(this.props.screenWidth), ); + const isExpanded = this.props.cellStyle === RelayerIndexCellStyle.Expanded; + const cellHeight = isExpanded ? CELL_HEIGHT_EXPANDED : CELL_HEIGHT_MINIMIZED; + const gridTileStyle = isExpanded ? RelayerGridTileStyle.Expanded : RelayerGridTileStyle.Minimized; return ( <GridList - cellHeight={CELL_HEIGHT} + cellHeight={cellHeight} cols={numberOfColumns} padding={GRID_PADDING} style={{ marginTop: -10, marginBottom: 0 }} > {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => ( - <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} /> + <RelayerGridTile + key={index} + relayerInfo={relayerInfo} + networkId={this.props.networkId} + style={gridTileStyle} + /> ))} </GridList> ); |