From 888086010579566aca57e63daa5bacc9c6802830 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 14 Jun 2018 13:51:02 -0700 Subject: Set max-width for LargeLayout --- packages/website/ts/components/portal/portal.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 48486939b..d51e40216 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -100,6 +100,7 @@ const THROTTLE_TIMEOUT = 100; 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 styles: Styles = { root: { @@ -660,11 +661,11 @@ interface LargeLayoutProps { } const LargeLayout = (props: LargeLayoutProps) => { return ( -
-
+
+
{props.left}
-
+
{props.right}
@@ -676,7 +677,7 @@ interface SmallLayoutProps { } const SmallLayout = (props: SmallLayoutProps) => { return ( -
+
{props.content}
-- cgit From 55cbcd728d9b0611e604a389443f94de58726d92 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 14 Jun 2018 14:12:05 -0700 Subject: Add max width to top bar --- packages/website/ts/components/portal/portal.tsx | 1 + packages/website/ts/components/top_bar/top_bar.tsx | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index d51e40216..ee8c90c2f 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -255,6 +255,7 @@ export class Portal extends React.Component { translate={this.props.translate} displayType={TopBarDisplayType.Expanded} style={{ backgroundColor: colors.lightestGrey }} + maxWidth={LARGE_LAYOUT_MAX_WIDTH} />
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 05cc6e3ad..1a69827a4 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -45,6 +45,7 @@ export interface TopBarProps { isNightVersion?: boolean; onVersionSelected?: (semver: string) => void; sidebarHeader?: React.ReactNode; + maxWidth?: number; } interface TopBarState { @@ -213,7 +214,7 @@ export class TopBar extends React.Component { const shouldShowPortalV2Drawer = this._isViewingPortal() && utils.shouldShowPortalV2(); return (
-
+
-- cgit From 2ad411ea290697fc33786f9a0daa32116d51bd09 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 14 Jun 2018 15:04:31 -0700 Subject: Update RelayerGridTile render logic to incorportate colors and logos --- .../components/relayer_index/relayer_grid_tile.tsx | 32 ++++++++++++++-------- .../ts/components/relayer_index/relayer_index.tsx | 4 +-- 2 files changed, 22 insertions(+), 14 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index fbb634164..0b0e75312 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -26,7 +26,6 @@ const styles: Styles = { header: { height: '50%', width: '100%', - objectFit: 'cover', borderBottomRightRadius: 4, borderBottomLeftRadius: 4, borderTopRightRadius: 4, @@ -58,21 +57,26 @@ const styles: Styles = { }; const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png'; +const FALLBACK_PRIMARY_COLOR = colors.grey200; const NO_CONTENT_MESSAGE = '--'; +const RELAYER_ICON_HEIGHT = '110px'; export const RelayerGridTile: React.StatelessComponent = (props: RelayerGridTileProps) => { const link = props.relayerInfo.appUrl || props.relayerInfo.url; const topTokens = props.relayerInfo.topTokens; const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume; + const headerImageUrl = props.relayerInfo.logoImgUrl; + const headerBackgroundColor = + !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor) + ? props.relayerInfo.primaryColor + : FALLBACK_PRIMARY_COLOR; return (
- +
+ +
@@ -112,7 +116,6 @@ const NoContent = () =>
{NO_CONTENT_MESSAGE}
; interface ImgWithFallbackProps { src?: string; fallbackSrc: string; - style: React.CSSProperties; } interface ImgWithFallbackState { imageLoadFailed: boolean; @@ -125,11 +128,16 @@ class ImgWithFallback extends React.Component; - } else { - return ; - } + return ( +
+ {this._renderImg()} +
+ ); + } + private _renderImg(): React.ReactNode { + const src = + this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src; + return ; } private _onError(): void { this.setState({ diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 3c5761bcd..8dd4f0fbf 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -37,8 +37,8 @@ const styles: Styles = { }; const CELL_HEIGHT = 290; -const NUMBER_OF_COLUMNS_LARGE = 4; -const NUMBER_OF_COLUMNS_MEDIUM = 3; +const NUMBER_OF_COLUMNS_LARGE = 3; +const NUMBER_OF_COLUMNS_MEDIUM = 2; const NUMBER_OF_COLUMNS_SMALL = 1; const GRID_PADDING = 20; -- cgit From da46eefe2eea9507ae12ed678b15047f1c74366f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 18 Jun 2018 12:09:31 -0700 Subject: Create a shared Image component --- .../components/relayer_index/relayer_grid_tile.tsx | 46 ++++++---------------- packages/website/ts/components/ui/image.tsx | 37 +++++++++++++++++ 2 files changed, 48 insertions(+), 35 deletions(-) create mode 100644 packages/website/ts/components/ui/image.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 0b0e75312..98d6dc0b3 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -5,6 +5,7 @@ import * as React from 'react'; import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens'; import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; import { WebsiteBackendRelayerInfo } from 'ts/types'; @@ -74,8 +75,16 @@ export const RelayerGridTile: React.StatelessComponent = (
-
- +
+
@@ -112,36 +121,3 @@ const Section = (props: SectionProps) => { }; const NoContent = () =>
{NO_CONTENT_MESSAGE}
; - -interface ImgWithFallbackProps { - src?: string; - fallbackSrc: string; -} -interface ImgWithFallbackState { - imageLoadFailed: boolean; -} -class ImgWithFallback extends React.Component { - constructor(props: ImgWithFallbackProps) { - super(props); - this.state = { - imageLoadFailed: false, - }; - } - public render(): React.ReactNode { - return ( -
- {this._renderImg()} -
- ); - } - private _renderImg(): React.ReactNode { - const src = - this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src; - return ; - } - private _onError(): void { - this.setState({ - imageLoadFailed: true, - }); - } -} diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx new file mode 100644 index 000000000..0958d2e5e --- /dev/null +++ b/packages/website/ts/components/ui/image.tsx @@ -0,0 +1,37 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +export interface ImageProps { + className?: string; + src?: string; + fallbackSrc?: string; + height?: string; +} +interface ImageState { + imageLoadFailed: boolean; +} +export class Image extends React.Component { + constructor(props: ImageProps) { + super(props); + this.state = { + imageLoadFailed: false, + }; + } + public render(): React.ReactNode { + const src = + this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src; + return ( + + ); + } + private _onError(): void { + this.setState({ + imageLoadFailed: true, + }); + } +} -- cgit