aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/containers/jobs.ts3
-rw-r--r--packages/website/ts/pages/jobs/floating_image.tsx8
-rw-r--r--packages/website/ts/pages/jobs/jobs.tsx34
-rw-r--r--packages/website/ts/pages/jobs/join_0x.tsx2
-rw-r--r--packages/website/ts/pages/jobs/mission.tsx73
-rw-r--r--packages/website/ts/pages/jobs/photo_rail.tsx14
-rw-r--r--packages/website/ts/style/colors.ts1
7 files changed, 95 insertions, 40 deletions
diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts
index 0f57c431d..63ef59221 100644
--- a/packages/website/ts/containers/jobs.ts
+++ b/packages/website/ts/containers/jobs.ts
@@ -5,10 +5,12 @@ import { Dispatch } from 'redux';
import { Jobs as JobsComponent, JobsProps } from 'ts/pages/jobs/jobs';
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
+import { ScreenWidths } from 'ts/types';
import { Translate } from 'ts/utils/translate';
interface ConnectedState {
translate: Translate;
+ screenWidth: ScreenWidths;
}
interface ConnectedDispatch {
@@ -17,6 +19,7 @@ interface ConnectedDispatch {
const mapStateToProps = (state: State, ownProps: JobsProps): ConnectedState => ({
translate: state.translate,
+ screenWidth: state.screenWidth,
});
const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
diff --git a/packages/website/ts/pages/jobs/floating_image.tsx b/packages/website/ts/pages/jobs/floating_image.tsx
new file mode 100644
index 000000000..4719a9596
--- /dev/null
+++ b/packages/website/ts/pages/jobs/floating_image.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export interface FloatingImageProps {
+ src: string;
+}
+export const FloatingImage = (props: FloatingImageProps) => {
+ return <img src={props.src} style={{ width: '100%' }} />;
+};
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;
+ }
}
diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx
index fb811cbc4..e7fdf3ce1 100644
--- a/packages/website/ts/pages/jobs/join_0x.tsx
+++ b/packages/website/ts/pages/jobs/join_0x.tsx
@@ -8,7 +8,7 @@ export interface Join0xProps {
}
export const Join0x = (props: Join0xProps) => (
- <div className="clearfix center py4" style={{ backgroundColor: colors.white, color: colors.black }}>
+ <div className="clearfix center lg-py4 md-py4" style={{ backgroundColor: colors.white, color: colors.black }}>
<div className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center' }}>
<div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
Join 0x
diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx
index a1d0dc927..a3584e5f6 100644
--- a/packages/website/ts/pages/jobs/mission.tsx
+++ b/packages/website/ts/pages/jobs/mission.tsx
@@ -1,43 +1,54 @@
-import { colors } from '@0xproject/react-shared';
-
import * as React from 'react';
-export const Mission = () => {
- const isSmallScreen = false;
- return (
- <div className="container lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.grey100 }}>
- <div className="mx-auto clearfix">
- {!isSmallScreen && <WorldImage />}
+import { FilledImage } from 'ts/pages/jobs/filled_image';
+import { colors } from 'ts/style/colors';
+import { ScreenWidths } from 'ts/types';
+
+export interface MissionProps {
+ screenWidth: ScreenWidths;
+}
+export const Mission = (props: MissionProps) => {
+ const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+ const image = (
+ <div className="col lg-col-6 md-col-6 col-12 sm-py2 px2 center">
+ <img src="/images/jobs/map.png" style={{ width: '100%' }} />
+ </div>
+ );
+ const missionStatementStyle = !isSmallScreen ? { height: 364, lineHeight: '364px' } : undefined;
+ const missionStatement = (
+ <div className="col lg-col-6 md-col-6 col-12 center" style={missionStatementStyle}>
+ <div
+ className="mx-auto inline-block align-middle"
+ style={{ maxWidth: 385, lineHeight: '44px', textAlign: 'center' }}
+ >
+ <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
+ Our Mission
+ </div>
<div
- className="col lg-col-6 md-col-6 col-12 center"
- style={{ color: colors.darkestGrey, height: 364, lineHeight: '364px' }}
+ className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h4 sm-center"
+ style={{ fontFamily: 'Roboto', lineHeight: 2, maxWidth: 537 }}
>
- <div
- className="mx-auto inline-block lg-align-middle md-align-middle sm-align-top"
- style={{ maxWidth: 385, lineHeight: '44px', textAlign: 'center' }}
- >
- <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
- Our Mission
- </div>
- <div
- className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h4 sm-center"
- style={{ fontFamily: 'Roboto', lineHeight: 2, maxWidth: 537 }}
- >
- We believe a system can exist in which all world value is accessible to anyone, anywhere,
- regardless of where you happen to be born.
- </div>
- </div>
+ We believe a system can exist in which all world value is accessible to anyone, anywhere, regardless
+ of where you happen to be born.
</div>
</div>
</div>
);
-};
-
-const WorldImage = () => {
- const isSmallScreen = false;
return (
- <div className="col lg-col-6 md-col-6 col-12 center">
- <img src="/images/jobs/map.png" height={isSmallScreen ? 280 : 364.5} />
+ <div className="container lg-py4 md-py4" style={{ backgroundColor: colors.jobsPageGrey, color: colors.black }}>
+ <div className="mx-auto clearfix sm-py4">
+ {isSmallScreen ? (
+ <div>
+ {missionStatement}
+ {image}
+ </div>
+ ) : (
+ <div>
+ {image}
+ {missionStatement}
+ </div>
+ )}
+ </div>
</div>
);
};
diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx
index a5ccfb25f..bcc3444ec 100644
--- a/packages/website/ts/pages/jobs/photo_rail.tsx
+++ b/packages/website/ts/pages/jobs/photo_rail.tsx
@@ -2,12 +2,18 @@ import * as _ from 'lodash';
import * as React from 'react';
import { FilledImage } from 'ts/pages/jobs/filled_image';
+import { ScreenWidths } from 'ts/types';
-export const PhotoRail = () => {
- const images = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png'];
+const IMAGE_PATHS = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png'];
+
+export interface PhotoRailProps {
+ images: string[];
+}
+
+export const PhotoRail = (props: PhotoRailProps) => {
return (
- <div className="clearfix" style={{ height: 491 }}>
- {_.map(images, (image: string) => {
+ <div className="clearfix" style={{ height: 490 }}>
+ {_.map(props.images, (image: string) => {
return (
<div key={image} className="col lg-col-4 md-col-4 col-12 center" style={{ height: '100%' }}>
<FilledImage src={image} />
diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts
index 5ffdd6ba7..002318e14 100644
--- a/packages/website/ts/style/colors.ts
+++ b/packages/website/ts/style/colors.ts
@@ -11,6 +11,7 @@ const appColors = {
wrapEtherConfirmationButton: sharedColors.mediumBlue,
drawerMenuBackground: '#4a4a4a',
menuItemDefaultSelectedBackground: '#424242',
+ jobsPageGrey: '#fafafa',
};
export const colors = {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-02 17:52:10 +0800