From 7080f0c35a3e5c84fa2907c6feb0610c699c2823 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 12 Jun 2018 10:38:41 -0700 Subject: Implement small open positions --- packages/website/ts/pages/jobs/benefits.tsx | 57 ++++++++--- .../website/ts/pages/jobs/bulleted_item_list.tsx | 62 ------------ packages/website/ts/pages/jobs/jobs.tsx | 2 +- .../website/ts/pages/jobs/list/header_item.tsx | 24 +++++ packages/website/ts/pages/jobs/list/list_item.tsx | 15 +++ packages/website/ts/pages/jobs/open_positions.tsx | 112 +++++++++++++++------ packages/website/ts/pages/jobs/teams.tsx | 42 ++++++-- packages/website/ts/pages/jobs/values.tsx | 38 ++++++- 8 files changed, 232 insertions(+), 120 deletions(-) delete mode 100644 packages/website/ts/pages/jobs/bulleted_item_list.tsx create mode 100644 packages/website/ts/pages/jobs/list/header_item.tsx create mode 100644 packages/website/ts/pages/jobs/list/list_item.tsx diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index a7cc23503..b27c68a5b 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,40 +1,45 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; import { FilledImage } from 'ts/pages/jobs/filled_image'; import { FloatingImage } from 'ts/pages/jobs/floating_image'; +import { HeaderItem } from 'ts/pages/jobs/list/header_item'; +import { ListItem } from 'ts/pages/jobs/list/list_item'; import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png']; -const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ +const BENEFIT_ITEM_PROPS_LIST: BenefitItemProps[] = [ { bulletColor: '#6FCF97', - title: 'Ethics/Doing the right thing', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, { bulletColor: '#56CCF2', - title: 'Consistently ship', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, { bulletColor: '#EB5757', - title: 'Focus on long term impact', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, { bulletColor: '#6FCF97', - title: 'Test test yo', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, { bulletColor: '#56CCF2', - title: 'Waddle Waddle', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, ]; +const LARGE_LAYOUT_HEIGHT = 937; +const LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT = 205; +const HEADER_TEXT = 'Benefits'; +const BENEFIT_ITEM_MIN_HEIGHT = 150; export interface BenefitsProps { screenWidth: ScreenWidths; @@ -47,11 +52,14 @@ export const Benefits = (props: BenefitsProps) => ( ); const LargeLayout = () => ( -
+
-
+
@@ -64,7 +72,26 @@ const SmallLayout = () => (
); -const BenefitsList = () => ; +export const BenefitsList = () => { + return ( +
+ + {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => React.createElement(BenefitItem, valueItemProps))} +
+ ); +}; +interface BenefitItemProps { + bulletColor: string; + description: string; +} + +const BenefitItem: React.StatelessComponent = ({ bulletColor, description }) => ( +
+ +
{description}
+ +
+); const ImageGrid = () => (
diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx deleted file mode 100644 index a00290418..000000000 --- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { colors } from '@0xproject/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; - -export type BulletedItemInfo = BulletedItemProps; -export interface BulletedItemListProps { - headerText?: string; - bulletedItemInfos: BulletedItemInfo[]; -} -export const BulletedItemList = (props: BulletedItemListProps) => { - return ( -
- {!_.isUndefined(props.headerText) && ( -
- {props.headerText} -
- )} - -
- {_.map(props.bulletedItemInfos, bulletedItemProps => { - return ( - - ); - })} -
-
- ); -}; - -interface BulletedItemProps { - bulletColor: string; - title: string; - description: string; - height?: number; -} -const BulletedItem = (props: BulletedItemProps) => { - const minHeight = props.height || 150; - return ( -
- - - -
-
{props.title}
-
{props.description}
-
-
- ); -}; 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 { - +
); diff --git a/packages/website/ts/pages/jobs/list/header_item.tsx b/packages/website/ts/pages/jobs/list/header_item.tsx new file mode 100644 index 000000000..b130cb0c4 --- /dev/null +++ b/packages/website/ts/pages/jobs/list/header_item.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + +import { ListItem } from 'ts/pages/jobs/list/list_item'; + +export interface HeaderItemProps { + headerText?: string; +} +export const HeaderItem: React.StatelessComponent = ({ headerText }) => { + return ( +
+ +
+ {headerText} +
+ +
+ ); +}; diff --git a/packages/website/ts/pages/jobs/list/list_item.tsx b/packages/website/ts/pages/jobs/list/list_item.tsx new file mode 100644 index 000000000..d7838bc01 --- /dev/null +++ b/packages/website/ts/pages/jobs/list/list_item.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +export interface ListItemProps { + bulletColor?: string; +} +export const ListItem: React.StatelessComponent = ({ bulletColor, children }) => { + return ( +
+ + + +
{children}
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index 5eb8e429d..f6dbc38a0 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -4,14 +4,20 @@ import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowCol import * as React from 'react'; import { Retry } from 'ts/components/ui/retry'; +import { HeaderItem } from 'ts/pages/jobs/list/header_item'; +import { ListItem } from 'ts/pages/jobs/list/list_item'; import { colors } from 'ts/style/colors'; -import { WebsiteBackendJobInfo } from 'ts/types'; +import { styled } from 'ts/style/theme'; +import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; +const HEADER_TEXT = 'Open Positions'; +const LIST_ITEM_MIN_HEIGHT = 80; export interface OpenPositionsProps { hash: string; + screenWidth: ScreenWidths; } export interface OpenPositionsState { jobInfos?: WebsiteBackendJobInfo[]; @@ -37,6 +43,7 @@ export class OpenPositions extends React.Component - - <Table selectable={false} onCellClick={this._onCellClick.bind(this)}> - <TableHeader displaySelectAll={false} adjustForCheckbox={false}> - <TableRow> - <TableHeaderColumn colSpan={5} style={labelStyle}> - Position - </TableHeaderColumn> - <TableHeaderColumn colSpan={3} style={labelStyle}> - Department - </TableHeaderColumn> - <TableHeaderColumn colSpan={4} style={labelStyle}> - Office - </TableHeaderColumn> - </TableRow> - </TableHeader> - <TableBody displayRowCheckbox={false} showRowHover={true}> - {_.map(this.state.jobInfos, jobInfo => { - return this._renderJobInfo(jobInfo); - })} - </TableBody> - </Table> + {isSmallScreen ? this._renderList() : this._renderTable()} </div> ); } } - private _renderJobInfo(jobInfo: WebsiteBackendJobInfo): React.ReactNode { + private _renderList(): React.ReactNode { + return ( + <div style={{ backgroundColor: colors.jobsPageBackground }}> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(this.state.jobInfos, jobInfo => ( + <JobInfoListItem + key={jobInfo.id} + title={jobInfo.title} + description={jobInfo.department} + onClick={this._openJobInfoUrl.bind(this, jobInfo)} + /> + ))} + </div> + ); + } + private _renderTable(): React.ReactNode { + return ( + <div> + <HeaderItem headerText={HEADER_TEXT} /> + <Table selectable={false} onCellClick={this._onCellClick.bind(this)}> + <TableHeader displaySelectAll={false} adjustForCheckbox={false}> + <TableRow> + <TableHeaderColumn colSpan={5} style={labelStyle}> + Position + </TableHeaderColumn> + <TableHeaderColumn colSpan={3} style={labelStyle}> + Department + </TableHeaderColumn> + <TableHeaderColumn colSpan={4} style={labelStyle}> + Office + </TableHeaderColumn> + </TableRow> + </TableHeader> + <TableBody displayRowCheckbox={false} showRowHover={true}> + {_.map(this.state.jobInfos, jobInfo => { + return this._renderJobInfoTableRow(jobInfo); + })} + </TableBody> + </Table> + </div> + ); + } + private _renderJobInfoTableRow(jobInfo: WebsiteBackendJobInfo): React.ReactNode { return ( <TableRow key={jobInfo.id} hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}> <TableRowColumn colSpan={5} style={labelStyle}> @@ -118,19 +147,36 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit if (_.isUndefined(this.state.jobInfos)) { return; } - const url = this.state.jobInfos[rowNumber].url; + const jobInfo = this.state.jobInfos[rowNumber]; + this._openJobInfoUrl(jobInfo); + } + + private _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void { + const url = jobInfo.url; window.open(url, '_blank'); } } -const Title = () => ( - <div - className="h2 lg-py4 md-py4 sm-py3" - style={{ - paddingLeft: 90, - fontFamily: 'Roboto Mono', - }} - > - {'Open Positions'} +export interface JobInfoListItemProps { + title?: string; + description?: string; + onClick?: (event: React.MouseEvent<HTMLElement>) => void; +} + +const PlainJobInfoListItem: React.StatelessComponent<JobInfoListItemProps> = ({ title, description, onClick }) => ( + <div className="mb3" onClick={onClick}> + <ListItem> + <div style={{ fontWeight: 'bold', fontSize: 16, color: colors.mediumBlue }}>{title + ' ›'}</div> + <div className="pt1" style={{ fontSize: 16, color: colors.darkGrey }}> + {description} + </div> + </ListItem> </div> ); + +export const JobInfoListItem = styled(PlainJobInfoListItem)` + cursor: pointer; + &:hover { + opacity: 0.5; + } +`; diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index 465bae7f4..dcb457d06 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -2,10 +2,11 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; +import { HeaderItem } from 'ts/pages/jobs/list/header_item'; +import { ListItem } from 'ts/pages/jobs/list/list_item'; import { ScreenWidths } from 'ts/types'; -const ITEMS_COLUMN1: BulletedItemInfo[] = [ +const TEAM_ITEM_PROPS_COLUMN1: TeamItemProps[] = [ { bulletColor: '#EB5757', title: 'User Growth', @@ -19,7 +20,7 @@ const ITEMS_COLUMN1: BulletedItemInfo[] = [ 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, ]; -const ITEMS_COLUMN2: BulletedItemInfo[] = [ +const TEAM_ITEM_PROPS_COLUMN2: TeamItemProps[] = [ { bulletColor: '#EB5757', title: 'Developer Tools', @@ -34,6 +35,7 @@ const ITEMS_COLUMN2: BulletedItemInfo[] = [ }, ]; const HEADER_TEXT = 'Our Teams'; +const MINIMUM_ITEM_HEIGHT = 240; export interface TeamsProps { screenWidth: ScreenWidths; @@ -44,14 +46,42 @@ export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths. const LargeLayout = () => ( <div className="mx-auto max-width-4 clearfix pb4"> <div className="col lg-col-6 md-col-6 col-12"> - <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} /> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(TEAM_ITEM_PROPS_COLUMN1, teamItemProps => React.createElement(TeamItem, teamItemProps))} </div> <div className="col lg-col-6 md-col-6 col-12"> - <BulletedItemList headerText=" " bulletedItemInfos={ITEMS_COLUMN2} /> + <HeaderItem headerText=" " /> + {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => React.createElement(TeamItem, teamItemProps))} </div> </div> ); const SmallLayout = () => ( - <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={_.concat(ITEMS_COLUMN1, ITEMS_COLUMN2)} /> + <div> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps => + React.createElement(TeamItem, teamItemProps), + )} + </div> ); + +interface TeamItemProps { + bulletColor: string; + title: string; + description: string; +} + +export const TeamItem: React.StatelessComponent<TeamItemProps> = ({ bulletColor, title, description }) => { + return ( + <div style={{ minHeight: MINIMUM_ITEM_HEIGHT }}> + <ListItem bulletColor={bulletColor}> + <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div> + </ListItem> + <ListItem> + <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}> + {description} + </div> + </ListItem> + </div> + ); +}; diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 45bbf950f..abacafdba 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -2,9 +2,10 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; +import { HeaderItem } from 'ts/pages/jobs/list/header_item'; +import { ListItem } from 'ts/pages/jobs/list/list_item'; -const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ +const VALUE_ITEM_PROPS_LIST: ValueItemProps[] = [ { bulletColor: '#6FCF97', title: 'Ethics/Doing the right thing', @@ -22,4 +23,35 @@ const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ }, ]; -export const Values = () => <BulletedItemList headerText="Our Values" bulletedItemInfos={BULLETED_ITEM_INFOS} />; +const HEADER_TEXT = 'Our Values'; +const VALUE_ITEM_MIN_HEIGHT = 150; + +export const Values = () => { + return ( + <div className="mx-auto max-width-4"> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(VALUE_ITEM_PROPS_LIST, valueItemProps => React.createElement(ValueItem, valueItemProps))} + </div> + ); +}; + +interface ValueItemProps { + bulletColor: string; + title: string; + description: string; +} + +export const ValueItem: React.StatelessComponent<ValueItemProps> = ({ bulletColor, title, description }) => { + return ( + <div style={{ minHeight: VALUE_ITEM_MIN_HEIGHT }}> + <ListItem bulletColor={bulletColor}> + <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div> + </ListItem> + <ListItem> + <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}> + {description} + </div> + </ListItem> + </div> + ); +}; -- cgit