From 3d76d83a39ca61641f3efd7ed5cc6f7a214835ca Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 1 May 2018 10:17:27 -0700
Subject: Skeleton for jobs page and initial implementation

---
 packages/website/ts/pages/jobs/jobs.tsx | 44 +++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 packages/website/ts/pages/jobs/jobs.tsx

(limited to 'packages/website/ts/pages/jobs/jobs.tsx')

diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
new file mode 100644
index 000000000..e49b40a2f
--- /dev/null
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -0,0 +1,44 @@
+import { colors } from '@0xproject/react-shared';
+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 { Join0x } from 'ts/pages/jobs/join_0x';
+import { Mission } from 'ts/pages/jobs/mission';
+import { OpenPositions } from 'ts/pages/jobs/open_positions';
+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 { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+export interface JobsProps {
+    location: Location;
+    translate: Translate;
+    dispatcher: Dispatcher;
+}
+
+export const Jobs: React.StatelessComponent<JobsProps> = props => {
+    return (
+        <div>
+            <DocumentTitle title="Jobs" />
+            <TopBar
+                blockchainIsLoaded={false}
+                location={props.location}
+                style={{ backgroundColor: colors.white, position: 'relative' }}
+                translate={props.translate}
+            />
+            <Join0x />
+            <Mission />
+            <PhotoRail />
+            <Values />
+            <Benefits />
+            <Teams />
+            <OpenPositions />
+            <Footer translate={props.translate} dispatcher={props.dispatcher} />
+        </div>
+    );
+};
-- 
cgit v1.2.3


From 0c2f002a7d854026f1710ab92255f73e17597e2d Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 8 Jun 2018 11:29:56 -0700
Subject: Add scroll to top for jobs page

---
 packages/website/ts/pages/jobs/jobs.tsx | 49 +++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 21 deletions(-)

(limited to 'packages/website/ts/pages/jobs/jobs.tsx')

diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index e49b40a2f..c7c667da1 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -21,24 +21,31 @@ export interface JobsProps {
     dispatcher: Dispatcher;
 }
 
-export const Jobs: React.StatelessComponent<JobsProps> = props => {
-    return (
-        <div>
-            <DocumentTitle title="Jobs" />
-            <TopBar
-                blockchainIsLoaded={false}
-                location={props.location}
-                style={{ backgroundColor: colors.white, position: 'relative' }}
-                translate={props.translate}
-            />
-            <Join0x />
-            <Mission />
-            <PhotoRail />
-            <Values />
-            <Benefits />
-            <Teams />
-            <OpenPositions />
-            <Footer translate={props.translate} dispatcher={props.dispatcher} />
-        </div>
-    );
-};
+export interface JobsState {}
+
+export class Jobs extends React.Component<JobsProps, JobsState> {
+    public componentDidMount(): void {
+        window.scrollTo(0, 0);
+    }
+    public render(): React.ReactNode {
+        return (
+            <div>
+                <DocumentTitle title="Jobs" />
+                <TopBar
+                    blockchainIsLoaded={false}
+                    location={this.props.location}
+                    style={{ backgroundColor: colors.white, position: 'relative' }}
+                    translate={this.props.translate}
+                />
+                <Join0x />
+                <Mission />
+                <PhotoRail />
+                <Values />
+                <Benefits />
+                <Teams />
+                <OpenPositions />
+                <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
+            </div>
+        );
+    }
+}
-- 
cgit v1.2.3


From 474b93a22f9545fe9bcabe5a80e6a057e66ab286 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 8 Jun 2018 13:27:41 -0700
Subject: Add link to open positions section

---
 packages/website/ts/pages/jobs/jobs.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/pages/jobs/jobs.tsx')

diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index c7c667da1..466926af0 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, utils as sharedUtils } from '@0xproject/react-shared';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 
@@ -23,6 +23,8 @@ export interface JobsProps {
 
 export interface JobsState {}
 
+const OPEN_POSITIONS_HASH = 'positions';
+
 export class Jobs extends React.Component<JobsProps, JobsState> {
     public componentDidMount(): void {
         window.scrollTo(0, 0);
@@ -37,15 +39,18 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                     style={{ backgroundColor: colors.white, position: 'relative' }}
                     translate={this.props.translate}
                 />
-                <Join0x />
+                <Join0x onCallToActionClick={this._onJoin0xCallToActionClick.bind(this)} />
                 <Mission />
                 <PhotoRail />
                 <Values />
                 <Benefits />
                 <Teams />
-                <OpenPositions />
+                <OpenPositions hash={OPEN_POSITIONS_HASH} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
         );
     }
+    private _onJoin0xCallToActionClick(): void {
+        sharedUtils.setUrlHash(OPEN_POSITIONS_HASH);
+    }
 }
-- 
cgit v1.2.3


From 087aaa2f948391da70a4d5b53b8e7e301288ab5f Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 8 Jun 2018 15:27:11 -0700
Subject: Polish mission section and photo section

---
 packages/website/ts/pages/jobs/jobs.tsx | 34 +++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/pages/jobs/jobs.tsx')

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;
+    }
 }
-- 
cgit v1.2.3


From 3c073bc360f88129bd59e7e3d0d7fbcf69828da4 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 10 Jun 2018 20:45:18 -0700
Subject: Benefits section

---
 packages/website/ts/pages/jobs/jobs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/jobs/jobs.tsx')

diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 70a11c8a4..9cce594fc 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -61,7 +61,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                     <PhotoRail images={PHOTO_RAIL_IMAGES} />
                 )}
                 <Values />
-                <Benefits />
+                <Benefits screenWidth={this.props.screenWidth} />
                 <Teams />
                 <OpenPositions hash={OPEN_POSITIONS_HASH} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
-- 
cgit v1.2.3


From bc36c0faed11d61164027efad5b2ad9d07f0573f Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 10 Jun 2018 21:29:15 -0700
Subject: Teams section

---
 packages/website/ts/pages/jobs/jobs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/jobs/jobs.tsx')

diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 9cce594fc..f3b455379 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -62,7 +62,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                 )}
                 <Values />
                 <Benefits screenWidth={this.props.screenWidth} />
-                <Teams />
+                <Teams screenWidth={this.props.screenWidth} />
                 <OpenPositions hash={OPEN_POSITIONS_HASH} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
-- 
cgit v1.2.3


From 7080f0c35a3e5c84fa2907c6feb0610c699c2823 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 10:38:41 -0700
Subject: Implement small open positions

---
 packages/website/ts/pages/jobs/jobs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/jobs/jobs.tsx')

diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index f3b455379..9fd305972 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -63,7 +63,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                 <Values />
                 <Benefits screenWidth={this.props.screenWidth} />
                 <Teams screenWidth={this.props.screenWidth} />
-                <OpenPositions hash={OPEN_POSITIONS_HASH} />
+                <OpenPositions hash={OPEN_POSITIONS_HASH} screenWidth={this.props.screenWidth} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
         );
-- 
cgit v1.2.3


From f1496656607bc2b382b8f378652a2e334f4a5908 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 13:40:15 -0700
Subject: Fix lint errors

---
 packages/website/ts/pages/jobs/jobs.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages/website/ts/pages/jobs/jobs.tsx')

diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 9fd305972..c23b4a976 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -15,7 +15,6 @@ 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';
 
-- 
cgit v1.2.3


From 155e3d225d3255d6728e1c986de46416f5685e7f Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 15:03:16 -0700
Subject: Remove FloatingImage

---
 packages/website/ts/pages/jobs/jobs.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/pages/jobs/jobs.tsx')

diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index c23b4a976..314669ee9 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -5,8 +5,8 @@ import * as DocumentTitle from 'react-document-title';
 
 import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
+import { FilledImage } from 'ts/components/ui/filled_image';
 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';
@@ -55,7 +55,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                 <Join0x onCallToActionClick={this._onJoin0xCallToActionClick.bind(this)} />
                 <Mission screenWidth={this.props.screenWidth} />
                 {this._isSmallScreen() ? (
-                    <FloatingImage src={_.head(PHOTO_RAIL_IMAGES)} />
+                    <FilledImage src={_.head(PHOTO_RAIL_IMAGES)} />
                 ) : (
                     <PhotoRail images={PHOTO_RAIL_IMAGES} />
                 )}
-- 
cgit v1.2.3