aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-11-28 04:41:43 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-11-29 02:59:54 +0800
commit92a4b09b0549575a6dd01d2f5eb37d4ec8e094b9 (patch)
tree1d05a19f7fe4aac94022398ba04c5a68c3909bfa
parent6c76731408b19616bf5eb6066463c28287ade49f (diff)
downloaddexon-0x-contracts-92a4b09b0549575a6dd01d2f5eb37d4ec8e094b9.tar
dexon-0x-contracts-92a4b09b0549575a6dd01d2f5eb37d4ec8e094b9.tar.gz
dexon-0x-contracts-92a4b09b0549575a6dd01d2f5eb37d4ec8e094b9.tar.bz2
dexon-0x-contracts-92a4b09b0549575a6dd01d2f5eb37d4ec8e094b9.tar.lz
dexon-0x-contracts-92a4b09b0549575a6dd01d2f5eb37d4ec8e094b9.tar.xz
dexon-0x-contracts-92a4b09b0549575a6dd01d2f5eb37d4ec8e094b9.tar.zst
dexon-0x-contracts-92a4b09b0549575a6dd01d2f5eb37d4ec8e094b9.zip
feat(website): fix screenshots in marketing page for small screens
-rw-r--r--packages/website/ts/pages/instant/instant.tsx2
-rw-r--r--packages/website/ts/pages/instant/screenshots.tsx40
2 files changed, 31 insertions, 11 deletions
diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx
index 56d54cd06..8c0afa298 100644
--- a/packages/website/ts/pages/instant/instant.tsx
+++ b/packages/website/ts/pages/instant/instant.tsx
@@ -54,7 +54,7 @@ export class Instant extends React.Component<InstantProps, InstantState> {
/>
<Container backgroundColor={colors.instantPrimaryBackground} />
<Introducing0xInstant />
- <Screenshots />
+ <Screenshots screenWidth={this.props.screenWidth} />
<Features screenWidth={this.props.screenWidth} />
<NeedMore screenWidth={this.props.screenWidth} />
<Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
diff --git a/packages/website/ts/pages/instant/screenshots.tsx b/packages/website/ts/pages/instant/screenshots.tsx
index 4c87f1a19..b0ea59470 100644
--- a/packages/website/ts/pages/instant/screenshots.tsx
+++ b/packages/website/ts/pages/instant/screenshots.tsx
@@ -1,15 +1,35 @@
+import * as _ from 'lodash';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
import { colors } from 'ts/style/colors';
+import { ScreenWidths } from 'ts/types';
-export const Screenshots = () => (
- <Container backgroundColor={colors.instantPrimaryBackground} className="py3 flex justify-center">
- <img className="px1" width="300px" height="420px" src="images/instant/snt_screenshot.png" />
- <img className="px1" width="300px" height="420px" src="images/instant/omg_screenshot.png" />
- <img className="px1" width="300px" height="420px" src="images/instant/kitty_screenshot.png" />
- <img className="px1" width="300px" height="420px" src="images/instant/bat_screenshot.png" />
- <img className="px1" width="300px" height="420px" src="images/instant/leroy_screenshot.png" />
- <img className="px1" width="300px" height="420px" src="images/instant/mkr_screenshot.png" />
- </Container>
-);
+export interface ScreenshotsProps {
+ screenWidth: ScreenWidths;
+}
+
+export const Screenshots = (props: ScreenshotsProps) => {
+ const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+ const images = isSmallScreen
+ ? [
+ 'images/instant/omg_screenshot.png',
+ 'images/instant/kitty_screenshot.png',
+ 'images/instant/bat_screenshot.png',
+ ]
+ : [
+ 'images/instant/snt_screenshot.png',
+ 'images/instant/omg_screenshot.png',
+ 'images/instant/kitty_screenshot.png',
+ 'images/instant/bat_screenshot.png',
+ 'images/instant/leroy_screenshot.png',
+ 'images/instant/mkr_screenshot.png',
+ ];
+ return (
+ <Container backgroundColor={colors.instantPrimaryBackground} className="py3 flex justify-center">
+ {_.map(images, image => {
+ return <img className="px1" width="300px" height="420px" src={image} />;
+ })}
+ </Container>
+ );
+};