diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-06-11 12:29:15 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-06-13 01:41:09 +0800 |
commit | bc36c0faed11d61164027efad5b2ad9d07f0573f (patch) | |
tree | 6f1fd8fa15652f4faf26258f0b65351edc42bc9d /packages | |
parent | 3c073bc360f88129bd59e7e3d0d7fbcf69828da4 (diff) | |
download | dexon-sol-tools-bc36c0faed11d61164027efad5b2ad9d07f0573f.tar.gz dexon-sol-tools-bc36c0faed11d61164027efad5b2ad9d07f0573f.tar.zst dexon-sol-tools-bc36c0faed11d61164027efad5b2ad9d07f0573f.zip |
Teams section
Diffstat (limited to 'packages')
-rw-r--r-- | packages/website/ts/pages/jobs/benefits.tsx | 7 | ||||
-rw-r--r-- | packages/website/ts/pages/jobs/bulleted_item.tsx | 22 | ||||
-rw-r--r-- | packages/website/ts/pages/jobs/bulleted_item_list.tsx | 47 | ||||
-rw-r--r-- | packages/website/ts/pages/jobs/jobs.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/pages/jobs/teams.tsx | 60 | ||||
-rw-r--r-- | packages/website/ts/pages/jobs/values.tsx | 7 |
6 files changed, 70 insertions, 75 deletions
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index 03a906a10..ce261592f 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,15 +1,14 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; -import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; +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 { 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_ITEMS: BulletedItemProps[] = [ +const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ { bulletColor: '#6FCF97', title: 'Ethics/Doing the right thing', @@ -65,7 +64,7 @@ const SmallLayout = () => ( </div> ); -const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItems={BULLETED_ITEMS} />; +const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItemInfos={BULLETED_ITEM_INFOS} />; const ImageGrid = () => ( <div style={{ width: '100%', height: '100%' }}> diff --git a/packages/website/ts/pages/jobs/bulleted_item.tsx b/packages/website/ts/pages/jobs/bulleted_item.tsx deleted file mode 100644 index 9dc4fe4a3..000000000 --- a/packages/website/ts/pages/jobs/bulleted_item.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; - -export interface BulletedItemProps { - bulletColor: string; - title: string; - description: string; - height?: number; -} -export const BulletedItem = (props: BulletedItemProps) => { - const minHeight = props.height || 150; - return ( - <div className="flex" style={{ minHeight }}> - <svg className="flex-none px2" height="26" width="26"> - <circle cx="13" cy="13" r="13" fill={props.bulletColor} /> - </svg> - <div className="flex-auto px2"> - <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div> - <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div> - </div> - </div> - ); -}; diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx index 30dd126d1..a00290418 100644 --- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx +++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx @@ -2,20 +2,30 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; - +export type BulletedItemInfo = BulletedItemProps; export interface BulletedItemListProps { - headerText: string; - bulletedItems: BulletedItemProps[]; + headerText?: string; + bulletedItemInfos: BulletedItemInfo[]; } export const BulletedItemList = (props: BulletedItemListProps) => { return ( <div className="mx-auto max-width-4"> - <div className="h2 lg-py4 md-py4 sm-py3" style={{ paddingLeft: 90, fontFamily: 'Roboto Mono' }}> - {props.headerText} - </div> + {!_.isUndefined(props.headerText) && ( + <div + className="h2 lg-py4 md-py4 sm-py3" + style={{ + paddingLeft: 90, + fontFamily: 'Roboto Mono', + minHeight: '1.25em', + lineHeight: 1.25, + }} + > + {props.headerText} + </div> + )} + <div className="px2"> - {_.map(props.bulletedItems, bulletedItemProps => { + {_.map(props.bulletedItemInfos, bulletedItemProps => { return ( <BulletedItem key={bulletedItemProps.title} @@ -29,3 +39,24 @@ export const BulletedItemList = (props: BulletedItemListProps) => { </div> ); }; + +interface BulletedItemProps { + bulletColor: string; + title: string; + description: string; + height?: number; +} +const BulletedItem = (props: BulletedItemProps) => { + const minHeight = props.height || 150; + return ( + <div className="flex" style={{ minHeight }}> + <svg className="flex-none px2" height="26" width="26"> + <circle cx="13" cy="13" r="13" fill={props.bulletColor} /> + </svg> + <div className="flex-auto px2"> + <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div> + <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div> + </div> + </div> + ); +}; 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> diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index b00170877..3d953c993 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -2,9 +2,10 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; +import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; +import { ScreenWidths } from 'ts/types'; -const ITEMS_COLUMN1: BulletedItemProps[] = [ +const ITEMS_COLUMN1: BulletedItemInfo[] = [ { bulletColor: '#EB5757', title: 'User Growth', @@ -18,7 +19,7 @@ const ITEMS_COLUMN1: BulletedItemProps[] = [ '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: BulletedItemProps[] = [ +const ITEMS_COLUMN2: BulletedItemInfo[] = [ { bulletColor: '#EB5757', title: 'Developer Tools', @@ -32,38 +33,25 @@ const ITEMS_COLUMN2: BulletedItemProps[] = [ '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 HEADER_TEXT = 'Our Teams'; -export const Teams = () => { - const isSmallScreen = false; - const teamHeight = 220; - return ( - <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.white }}> - <div className="mx-auto max-width-4 clearfix"> - <div className="col lg-col-6 md-col-6 col-12 p2"> - {_.map(ITEMS_COLUMN1, bulletedItemProps => { - return ( - <BulletedItem - bulletColor={bulletedItemProps.bulletColor} - title={bulletedItemProps.title} - description={bulletedItemProps.description} - height={teamHeight} - /> - ); - })} - </div> - <div className="col lg-col-6 md-col-6 col-12 p2"> - {_.map(ITEMS_COLUMN2, bulletedItemProps => { - return ( - <BulletedItem - bulletColor={bulletedItemProps.bulletColor} - title={bulletedItemProps.title} - description={bulletedItemProps.description} - height={teamHeight} - /> - ); - })} - </div> - </div> +export interface TeamsProps { + screenWidth: ScreenWidths; +} + +export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />); + +const LargeLayout = () => ( + <div className="mx-auto max-width-4 clearfix"> + <div className="col lg-col-6 md-col-6 col-12"> + <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} /> </div> - ); -}; + <div className="col lg-col-6 md-col-6 col-12"> + <BulletedItemList headerText=" " bulletedItemInfos={ITEMS_COLUMN2} /> + </div> + </div> +); + +const SmallLayout = () => ( + <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={_.concat(ITEMS_COLUMN1, ITEMS_COLUMN2)} /> +); diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 37e62d23b..45bbf950f 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -2,10 +2,9 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; -import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; +import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; -const BULLETED_ITEMS: BulletedItemProps[] = [ +const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ { bulletColor: '#6FCF97', title: 'Ethics/Doing the right thing', @@ -23,4 +22,4 @@ const BULLETED_ITEMS: BulletedItemProps[] = [ }, ]; -export const Values = () => <BulletedItemList headerText="Our Values" bulletedItems={BULLETED_ITEMS} />; +export const Values = () => <BulletedItemList headerText="Our Values" bulletedItemInfos={BULLETED_ITEM_INFOS} />; |