crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use our image component in mission

Browse Source
This commit is contained in:
Brandon Millman
2018-07-25 14:21:39 +08:00
parent 51fb6e6a23
commit b0fab3ea4a
2 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/website/ts/components/ui/image.tsx
View File

@@ -5,9 +5,11 @@ export interface ImageProps {
className?: string; className?: string;
src?: string; src?: string;
fallbackSrc?: string; fallbackSrc?: string;
height?: string | number;
borderRadius?: string; borderRadius?: string;
width?: string | number; width?: string | number;
height?: string | number;
maxWidth?: string | number;
maxHeight?: string | number;
} }
interface ImageState { interface ImageState {
imageLoadFailed: boolean; imageLoadFailed: boolean;
@@ -29,6 +31,8 @@ export class Image extends React.Component<ImageProps, ImageState> {
src={src} src={src}
style={{ style={{
borderRadius: this.props.borderRadius, borderRadius: this.props.borderRadius,
maxWidth: this.props.maxWidth,
maxHeight: this.props.maxHeight,
}} }}
height={this.props.height} height={this.props.height}
width={this.props.width} width={this.props.width}

3
packages/website/ts/pages/jobs/mission.tsx
View File

@@ -1,6 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { Container } from 'ts/components/ui/container'; import { Container } from 'ts/components/ui/container';
import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text'; import { Text } from 'ts/components/ui/text';
import { colors } from 'ts/style/colors'; import { colors } from 'ts/style/colors';
import { ScreenWidths } from 'ts/types'; import { ScreenWidths } from 'ts/types';
@@ -10,7 +11,7 @@ export interface MissionProps {
} }
export const Mission = (props: MissionProps) => { export const Mission = (props: MissionProps) => {
const isSmallScreen = props.screenWidth === ScreenWidths.Sm; const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
const image = <img src="/images/jobs/world-map.svg" style={{ maxWidth: 500, maxHeight: 280 }} />; const image = <Image src="/images/jobs/world-map.svg" maxWidth="500px" maxHeight="280px" />;
const missionStatementClassName = isSmallScreen ? 'center' : undefined; const missionStatementClassName = isSmallScreen ? 'center' : undefined;
const missionStatement = ( const missionStatement = (
<Container className={missionStatementClassName} maxWidth="388px"> <Container className={missionStatementClassName} maxWidth="388px">