Skip to content

Commit c231457

Browse files
kilemensikilemensi
committed
Add About Dominion component
1 parent 6dfb634 commit c231457

File tree

6 files changed

+241
-0
lines changed

6 files changed

+241
-0
lines changed

‎dominion/frontend/src/assets/images/About/land.png

459 KB
Loading

‎dominion/frontend/src/component/About/Header.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { Typography } from '@material-ui/core';
5+
import { withStyles } from '@material-ui/core/styles';
6+
import withWidth from '@material-ui/core/withWidth';
7+
8+
const styles = theme => ({
9+
root: {
10+
width: '100%',
11+
minWidth: '100%',
12+
[theme.breakpoints.up('md')]: {
13+
width: '17.875rem'
14+
},
15+
[theme.breakpoints.up('lg')]: {
16+
width: '18.5rem'
17+
}
18+
},
19+
heading: {
20+
width: '10rem'
21+
}
22+
});
23+
24+
function Header({ classes }) {
25+
return (
26+
<div className={classes.root}>
27+
<Typography variant="h2" className={classes.heading}>
28+
About Dominion
29+
</Typography>
30+
</div>
31+
);
32+
}
33+
34+
Header.propTypes = {
35+
classes: PropTypes.shape().isRequired
36+
};
37+
38+
export default withWidth()(withStyles(styles)(Header));

‎dominion/frontend/src/component/About/Info.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { Typography } from '@material-ui/core';
5+
import { withStyles } from '@material-ui/core/styles';
6+
7+
import A from '../A';
8+
9+
const styles = theme => ({
10+
root: {
11+
width: '100%',
12+
[theme.breakpoints.up('md')]: {
13+
width: '21.875rem',
14+
paddingLeft: '1rem',
15+
paddingRight: '2rem'
16+
},
17+
[theme.breakpoints.up('lg')]: {
18+
width: '34.5rem',
19+
paddingLeft: '3rem',
20+
paddingRight: '4rem'
21+
}
22+
},
23+
body: {
24+
marginTop: '1rem'
25+
}
26+
});
27+
28+
function Info({ classes }) {
29+
return (
30+
<div className={classes.root}>
31+
<Typography variant="subtitle2" className={classes.subtitle}>
32+
Dominion is built on the HURUmap platform.{' '}
33+
<A href="https://hurumap.org" variant="subtitle2">
34+
HURUmap
35+
</A>{' '}
36+
shows the data behind the stories, and gives infomediaries like
37+
journalists, policy makers and civic activists an easy &lsquo;plug &
38+
play&rsquo; toolkit for finding and embedding interactive data
39+
visualisations into their storytelling.
40+
</Typography>
41+
42+
<Typography variant="body2" className={classes.body}>
43+
HURUmap&apos;s underlying data is quality-checked, from reputable
44+
official sources including the government Census,{' '}
45+
<A href="https://www.pepfar.gov" variant="body2">
46+
PEPFAR
47+
</A>{' '}
48+
and{' '}
49+
<A href="https://www.uwezo.net" variant="body2">
50+
Uwezo
51+
</A>
52+
. This project is built on software originally created by the Knight Lab
53+
in the U.S.A. for their CensusReporter.org project, which has been
54+
repurposed by{' '}
55+
<A href="https://openup.org.za" variant="body2">
56+
OpenUp
57+
</A>{' '}
58+
and Media Monitoring Africa for Wazimap in South Africa and by Code for
59+
Africa for HURUmap in Kenya, Tanzania, Uganda and Zambia.
60+
</Typography>
61+
</div>
62+
);
63+
}
64+
65+
Info.propTypes = {
66+
classes: PropTypes.shape().isRequired
67+
};
68+
69+
export default withStyles(styles)(Info);

‎dominion/frontend/src/component/About/Land.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { withWidth, Grid } from '@material-ui/core';
5+
import { withStyles } from '@material-ui/core/styles';
6+
7+
import land from '../../assets/images/About/land.png';
8+
9+
const styles = theme => ({
10+
root: {
11+
flexGrow: 1,
12+
width: '100%',
13+
[theme.breakpoints.up('md')]: {
14+
width: '19.875rem'
15+
},
16+
[theme.breakpoints.up('lg')]: {
17+
width: '26.5rem'
18+
}
19+
},
20+
img: {
21+
width: '100%',
22+
[theme.breakpoints.up('md')]: {
23+
width: '18.875rem',
24+
height: 'auto',
25+
26+
// TODO(kilemens): There is a gap between the two components. This is a temporary fix.
27+
marginBottom: theme.spacing.unit * -0.5
28+
},
29+
[theme.breakpoints.up('lg')]: {
30+
width: '25.5rem'
31+
}
32+
},
33+
highlight: {
34+
width: '8rem',
35+
height: '1.5rem',
36+
background: '#e7e452'
37+
}
38+
});
39+
40+
function Land({ classes, width }) {
41+
const direction =
42+
width === 'xs' || width === 'sm' ? 'column-reverse' : 'column';
43+
return (
44+
<Grid
45+
container
46+
direction={direction}
47+
className={classes.root}
48+
justify="center"
49+
alignItems="flex-end"
50+
>
51+
<Grid item xs={12}>
52+
<img src={land} alt="land" className={classes.img} />
53+
</Grid>
54+
<Grid item xs={12}>
55+
<div className={classes.highlight} />
56+
</Grid>
57+
</Grid>
58+
);
59+
}
60+
61+
Land.propTypes = {
62+
classes: PropTypes.shape().isRequired,
63+
width: PropTypes.string.isRequired
64+
};
65+
66+
export default withWidth()(withStyles(styles)(Land));

‎dominion/frontend/src/component/About/index.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { Grid } from '@material-ui/core';
5+
import { withStyles } from '@material-ui/core/styles';
6+
7+
import Header from './Header';
8+
import Info from './Info';
9+
import Land from './Land';
10+
11+
const styles = theme => ({
12+
root: {
13+
flexGrow: 1,
14+
padding: '2rem'
15+
},
16+
header: {
17+
order: 2,
18+
width: '100%',
19+
margin: '2rem 0',
20+
[theme.breakpoints.up('md')]: {
21+
order: 1,
22+
width: 'auto',
23+
margin: 0
24+
}
25+
},
26+
info: {
27+
order: 3,
28+
[theme.breakpoints.up('md')]: {
29+
order: 2
30+
}
31+
},
32+
land: {
33+
order: 1,
34+
[theme.breakpoints.up('md')]: {
35+
order: 3
36+
}
37+
}
38+
});
39+
40+
function About({ classes }) {
41+
return (
42+
<Grid
43+
container
44+
direction="row"
45+
className={classes.root}
46+
justify="center"
47+
alignItems="flex-start"
48+
>
49+
<Grid item className={classes.header}>
50+
<Header />
51+
</Grid>
52+
<Grid item className={classes.info}>
53+
<Info />
54+
</Grid>
55+
<Grid item className={classes.land}>
56+
<Land />
57+
</Grid>
58+
</Grid>
59+
);
60+
}
61+
62+
About.propTypes = {
63+
classes: PropTypes.shape().isRequired
64+
};
65+
66+
export default withStyles(styles)(About);

‎dominion/frontend/src/pages/Home.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4+
import About from '../component/About';
45
import DocumentHead from '../component/DocumentHead';
56
import Footer from '../component/Footer';
67
import Showcase from '../component/Showcase';
@@ -10,6 +11,7 @@ function Home({ url }) {
1011
<React.Fragment>
1112
<DocumentHead url={url} />
1213
<Showcase />
14+
<About />
1315
<Footer />
1416
</React.Fragment>
1517
);

0 commit comments

Comments
 (0)