Skip to content

Commit a1a1793

Browse files
author
Tan Jin Ying
authored
Merge pull request #24 from DanKhoo/update
Update volunteer page
2 parents d735b7f + e1cb630 commit a1a1793

File tree

10 files changed

+3657
-2158
lines changed

10 files changed

+3657
-2158
lines changed

‎package-lock.json

Lines changed: 2163 additions & 2138 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"@fortawesome/react-fontawesome": "^0.1.4",
1111
"@material-ui/core": "^3.7.1",
1212
"@material-ui/icons": "^3.0.1",
13-
"gatsby": "^2.13.32",
13+
"gatsby": "^2.13.39",
1414
"gatsby-image": "^2.0.25",
1515
"gatsby-plugin-buildtime-timezone": "^1.0.3",
1616
"gatsby-plugin-manifest": "^2.0.9",
@@ -25,8 +25,8 @@
2525
"gatsby-transformer-sharp": "^2.1.8",
2626
"lodash": "^4.17.11",
2727
"prop-types": "^15.6.2",
28-
"react": "^16.8.6",
29-
"react-dom": "^16.8.6",
28+
"react": "^16.8.0",
29+
"react-dom": "^16.8.0",
3030
"react-helmet": "^5.2.0",
3131
"react-jss": "^8.6.1",
3232
"react-responsive-carousel": "^3.1.33",

‎src/components/cap/CapComponent.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ class CapComponent extends Component {
9191
<br />
9292
CAP - Code to Achieve Potential is a program designed in collaboration
9393
with{' '}
94-
<a href="https://www.autism.org.sg" className={classes.a}>
94+
<a href="https://www.autism.org.sg" target="_blank" className={classes.a}>
9595
Autism Resource Centre, Singapore
9696
</a>{' '}
9797
to create code specific learning opportunities for youth with Autism.{' '}

‎src/components/volunteer/VolunteerProgramsComponent.js

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import React, { Component } from 'react';
2+
3+
import Typography from '@material-ui/core/Typography';
4+
import Grid from '@material-ui/core/Grid';
5+
import Card from '@material-ui/core/Card';
6+
import MuiExpansionPanel from '@material-ui/core/ExpansionPanel';
7+
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
8+
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
9+
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
10+
import Button from '@material-ui/core/Button';
11+
import { withStyles } from '@material-ui/core/styles';
12+
13+
import Image from '../commons/Image';
14+
import { primary, hoverPrimary, royalBlue } from '../../utils/Colors';
15+
16+
const ExpansionPanel = withStyles({
17+
root: {
18+
'&:not(:last-child)': {
19+
borderBottom: 0,
20+
},
21+
'&:before': {
22+
display: 'none',
23+
},
24+
'&$expanded': {
25+
margin: 'auto',
26+
},
27+
},
28+
expanded: {},
29+
})(MuiExpansionPanel);
30+
31+
const styles = theme => ({
32+
root: {
33+
padding: '3rem 2rem 1rem 2rem',
34+
[theme.breakpoints.up('sm')]: {
35+
padding: '3rem 4rem 1rem 4rem',
36+
},
37+
[theme.breakpoints.up('md')]: {
38+
padding: '3rem 5rem 1rem 5rem',
39+
},
40+
},
41+
title: {
42+
marginBottom: '1.5rem',
43+
[theme.breakpoints.up('sm')]: {
44+
marginBottom: '2rem',
45+
},
46+
},
47+
panelTitleContainer: {
48+
padding: '0.5rem 1rem 0.5rem 1rem',
49+
},
50+
description: {
51+
textAlign: 'justify',
52+
'& a': {
53+
color: royalBlue,
54+
},
55+
'& a:hover': {
56+
textDecoration: 'none',
57+
},
58+
},
59+
btnAlign: {
60+
textAlign: 'center',
61+
marginBottom: '2rem',
62+
},
63+
joinUsBtn: {
64+
backgroundColor: primary,
65+
fontSize: 20,
66+
textTransform: 'capitalize',
67+
padding: '7.5px 15px',
68+
'& a': {
69+
color: 'white',
70+
},
71+
'&:hover': {
72+
backgroundColor: hoverPrimary,
73+
},
74+
},
75+
links: {
76+
textDecoration: 'none',
77+
},
78+
programImage: {
79+
width: '100%',
80+
height: 200,
81+
[theme.breakpoints.up('lg')]: {
82+
height: 250,
83+
},
84+
[theme.breakpoints.up('xl')]: {
85+
height: 325,
86+
},
87+
},
88+
});
89+
90+
class VolunteerProgramsComponent extends Component {
91+
programsComponent = (classes, programData) => {
92+
const programs = programData.edges;
93+
94+
return programs.map((program, index) => (
95+
<Grid item xs={12} sm={6} md={4} xl={3} key={index}>
96+
<Card>
97+
<Image
98+
filename={program.node.frontmatter.image.relativePath}
99+
classProps={classes.programImage}
100+
/>
101+
<ExpansionPanel>
102+
<ExpansionPanelSummary
103+
className={classes.panelTitleContainer}
104+
expandIcon={<ExpandMoreIcon />}
105+
aria-controls="panel1a-content"
106+
id="panel1a-header"
107+
>
108+
<Typography variant="h7" noWrap>
109+
{program.node.frontmatter.title}
110+
</Typography>
111+
</ExpansionPanelSummary>
112+
<ExpansionPanelDetails>
113+
<Typography
114+
className={classes.description}
115+
variant="body2"
116+
gutterBottom
117+
>
118+
<div dangerouslySetInnerHTML={{ __html: program.node.html }} />
119+
</Typography>
120+
</ExpansionPanelDetails>
121+
<Typography className={classes.btnAlign}>
122+
<Button className={classes.joinUsBtn}>
123+
<a href="#" className={classes.links}>
124+
Join Us
125+
</a>
126+
</Button>
127+
</Typography>
128+
</ExpansionPanel>
129+
</Card>
130+
</Grid>
131+
));
132+
};
133+
134+
render() {
135+
const { classes } = this.props;
136+
const { data } = this.props;
137+
138+
return (
139+
<div className={classes.root}>
140+
<Typography className={classes.title} variant="h5" align="center">
141+
Volunteer Programmes
142+
</Typography>
143+
<Grid container className={classes.programmeContainer} spacing={40}>
144+
{this.programsComponent(classes, data)}
145+
</Grid>
146+
</div>
147+
);
148+
}
149+
}
150+
151+
export default withStyles(styles)(VolunteerProgramsComponent);

‎src/images/volunteer_programs/cap/cap_image.jpg

1.89 MB
Loading

‎src/images/volunteer_programs/cap/index.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: 'CAP'
3+
image: 'cap_image.jpg'
4+
---
5+
6+
Welcome to the CAP program by SoC Student Life under its Code for Community project. The #socFamily team is very excited that you have found us! CAP - Code to Achieve Potential is a program designed in [Autism Resource Centre, Singapore](https://www.autism.org.sg) to create code specific learning opportunities for youth with Autism. We want YOU to teach coding to ARC students to help them improve their employability. So let’s get started on this awesome journey!

‎src/images/volunteer_programs/young_coder/index.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: 'Young Coder'
3+
image: 'young_coder_image.jpeg'
4+
---
5+
6+
Welcome to the YoungCoders program by SoC Student Life under its Code for Community project. The #socFamily team is very excited that you have found us! We want every child in underserved communities to have an equal opportunity to learn coding and be comfortable with the latest technologies. Even more than that we want YOU to encourage them to love using technology and get the most out of every opportunity. So let’s get started on this awesome journey!

‎src/images/volunteer_programs/young_coder/young_coder_image.jpeg

248 KB
Loading

‎src/pages/programmes.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { graphql } from 'gatsby';
33

44
import BannerComponent from '../components/volunteer/BannerComponent';
55
import RolesComponent from '../components/volunteer/RolesComponent';
6+
import VolunteerProgramsComponent from '../components/volunteer/VolunteerProgramsComponent';
67
import UpcomingProgramsComponent from '../components/volunteer/UpcomingProgramsComponent';
78
import PastProgramsComponent from '../components/volunteer/PastProgramsComponent';
89
import FooterComponent from '../components/home/footer/FooterComponent'
@@ -22,6 +23,7 @@ class VolunteerPage extends Component {
2223

2324
<BannerComponent />
2425
<RolesComponent roles={this.props.data.roles} />
26+
<VolunteerProgramsComponent data={this.props.data.volunteerPrograms} />
2527
<UpcomingProgramsComponent programs={this.props.data.upcomingPrograms} />
2628
<PastProgramsComponent programs={this.props.data.pastPrograms} />
2729
<FooterComponent data={this.props.data.site} />
@@ -80,6 +82,26 @@ export const pageQuery = graphql`
8082
}
8183
}
8284
}
85+
86+
volunteerPrograms: allMarkdownRemark(
87+
filter: {
88+
fileAbsolutePath: {regex: "/volunteer_programs/"}
89+
}
90+
) {
91+
edges {
92+
node {
93+
html
94+
frontmatter {
95+
title
96+
image {
97+
relativePath
98+
}
99+
description
100+
}
101+
}
102+
}
103+
}
104+
83105
site {
84106
buildTimeZone
85107
}

0 commit comments

Comments
 (0)