diff options
| -rw-r--r-- | packages/website/ts/components/ui/container.tsx | 7 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/benefits.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/open_positions.tsx | 154 |
3 files changed, 78 insertions, 85 deletions
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 427cc6cc7..502069dee 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -9,6 +9,7 @@ export interface ContainerProps { marginBottom?: StringOrNum; marginRight?: StringOrNum; marginLeft?: StringOrNum; + padding?: StringOrNum; paddingTop?: StringOrNum; paddingBottom?: StringOrNum; paddingRight?: StringOrNum; @@ -31,13 +32,15 @@ export interface ContainerProps { bottom?: string; zIndex?: number; Tag?: ContainerTag; + id?: string; + onClick?: (event: React.MouseEvent<HTMLElement>) => void; } export const Container: React.StatelessComponent<ContainerProps> = props => { - const { children, className, Tag, isHidden, ...style } = props; + const { children, className, Tag, isHidden, id, onClick, ...style } = props; const visibility = isHidden ? 'hidden' : undefined; return ( - <Tag style={{ ...style, visibility }} className={className}> + <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}> {children} </Tag> ); diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index c8024068f..39d2e0f2c 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -51,7 +51,7 @@ export const Benefits = (props: BenefitsProps) => { {!isSmallScreen ? ( <Container className="flex" maxWidth="800px"> <BenefitsList /> - <Container marginLeft="200px"> + <Container marginLeft="215px"> <ValuesList /> </Container> </Container> diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index c9fe987e4..e349e30c5 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -3,6 +3,7 @@ import CircularProgress from 'material-ui/CircularProgress'; import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; import { Retry } from 'ts/components/ui/retry'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; @@ -43,16 +44,19 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit } public render(): React.ReactNode { const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; return ( - <div id={this.props.hash} className="mx-auto max-width-4"> - {isReadyToRender ? this._renderBody() : this._renderLoading()} - </div> + <Container id={this.props.hash} className="mx-auto pb4 sm-px3" maxWidth="1200px"> + {!isSmallScreen && <hr />} + <Container marginTop="64px" marginBottom="50px"> + <Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}> + Open Positions + </Text> + </Container> + {isReadyToRender ? this._renderTable() : this._renderLoading()} + </Container> ); } - private _renderBody(): React.ReactNode { - const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; - return isSmallScreen ? this._renderList() : this._renderTable(); - } private _renderLoading(): React.ReactNode { return ( // TODO: consolidate this loading component with the one in portal and RelayerIndex @@ -66,64 +70,31 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit </div> ); } - private _renderList(): React.ReactNode { - return ( - <div style={{ backgroundColor: colors.jobsPageBackground }}> - {_.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> - <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> + <Container width="100%"> + {_.map(this.state.jobInfos, jobInfo => { + return ( + <JobInfoTableRow + key={jobInfo.id} + screenWidth={this.props.screenWidth} + jobInfo={jobInfo} + onClick={this._openJobInfoUrl.bind(this, jobInfo)} + /> + ); + })} + </Container> ); } private _renderJobInfoTableRow(jobInfo: WebsiteBackendJobInfo): React.ReactNode { return ( - <TableRow - key={jobInfo.id} - hoverable={true} - displayBorder={false} - style={{ height: TABLE_ROW_MIN_HEIGHT, border: 2 }} - > - <TableRowColumn colSpan={5} style={labelStyle}> - {jobInfo.title} - </TableRowColumn> - <TableRowColumn colSpan={3} style={labelStyle}> - {jobInfo.department} - </TableRowColumn> - <TableRowColumn colSpan={4} style={labelStyle}> - {jobInfo.office} - </TableRowColumn> - </TableRow> + <Container className="flex items-center" minHeight={TABLE_ROW_MIN_HEIGHT} width="100%" marginBottom="30px"> + <Container className="clearfix container" width="100%"> + <Container className="col col-5">{jobInfo.title}</Container> + <Container className="col col-3">{jobInfo.department}</Container> + <Container className="col col-4">{jobInfo.office}</Container> + </Container> + </Container> ); } private async _fetchJobInfosAsync(): Promise<void> { @@ -135,9 +106,10 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit }); } const jobInfos = await backendClient.getJobInfosAsync(); + const dummyJobInfos = _.concat(jobInfos, jobInfos, jobInfos, jobInfos); if (!this._isUnmounted) { this.setState({ - jobInfos, + jobInfos: dummyJobInfos, }); } } catch (error) { @@ -148,39 +120,57 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit } } } - private _onCellClick(rowNumber: number): void { - if (_.isUndefined(this.state.jobInfos)) { - return; - } - const jobInfo = this.state.jobInfos[rowNumber]; - this._openJobInfoUrl(jobInfo); - } - private _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void { const url = jobInfo.url; utils.openUrl(url); } } -export interface JobInfoListItemProps { - title?: string; - description?: string; +export interface JobInfoTableRowProps { + className?: string; + screenWidth: ScreenWidths; + jobInfo: WebsiteBackendJobInfo; onClick?: (event: React.MouseEvent<HTMLElement>) => void; } -const PlainJobInfoListItem: React.StatelessComponent<JobInfoListItemProps> = ({ title, description, onClick }) => ( - <div className="mb3" onClick={onClick}> - <Text fontWeight="bold" fontSize="16px" fontColor={colors.mediumBlue}> - {title + ' ›'} - </Text> - <Text className="pt1" fontSize="16px" fontColor={colors.darkGrey}> - {description} - </Text> - </div> -); +const PlainJobInfoTableRow: React.StatelessComponent<JobInfoTableRowProps> = ({ + className, + screenWidth, + jobInfo, + onClick, +}) => { + const isSmallScreen = screenWidth === ScreenWidths.Sm; + const titleClassName = isSmallScreen ? 'col col-12 center' : 'col col-5'; + const paddingLeft = isSmallScreen ? undefined : '30px'; + return ( + <Container className={className} onClick={onClick} marginBottom="30px" paddingLeft={paddingLeft}> + <Container className="flex items-center" minHeight={TABLE_ROW_MIN_HEIGHT} width="100%"> + <Container className="clearfix container" width="100%"> + <Container className={titleClassName}> + <Text fontSize="16px" fontWeight="bold" fontColor={colors.mediumBlue}> + {jobInfo.title} + </Text> + </Container> + {!isSmallScreen && ( + <Container className="col col-3"> + <Text fontSize="16px">{jobInfo.department}</Text> + </Container> + )} + {!isSmallScreen && ( + <Container className="col col-4 center"> + <Text fontSize="16px">{jobInfo.office}</Text> + </Container> + )} + </Container> + </Container> + </Container> + ); +}; -export const JobInfoListItem = styled(PlainJobInfoListItem)` +export const JobInfoTableRow = styled(PlainJobInfoTableRow)` cursor: pointer; + background-color: ${colors.grey100}; + border-radius: 7px; &:hover { opacity: 0.5; } |