1 files changed, 30 insertions, 4 deletions

diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 466926af0..70a11c8a4 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -1,10 +1,12 @@
 import { colors, utils as sharedUtils } from '@0xproject/react-shared';
+import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 
 import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Benefits } from 'ts/pages/jobs/benefits';
+import { FloatingImage } from 'ts/pages/jobs/floating_image';
 import { Join0x } from 'ts/pages/jobs/join_0x';
 import { Mission } from 'ts/pages/jobs/mission';
 import { OpenPositions } from 'ts/pages/jobs/open_positions';
@@ -12,21 +14,33 @@ import { PhotoRail } from 'ts/pages/jobs/photo_rail';
 import { Teams } from 'ts/pages/jobs/teams';
 import { Values } from 'ts/pages/jobs/values';
 import { Dispatcher } from 'ts/redux/dispatcher';
+import { ScreenWidths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
+import { utils } from 'ts/utils/utils';
+
+const OPEN_POSITIONS_HASH = 'positions';
+const THROTTLE_TIMEOUT = 100;
+const PHOTO_RAIL_IMAGES = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png'];
 
 export interface JobsProps {
     location: Location;
     translate: Translate;
     dispatcher: Dispatcher;
+    screenWidth: ScreenWidths;
 }
 
 export interface JobsState {}
 
-const OPEN_POSITIONS_HASH = 'positions';
-
 export class Jobs extends React.Component<JobsProps, JobsState> {
+    // TODO: consolidate this small screen scaffolding into one place (its being used in portal and docs as well)
+    private _throttledScreenWidthUpdate: () => void;
+    public constructor(props: JobsProps) {
+        super(props);
+        this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
+    }
     public componentDidMount(): void {
+        window.addEventListener('resize', this._throttledScreenWidthUpdate);
         window.scrollTo(0, 0);
     }
     public render(): React.ReactNode {
@@ -40,8 +54,12 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                     translate={this.props.translate}
                 />
                 <Join0x onCallToActionClick={this._onJoin0xCallToActionClick.bind(this)} />
-                <Mission />
-                <PhotoRail />
+                <Mission screenWidth={this.props.screenWidth} />
+                {this._isSmallScreen() ? (
+                    <FloatingImage src={_.head(PHOTO_RAIL_IMAGES)} />
+                ) : (
+                    <PhotoRail images={PHOTO_RAIL_IMAGES} />
+                )}
                 <Values />
                 <Benefits />
                 <Teams />
@@ -53,4 +71,12 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
     private _onJoin0xCallToActionClick(): void {
         sharedUtils.setUrlHash(OPEN_POSITIONS_HASH);
     }
+    private _updateScreenWidth(): void {
+        const newScreenWidth = utils.getScreenWidth();
+        this.props.dispatcher.updateScreenWidth(newScreenWidth);
+    }
+    private _isSmallScreen(): boolean {
+        const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
+        return isSmallScreen;
+    }
 }