Skip to content

Commit c2d40ba

Browse files
favour-chibuezefavour-chibueze
authored
Merge branch 'master' into frontendstudygroup-master
2 parents 830efb9 + f337185 commit c2d40ba

File tree

9 files changed

+200
-146
lines changed

9 files changed

+200
-146
lines changed

‎src/components/ContactUs/Contact.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
border-bottom: 3px solid rgb(0, 122, 124);
1919
}
2020

21-
2221
.sendMessageButton {
2322
color: rgb(0, 122, 124);
2423
font-size: 20px;
@@ -37,12 +36,11 @@
3736
background: rgb(0, 122, 124);
3837
color: #fff;
3938
}
40-
.formSuccessMessage{
39+
.formSuccessMessage {
4140
text-align: center;
4241
padding: 8px 0px;
4342
}
4443

45-
4644
@media (max-width: 875px) {
4745
/*Mobile View */
4846
.form {

‎src/components/Footer/Footer.css

Lines changed: 45 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,59 @@
1-
.footer{
2-
position: relative;
3-
height: 305px;
4-
background: #131212;
5-
}
6-
.footer-items{
7-
display: flex;
8-
flex-wrap: wrap;
9-
justify-content: space-evenly;
10-
padding-top: 20px;
11-
1+
.footer {
2+
position: relative;
3+
height: 305px;
4+
background: #131212;
125
}
13-
.frontEnd-logo{
14-
width: 15vw;
15-
height: 25vh;
16-
6+
.footer-items {
7+
display: flex;
8+
flex-wrap: wrap;
9+
justify-content: space-evenly;
10+
padding-top: 20px;
1711
}
18-
.icons > a{
19-
color: #A3A9A4;
20-
padding: 20px;
21-
12+
.frontEnd-logo {
13+
width: 15vw;
14+
height: 25vh;
2215
}
23-
.icons > a >i{
24-
font-size: 2em;
25-
16+
.icons > a {
17+
color: #a3a9a4;
18+
padding: 20px;
2619
}
27-
.icons{
28-
display: flex;
29-
20+
.icons > a > i {
21+
font-size: 2em;
3022
}
31-
32-
.info > p{
33-
color: #A3A9A4;
34-
font-size: 18px;
35-
}
36-
.info > a{
37-
color:#71b6f6;
23+
.icons {
24+
display: flex;
3825
}
3926

40-
.copyright > p{
41-
color: #A3A9A4;
42-
padding-top: 50px;
43-
text-align: center;
27+
.info > p {
28+
color: #a3a9a4;
29+
font-size: 18px;
4430
}
45-
.copyright > p >a{
46-
color:#71b6f6;
31+
.info > a {
32+
color: #71b6f6;
4733
}
4834

49-
@media (max-width: 875px){
50-
.frontEnd-logo{
51-
width: 29vw;
52-
height: 15vh;
53-
padding:10px;
35+
.copyright > p {
36+
color: #a3a9a4;
37+
padding-top: 50px;
38+
text-align: center;
5439
}
55-
.footer-items{
56-
flex-direction: column-reverse;
57-
align-content: space-around;
58-
40+
.copyright > p > a {
41+
color: #71b6f6;
5942
}
6043

61-
.copyright > p{
62-
font-size: 10px;
63-
padding-top: 0px;
44+
@media (max-width: 875px) {
45+
.frontEnd-logo {
46+
width: 29vw;
47+
height: 15vh;
48+
padding: 10px;
49+
}
50+
.footer-items {
51+
flex-direction: column-reverse;
52+
align-content: space-around;
53+
}
54+
55+
.copyright > p {
56+
font-size: 10px;
57+
padding-top: 0px;
58+
}
6459
}
65-
}

‎src/components/Resources/Resources.css

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,36 @@
1+
.container {
2+
padding: 30px 80px 80px;
3+
}
4+
15
.grid {
26
display: grid;
3-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
4-
grid-gap: 182px;
5-
align-items: justify;
6-
padding: 30px 80px 30px 80px;
7+
grid-template-columns: repeat(3, 1fr);
8+
grid-template-rows: repeat(4, 1fr);
9+
grid-column-gap: 72px;
10+
grid-row-gap: 53px;
11+
align-items: center;
712
}
813
.grid > article {
9-
border: 1px solid #ccc;
10-
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
11-
width: 110%;
14+
box-shadow: 2px 2px 6px 0px rgb(0 0 0 / 30%);
15+
width: 100%;
16+
padding: 16px 40px;
17+
height: 300px;
18+
border: none;
1219
display: flex;
1320
flex-direction: column;
1421
justify-content: space-between;
1522
}
1623

17-
.text {
18-
padding: 13px 41px 20px;
24+
article h1 {
1925
text-align: center;
20-
margin-top: 20px;
26+
margin-top: 12px;
27+
font-size: 22px;
28+
margin-bottom: 0;
29+
color: rgb(0, 122, 124);
30+
}
31+
32+
.text {
33+
text-align: justify;
2134
}
2235

2336
.resourceLink {
@@ -33,3 +46,17 @@
3346
.resourceLink:hover {
3447
background-color: rgba(0, 122, 124, 0.8);
3548
}
49+
50+
@media (max-width: 875px) {
51+
/*Mobile View */
52+
53+
.grid {
54+
display: block;
55+
}
56+
57+
.grid > article {
58+
margin-top: 37px;
59+
height: 350px;
60+
}
61+
}
62+

‎src/components/Resources/Resources.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,24 @@ import Disclaimer from "../Disclaimer/Disclaimer";
99
export default function Resources() {
1010

1111
return (
12-
<>
12+
<div className="container">
1313
<Toggle />
1414
<div className="grid">
1515
{
1616
ResourcesList.map(resource =>
1717
<article key={resource.id}>
18-
<div className="text">{resource.name}
19-
</div>
18+
<h1>{resource.name}</h1>
19+
<p className="text">{resource.body}
20+
</p>
2021
<Link className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>
22+
2123
</article>)}
2224
</div>
2325
<Disclaimer />
24-
</>
26+
</> </article>)
27+
}
28+
</div>
29+
30+
</div>
2531
);
2632
}

‎src/components/Resources/TableView.css

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
1-
.table {
2-
text-align: center;
3-
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
4-
border-collapse: collapse;
5-
border: 0px solid #ddd;
6-
width: 100%;
7-
padding: 40px 0px 0px 500px;
8-
}
9-
10-
.table td, .table th {
11-
border: 1px solid #ddd;
12-
padding: 40px;
13-
padding-right: 78px;
14-
}
15-
16-
.table tr:nth-child(even){background-color: #f2f2f2;}
17-
18-
.table tr:hover {background-color: #ddd;}
19-
20-
.table th {
21-
padding-top: 12px;
22-
padding-bottom: 12px;
23-
text-align: center;
24-
background-color: #4CAF50;
25-
color: white;
26-
}
27-
1+
table {
2+
text-align: center;
3+
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
4+
border-collapse: collapse;
5+
margin: auto;
6+
margin-bottom: 45px;
7+
}
8+
9+
table td,
10+
table th {
11+
border: 1px solid #ddd;
12+
padding: 40px;
13+
padding-right: 78px;
14+
}
15+
16+
table tr:nth-child(even) {
17+
background-color: #f2f2f2;
18+
}
19+
20+
table tr:hover {
21+
background-color: #ddd;
22+
}
23+
24+
table th {
25+
padding-top: 12px;
26+
padding-bottom: 12px;
27+
text-align: center;
28+
background-color: rgb(0, 122, 124);
29+
color: white;
30+
}

‎src/components/Resources/TableView.js

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,25 @@ import Toggle from "../Toggle";
77
export default function TableView() {
88

99
return (
10-
<>
10+
<div className="container">
1111
<Toggle />
12-
<div className="table">
13-
<th>ID</th>
14-
<th>Name</th>
15-
<th>URL</th>
16-
{
17-
ResourcesList.map(resource =>
18-
19-
<tr key={resource.id}>
20-
<td>{resource.id}</td>
21-
<td>{resource.name}</td>
22-
<td>{<Link className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>}</td>
23-
</tr>
24-
25-
)
26-
}
27-
28-
</div>
29-
</>
12+
<table>
13+
<th>ID</th>
14+
<th>Name</th>
15+
<th>URL</th>
16+
{
17+
ResourcesList.map(resource =>
18+
19+
<tr key={resource.id}>
20+
<td>{resource.id}</td>
21+
<td>{resource.name}</td>
22+
<td>{<Link className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>}</td>
23+
</tr>
24+
25+
)
26+
}
27+
</table>
28+
29+
</div>
3030
);
3131
}

‎src/components/Toggle.css

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
1+
.flex {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
padding-bottom: 28px;
6+
}
7+
8+
.flex h1 {
9+
border-bottom: 3px solid rgb(0, 122, 124);
10+
font-size: 40px;
11+
padding-bottom: 17px;
12+
}
13+
114
.flex-container {
215
display: flex;
316
justify-content: flex-end;
17+
margin: 0 0 17px 0;
418
}
519

6-
.flex-container > button{
20+
.flex-container > button {
721
background-color: white;
822
width: 50px;
923
height: 50px;
1024
text-align: center;
11-
}
25+
cursor: pointer;
26+
}

‎src/components/Toggle.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@ import './Toggle.css';
88
export default function Toggle(){
99
const history = useHistory();
1010
return (
11-
<>
11+
<div className="flex">
12+
<h1>Open Source Programs</h1>
1213
<div className="flex-container">
13-
1414
<button onClick={() => history.push('/TableView')}><img alt ="table" src={table}></img></button>
1515
<button onClick={() => history.push('/resources')}><img alt ="card" src={card}></img></button>
1616

1717
</div>
18-
</>
18+
19+
</div>
1920

2021
);
2122

0 commit comments

Comments
 (0)