Skip to content

Commit 6fbedc2

Browse files
ltchurch88tbbmoz
ltchurch88t
authored and
bbmoz
committed
Feature/#155492498 (#195)
* Update to project grid still need changes for accurate feature requests * Revert "Update to project grid" * Grid for list of projects on home component Changes to Home, ListOfProjects, and Project in order to apply necessary style changes fo home project grid
1 parent fd6ca22 commit 6fbedc2

File tree

7 files changed

+125
-80
lines changed

7 files changed

+125
-80
lines changed

‎client/components/Home/Home.js

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -69,24 +69,27 @@ class Home extends Component {
6969

7070
render () {
7171
return (
72-
<div className={styles.homeGrid}>
73-
<section className={styles.filterSection}>
74-
<span className={styles.filterTitle}><h1>{'Filters'}</h1></span>
75-
<FormLabel className={styles.causeTitle}>Causes</FormLabel>
76-
<FormGroup className={styles.causesList}>
77-
{ this.renderList(causes, 'causes') }
78-
</FormGroup>
79-
<FormLabel className={styles.techTitle}>Tech</FormLabel>
80-
<FormGroup className={styles.techList}>
81-
{ this.renderList(technologies, 'technologies') }
82-
</FormGroup>
83-
</section>
72+
<div className={styles.homeContainer}>
73+
<div className={styles.homeGrid}>
74+
<h1 className={styles.title}>Find Projects</h1>
75+
<section className={styles.filterSection}>
76+
<span className={styles.filterTitle}><h1>{'Filters'}</h1></span>
77+
<FormLabel className={styles.causeTitle}>Causes</FormLabel>
78+
<FormGroup className={styles.causesList}>
79+
{ this.renderList(causes, 'causes') }
80+
</FormGroup>
81+
<FormLabel className={styles.techTitle}>Tech</FormLabel>
82+
<FormGroup className={styles.techList}>
83+
{ this.renderList(technologies, 'technologies') }
84+
</FormGroup>
85+
</section>
8486

85-
<ListOfProjects
86-
title={'Find Projects'}
87-
projects={this.state.filteredProjects}
88-
className={styles.projectList}
89-
/>
87+
<ListOfProjects
88+
title={'Find Projects'}
89+
projects={this.state.filteredProjects}
90+
className={styles.projectList}
91+
/>
92+
</div>
9093
</div>
9194
)
9295
}

‎client/components/Home/Home.scss

Lines changed: 38 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,45 @@
11
@import '../../scss/partials/partials';
22

3-
$titleBarColor: #f5f5f5;
4-
$titleBarRadius: 200px;
5-
$fontColor: #4b4c4d;
3+
.homeContainer {
4+
display: block;
5+
position: absolute;
6+
bottom: 0;
7+
top: 0;
8+
left: 0;
9+
right: 0;
10+
margin: 0;
11+
height: 100vh;
12+
width: 100vw;
13+
}
614

715
.homeGrid {
816
background-color: $background-gray;
917
display: grid;
10-
margin-left: -150px;
11-
grid-template-columns: auto 85%;//
18+
width: auto;
19+
height: auto;
20+
padding: 0 40px 0 40px;
21+
margin-top: 128px;
22+
grid-template-columns: 360px 975px;
1223
grid-template-areas:
24+
"title title"
1325
"filterSection projectList";
1426
}
1527

28+
.title {
29+
grid-area: title;
30+
font-size: 20px;
31+
margin: 0 0 0 -50px;
32+
padding: 15px 15px 15px 80px;
33+
color: white;
34+
width: 94vw;
35+
background-color: $backgound-orange;
36+
}
37+
1638
.projectList {
1739
grid-area: projectList;
18-
padding: 0 30px;
40+
display: grid;
41+
padding: 10px 30px 0 0;
42+
height: auto;
1943
}
2044

2145
.filterSection {
@@ -32,7 +56,7 @@ $fontColor: #4b4c4d;
3256
"techTitle"
3357
"technologies";
3458
grid-row-gap: 10px;
35-
height: 70%;
59+
height: 800px;
3660
}
3761

3862
.filterTitle {
@@ -41,26 +65,26 @@ $fontColor: #4b4c4d;
4165

4266
.causeTitle {
4367
grid-area: causeTitle;
44-
border-radius: $titleBarRadius;
45-
color: $fontColor;
68+
border-radius: $filterTitleRadius;
69+
color: $listColor;
4670
font-weight: bold;
4771
height: 30px;
4872
display: flex;
4973
align-items: center;
5074
justify-content: center;
51-
background-color: $titleBarColor;
75+
background-color: $filterTitleColor;
5276
}
5377

5478
.techTitle {
5579
grid-area: techTitle;
56-
border-radius: $titleBarRadius;
57-
color: $fontColor;
80+
border-radius: $filterTitleRadius;
81+
color: $listColor;
5882
font-weight: bold;
5983
height: 30px;
6084
display: flex;
6185
align-items: center;
6286
justify-content: center;
63-
background-color: $titleBarColor;
87+
background-color: $filterTitleColor;
6488
}
6589

6690
.causesList {
@@ -73,4 +97,4 @@ $fontColor: #4b4c4d;
7397

7498
.checkBoxes {
7599
margin-top: -2px;
76-
}
100+
}

‎client/components/ListOfProjects/ListOfProjects.js

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import React, { Component } from 'react'
22
import { connect } from 'react-redux'
33
import PropTypes from 'prop-types'
4-
import GridList, { GridListTile } from 'material-ui/GridList'
5-
import Chip from 'material-ui/Chip'
6-
74
import UserActionCreator from '../../actions/user'
85
import ApplicationActionCreator from '../../actions/application'
96
import Project from '../Project/Project'
@@ -25,35 +22,23 @@ class ListOfProjects extends Component {
2522
renderListOfProjects () {
2623
return this.props.projects.map((project, projectIndex) => {
2724
return (
28-
<GridListTile key={projectIndex}>
25+
<div className={styles.projectTile} key={projectIndex}>
2926
<Project
3027
project={project}
3128
authenticated={this.props.authenticated}
3229
applyForProject={this.applyToProject} />
33-
34-
<div className={styles.causesContainer}>
35-
{ project.causes.map((cause, chipIndex) => {
36-
return (
37-
<Chip key={`${projectIndex}${chipIndex}`}
38-
className={styles.cause}
39-
label={cause} />
40-
)
41-
})}
42-
</div>
43-
</GridListTile>
30+
</div>
4431
)
4532
})
4633
}
4734

4835
render () {
4936
return (
5037
<section className={styles.projectListSection}>
51-
<h1 className={styles.title}>{this.props.title}</h1>
52-
5338
<div className={styles.listContainer}>
54-
<GridList className={styles.list} cellHeight={'auto'} cols={3} spacing={8}>
39+
<div className={styles.list}>
5540
{ this.renderListOfProjects() }
56-
</GridList>
41+
</div>
5742
</div>
5843
</section>
5944
)

‎client/components/ListOfProjects/ListOfProjects.scss

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,21 @@
22

33
.projectListSection {
44
padding: 0 60px;
5+
width: 93%;
56
display: grid;
67
}
78

8-
.title {
9-
font-size: 20px;
10-
margin-bottom: 15px;
11-
padding: 15px;
12-
color: white;
13-
background-color: $backgound-orange;
14-
}
15-
169
.listContainer {
1710
width: 100% !important;
1811
display: flex !important;
1912
flex-wrap: wrap !important;
20-
justify-content: space-around !important;
2113
}
2214

2315
.list {
2416
width: 100% !important;
2517
}
2618

27-
.causesContainer {
28-
display: inline-flex;
29-
width: 100%;
30-
overflow-x: scroll;
31-
margin-bottom: -17px;
32-
}
33-
34-
.cause {
35-
margin-bottom: 70px;
36-
margin-right: 5px;
37-
}
19+
.projectTile {
20+
margin-bottom: 15px;
21+
display: grid;
22+
}

‎client/components/Project/Project.js

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { Component } from 'react'
22
import { connect } from 'react-redux'
33
import PropTypes from 'prop-types'
4-
import { GridListTileBar } from 'material-ui/GridList'
5-
4+
import Chip from 'material-ui/Chip'
65
import styles from './Project.scss'
76

87
class Project extends Component {
@@ -62,10 +61,20 @@ class Project extends Component {
6261
<div className={projectClasses}
6362
onClick={this.handleClick.bind(this)}>
6463
<img className={styles.image} src={project.image || require('../../images/logo.png')} />
65-
<GridListTileBar title={project.name}
66-
subtitle={isContact && isProfile ? null : project.organization.name || 'Organization Name'}
67-
actionIcon={this.renderProjectApplicationResult(project)}>
68-
</GridListTileBar>
64+
<div className={styles.projectContent}>
65+
<div className={styles.projectTitle}>{project.name}</div>
66+
<div>{isContact && isProfile ? null : project.organization.name || 'Organization Name'}</div>
67+
<div>{this.renderProjectApplicationResult(project)}</div>
68+
</div>
69+
<div className={styles.causesContainer}>
70+
{ project.causes.map((cause, chipIndex) => {
71+
return (
72+
<Chip key={`${chipIndex}`}
73+
className={styles.cause}
74+
label={cause} />
75+
)
76+
})}
77+
</div>
6978
</div>
7079
)
7180
}

‎client/components/Project/Project.scss

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
@import '../../scss/partials/partials';
22

33
.project {
4-
border-radius: 5px;
5-
color: white;
4+
background-color: white;
5+
color: black;
6+
display: grid;
7+
grid-template-areas:
8+
"img content"
9+
"img causes";
10+
grid-template-columns: 25% auto;
11+
grid-template-rows: 70% auto;
12+
grid-column-gap: 40px;
13+
padding: 20px 0 20px 40px;
14+
box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.05);
615
}
716

817
.projectAuthenticated,
@@ -15,8 +24,29 @@
1524
@extend %boxShadowSmall;
1625
}
1726

27+
.projectContent {
28+
grid-area: content;
29+
display: flex;
30+
flex-direction: column;
31+
justify-content: space-around;
32+
}
33+
34+
.causesContainer {
35+
grid-area: causes;
36+
}
37+
38+
.cause {
39+
margin-bottom: 5px;
40+
margin-right: 5px;
41+
}
42+
1843
.image {
19-
width: 100%;
44+
grid-area: img;
45+
padding-left: 30px;
46+
}
47+
48+
.projectTitle {
49+
font-size: 24px;
2050
}
2151

2252
.projectApply {
@@ -32,3 +62,4 @@
3262
@extend .projectApply;
3363
color: red;
3464
}
65+

‎client/scss/partials/_variables.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,12 @@ $backgound-orange: #ED4B2F;
1414
$background-gray: #FBFBFB;
1515
$black: black;
1616
$white: white;
17-
$grayDE: #dedede;
17+
$grayDE: #dedede;
18+
$filterTitleColor: #f5f5f5;
19+
$listColor: #4b4c4d;
20+
21+
/*
22+
* RADIUS
23+
*/
24+
25+
$filterTitleRadius: 200px;

0 commit comments

Comments
 (0)