Skip to content

Commit a9b2620

Browse files
sexta13bbmoz
sexta13
authored and
bbmoz
committed
Landing-D with backend (#209)
* feature #155111485- Visitor sees landing page(Section F) * some changes in app.js * changes in landingf.js * fixed error * remove first 2 lines * commented out the images * deleted 2 video images * put images back with closing tag * changed the landingf * some changes again * changed class names * changed linkedin class * styles added to social media * some changes * column1 changed * removed <a> tag * removed few links * added links * fixed error * another bug * changed logo image * font-size * changed some css * changes in margin and padding * column width change * fixing test bugs * few more bugs fixed * bug * decreased spacing between columns * fixed spacing bet columns * made changes based on review * LandingF and landing E * fixed the alignment on the button * fixed link issue in button * feature #155111485- Visitor sees landing page(Section F) * some changes in app.js * changes in landingf.js * fixed error * remove first 2 lines * commented out the images * put images back with closing tag * some changes again * changed class names * changed linkedin class * styles added to social media * some changes * column1 changed * removed <a> tag * removed few links * fixed error * changed logo image * font-size * few more bugs fixed * decreased spacing between columns * fixed spacing bet columns * fixed conflicts * few more conflicts resolved * landing D page * Landing D fixes * remove first 2 lines * deleted an image * fixed conflicts * Backend of landing D page * fix column style
1 parent 65448ae commit a9b2620

File tree

13 files changed

+264
-11
lines changed

13 files changed

+264
-11
lines changed

‎.eslintrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"browser": true
88
},
99
"rules": {
10-
"prefer-const": 2
10+
"prefer-const": 2
1111
},
1212
"plugins": [
1313
"react"

‎.setup/db/seedData/projects.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"causes": ["Animal"],
99
"technologies": ["JavaScript"],
1010
"applications": [],
11+
"imageUrl": "https://images.unsplash.com/photo-1517476417305-21d49f984355?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3f86c41b2363dff6436d3f94f0d12994&auto=format&fit=crop&w=500&q=60",
1112
"createdAt": { "$date": "2018-01-29T21:03:46.266Z" },
1213
"updatedAt": { "$date": "2018-01-29T21:03:46.266Z" },
1314
"__v": 0
@@ -23,6 +24,7 @@
2324
"applications": [
2425
{ "$oid": "5a1658a0327c0286c39a1aaa" }
2526
],
27+
"imageUrl": "https://images.unsplash.com/photo-1504113897779-231f76737a4e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f264bf40175453d2130f7d354122bfb6&auto=format&fit=crop&w=500&q=60",
2628
"createdAt": { "$date": "2018-01-29T21:03:46.266Z" },
2729
"updatedAt": { "$date": "2018-01-29T21:03:46.266Z" },
2830
"__v": 0
@@ -36,6 +38,7 @@
3638
"causes": ["International NGO"],
3739
"technologies": ["Java"],
3840
"applications": [],
41+
"imageUrl": "https://images.unsplash.com/photo-1501675423372-9bfa95849e62?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7b897a182136b934563ed43d435b6981&auto=format&fit=crop&w=1500&q=80",
3942
"createdAt": { "$date": "2018-01-29T21:03:46.266Z" },
4043
"updatedAt": { "$date": "2018-01-29T21:03:46.266Z" },
4144
"__v": 0

‎client/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import ProjectDetail from './components/Project/ProjectDetail'
1919
import Footer from './components/LandingF/LandingF'
2020
import LandingB from './components/LandingB/LandingB'
2121
import LandingE from './components/LandingE/LandingE'
22+
import LandingD from './components/LandingD/LandingD'
2223

2324
// set up components for lazy loading
2425
const ProfileRestrictedLoadable = restricted(Loadable({
@@ -60,6 +61,7 @@ class App extends Component {
6061
<Route path='/landing-b' component={LandingB} />
6162
<Route path='/landing-f' component={Footer} />
6263
<Route path='/landing-e' component={LandingE} />
64+
<Route path='/landing-d' component={LandingD} />
6365
<Route path='/show-applications' component={ApplicationsRestrictedLoadable} />
6466
<Route path='/projects/:id' component={ProjectDetail} />
6567
</Switch>

‎client/actions/project/index.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,4 +107,22 @@ export default class ProjectActionCreator {
107107
}
108108
}
109109
}
110+
static getRecentProjects (nrOfProjects) {
111+
return async (dispatch, getState) => {
112+
dispatch({type: actionTypes.GET_RECENT_PROJECTS_START})
113+
114+
try {
115+
const state = getState()
116+
const apiOptions = apiOptionsFromState(state)
117+
const projects = await projectsApiClient.getRecentProjects(apiOptions, nrOfProjects)
118+
dispatch({type: actionTypes.GET_RECENT_PROJECTS_SUCCESS, payload: projects})
119+
} catch (e) {
120+
console.trace(e)
121+
dispatch({
122+
type: actionTypes.GET_RECENT_PROJECTS_FAILED,
123+
payload: e,
124+
error: true})
125+
}
126+
}
127+
}
110128
}

‎client/actions/project/types.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,7 @@ export const FAILED_PROJECTS = 'FAILED_PROJECTS'
55
export const CREATE_PROJECT_START = 'CREATE_PROJECT_START'
66
export const CREATE_PROJECT_FAILED = 'CREATE_PROJECT_FAILED'
77
export const CREATE_PROJECT_SUCCESS = 'CREATE_PROJECT_SUCCESS'
8+
9+
export const GET_RECENT_PROJECTS_START = 'GET_RECENT_PROJECTS_START'
10+
export const GET_RECENT_PROJECTS_FAILED = 'GET_RECENT_PROJECTS_FAILED'
11+
export const GET_RECENT_PROJECTS_SUCCESS = 'GET_RECENT_PROJECTS_SUCCESS'

‎client/api/projects.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ const projectsApiClient = {
55
return apiRequest.get('/projects', apiOptions)
66
},
77

8+
getRecentProjects (apiOptions, nrOfProjects) {
9+
const query = { quantity: nrOfProjects }
10+
return apiRequest.get('/projects/recent', apiOptions, query)
11+
},
12+
813
getAppliedProjects (apiOptions, projectsAppliedFor) {
914
const query = { projectsAppliedFor }
1015
return apiRequest.get('/projects', apiOptions, query)

‎client/components/LandingD/LandingD.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React, { Component } from 'react'
2+
import PropTypes from 'prop-types'
3+
import { Link } from 'react-router-dom'
4+
import Button from 'material-ui/Button'
5+
import styles from './LandingD.scss'
6+
import { connect } from 'react-redux'
7+
import ProjectActionCreator from '../../actions/project'
8+
9+
class LandingD extends Component {
10+
constructor (props) {
11+
super(props)
12+
this.renderProject = this.renderProject.bind(this)
13+
}
14+
componentDidMount () {
15+
this.props.loadRecentProjects(3)
16+
}
17+
renderProject (project) {
18+
const { id, name, imageUrl } = project
19+
return (
20+
<div key={id} className={styles.column}>
21+
<img src={imageUrl}
22+
alt="project 1" className={styles.project1}/>
23+
<h6 className={styles.projectTitle}>{name}</h6>
24+
<p className={styles.projectDetails}>
25+
{name}
26+
</p>
27+
<Button to={`/projects/${id}`} component={Link} className={styles.learnMore}>
28+
Learn More
29+
</Button>
30+
</div>)
31+
}
32+
render () {
33+
return (
34+
<div className={styles.container}>
35+
<h1 className={styles.header}>
36+
Changing the world, one project at a time
37+
</h1>
38+
39+
<div className={styles.subcontainer}>
40+
{this.props.recentProjects.projects &&
41+
this.props.recentProjects.projects.map(this.renderProject)}
42+
</div>
43+
44+
<div className={styles.viewAllContainer}>
45+
<Button to="/" component={Link} className={styles.viewAll}>
46+
VIEW ALL
47+
</Button>
48+
</div>
49+
</div>
50+
)
51+
}
52+
}
53+
function mapStateToProps (state) {
54+
return {
55+
recentProjects: state.project.recentProjects
56+
}
57+
}
58+
59+
const mapDispatchToProps = {
60+
loadRecentProjects: ProjectActionCreator.getRecentProjects
61+
}
62+
LandingD.propTypes = {
63+
loadRecentProjects: PropTypes.func.isRequired,
64+
recentProjects: PropTypes.shape({
65+
isLoading: PropTypes.bool,
66+
projects: PropTypes.array,
67+
error: PropTypes.object
68+
})
69+
}
70+
71+
export default connect(mapStateToProps, mapDispatchToProps)(LandingD)

‎client/components/LandingD/LandingD.scss

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
@import "../../scss/partials/partials";
2+
3+
$black: #000;
4+
$bottom-red: #ff3e3e;
5+
$top-red: #e74e2b;
6+
$white: #fff;
7+
$dark: #212121;
8+
$blue: #79c3fd;
9+
$coolgrey: #9fa3a7;
10+
11+
12+
.container {
13+
left: 0;
14+
right: 0;
15+
padding: 20px 20px;
16+
position: absolute;
17+
}
18+
19+
.subcontainer {
20+
display: grid;
21+
grid-template-columns: auto auto auto;
22+
justify-content: center;
23+
align-items: center;
24+
grid-column-gap: 40px;
25+
}
26+
27+
img.project1 {
28+
border-top-left-radius:8px;
29+
border-top-right-radius: 8px;
30+
width: 360px;
31+
height: 252px;
32+
}
33+
34+
.projectDetails {
35+
text-align: center;
36+
font-size: 14px;
37+
line-height: 35px;
38+
width: 269px;
39+
margin:10px 55px;
40+
color:$coolgrey;
41+
42+
}
43+
44+
.projectTitle {
45+
color: $dark;
46+
height: 32px;
47+
text-align: center;
48+
margin-top: 15px;
49+
font-size: 22px;
50+
line-height: 1.45;
51+
font-weight: normal;
52+
53+
}
54+
.header {
55+
object-fit: contain;
56+
font-size: 36px;
57+
font-weight: normal;
58+
font-style: normal;
59+
font-stretch: normal;
60+
line-height: 1.33;
61+
letter-spacing: normal;
62+
text-align: center;
63+
color: #212121;
64+
}
65+
66+
.column{
67+
margin-top: 103px;
68+
width: 360px;
69+
height:477px;
70+
border-radius: 8px;
71+
background-color: #f9f9f9;
72+
box-shadow: 0 2px 80px 0 rgba(0, 0, 0, 0.11);
73+
grid-template-columns: 1fr 1fr 1fr;
74+
grid-gap: 40px;
75+
}
76+
77+
a.learnMore {
78+
width: 178px;
79+
height: 44px;
80+
object-fit: contain;
81+
border-radius: 200px;
82+
background-color: #79c3fd;
83+
color: $white;
84+
letter-spacing: 1.3px;
85+
font-size: 12px;
86+
margin: 10px -50px;
87+
left: 40%;
88+
}
89+
90+
91+
@mixin centerer {
92+
position: absolute;
93+
top: 50%;
94+
left: 50%;
95+
transform: translate(-50%, -50%);
96+
}
97+
98+
.viewAllContainer {
99+
position: relative;
100+
}
101+
102+
a.viewAll {
103+
@include centerer;
104+
margin-top: 100px;
105+
border-radius: 1.2px;
106+
background: $top-red;
107+
padding: 23px 52px;
108+
box-shadow: 0 5px 96px 0 rgba(0, 0, 0, 0.1);
109+
110+
&:active,
111+
&:hover,
112+
&:focus {
113+
background: $top-red;
114+
}
115+
116+
span {
117+
color: #ffffff;
118+
font-size: 18px;
119+
font-weight: bold;
120+
letter-spacing: 3px;
121+
}
122+
}

‎client/components/LandingF/LandingF.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ class Footer extends React.Component {
2323
<li className={styles.about}><a href="#" className={styles.link}>About</a></li>
2424
</ul>
2525
</div>
26+
2627
</div>
2728
)
2829
}

‎client/reducers/initialState.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ export default {
1212
projects: [],
1313
error: {
1414
message: ''
15+
},
16+
recentProjects: {
17+
isLoading: false,
18+
projects: [],
19+
error: null
1520
}
1621
},
1722
users: {},

0 commit comments

Comments
 (0)