Skip to content

Commit 93cba7f

Browse files
WolfjawanWolfjawan
committed
add mobile view
1 parent 383ef9e commit 93cba7f

File tree

15 files changed

+236
-105
lines changed

15 files changed

+236
-105
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"react-rte": "^0.16.1",
2828
"react-scripts": "^3.0.1",
2929
"react-show-more-list": "^0.5.2",
30+
"reactstrap": "^8.0.1",
3031
"redux": "^4.0.4",
3132
"redux-thunk": "^2.3.0"
3233
},

‎src/Components/forms/header.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ export default ({ err }) => {
66
<span className="form-header">Volunteer Application Form</span>
77
<hr />
88
<p className="form-description">
9-
Thank you for your interest. In order to ensure we’re a great fit,
10-
please complete the form below:
9+
Thank you for your interest! To ensure we’re a great fit, please
10+
complete the form below:
1111
</p>
1212
{err && (
1313
<p className="error">

‎src/Components/forms/index.css

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
}
8383
.form-table-td {
8484
padding: 0% !important;
85-
padding-left: 45px !important;
85+
padding-left: 30px !important;
8686
border: none !important;
8787
}
8888
.volunteer-submit-btn {
@@ -103,5 +103,75 @@
103103
cursor: pointer;
104104
text-decoration: underline;
105105
}
106+
.desktop {
107+
display: table-row;
108+
}
109+
.media {
110+
display: none;
111+
}
106112
@media screen and (max-width: 1000px) {
113+
.media {
114+
display: block;
115+
}
116+
.desktop {
117+
display: none;
118+
}
119+
.form-container {
120+
width: 100%;
121+
}
122+
.form-header {
123+
font-size: 26px;
124+
line-height: 22px;
125+
}
126+
.form-description {
127+
font-size: 20px;
128+
line-height: 20px;
129+
}
130+
.form-section-one {
131+
display: block;
132+
}
133+
.form-group {
134+
max-height: 100%;
135+
min-width: 100%;
136+
max-width: 100%;
137+
}
138+
.form-table {
139+
width: 100% !important;
140+
padding: 10px !important;
141+
}
142+
.form-table-tbody {
143+
width: 100% !important;
144+
}
145+
.form-table-thead {
146+
width: 100% !important;
147+
}
148+
.media-radio-group {
149+
width: 100%;
150+
}
151+
.media-radio-item {
152+
width: 30%;
153+
}
154+
.form-table-tr-media {
155+
border: 1px solid rgb(194, 193, 193) !important;
156+
width: 100% !important;
157+
margin: 10px 0;
158+
padding: 20px;
159+
border-radius: 5px;
160+
}
161+
.form-table-td-media {
162+
border: 0.01px solid rgba(194, 193, 193, 0) !important;
163+
padding: 0 !important;
164+
width: 500px !important;
165+
}
166+
.media-radio-btn {
167+
border: 1px solid rgba(194, 193, 193);
168+
width: 100%;
169+
white-space: nowrap;
170+
padding: 10px;
171+
border-radius: 5px;
172+
background-color: #f5f5f5;
173+
}
174+
.form-table-td {
175+
padding-left: 0px !important;
176+
}
107177
}

‎src/Components/forms/index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,11 @@ class Forms extends Component {
141141
<h4>
142142
Welcome {volunteer.firstName} {volunteer.lastName}
143143
</h4>
144-
<p>CODE YOUR FUTURE will contact as soon as possible.</p>
144+
<p>
145+
Thank you for submitting your application to Code Your Future to
146+
become a volunteer. We will review your application and contact you
147+
via email within 10 days.
148+
</p>
145149
</div>
146150
)
147151
}

‎src/Components/forms/inputs/CheckBox.js

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import React from 'react'
2+
import { FormGroup, Label, Input } from 'reactstrap'
23

34
export default ({ value, onChange, isEmpty, label, name, checked, id }) => {
45
return (
5-
<div className="form-check">
6-
<input
7-
className={`form-check-input ${isEmpty && 'is-empty'}`}
8-
type="checkbox"
9-
name={name}
10-
id={id}
11-
value={value}
12-
onChange={onChange}
13-
checked={checked}
14-
></input>
15-
<label htmlFor={id} className="form-check-label">
6+
<FormGroup check>
7+
<Label check htmlFor={id}>
8+
<Input
9+
className={`form-check-input ${isEmpty && 'is-empty'}`}
10+
type="checkbox"
11+
name={name}
12+
id={id}
13+
value={value}
14+
onChange={onChange}
15+
checked={checked}
16+
/>{' '}
1617
{label}
17-
</label>
18-
</div>
18+
</Label>
19+
</FormGroup>
1920
)
2021
}

‎src/Components/forms/inputs/index.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,17 +109,17 @@ export default class VolunteerForm extends Component {
109109
isEmpty={errors.interestedInVolunteer}
110110
label="Why are you interested in volunteering? *"
111111
name="interestedInVolunteer"
112-
placeholder="Text..."
113-
type="text"
112+
placeholder="Just a sentence or two requested..."
113+
type="textarea"
114114
/>
115115
<TextArea
116116
onChange={onChange}
117117
value={interestedInCYF}
118118
isEmpty={errors.interestedInCYF}
119119
label="Why are you interested in Code Your Future? *"
120120
name="interestedInCYF"
121-
placeholder="Text..."
122-
type="text"
121+
placeholder="Just a sentence or two requested..."
122+
type="textarea"
123123
/>
124124
<DropDown
125125
onChange={onChange}

‎src/Components/forms/inputs/radioButton.js

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/Components/forms/inputs/table.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import React from 'react'
33
export default props => {
44
return (
55
<table className="form-table table">
6-
<thead>{props.componentTh}</thead>
7-
<tbody>{props.componentTb}</tbody>
6+
<thead className="form-table-thead">{props.componentTh}</thead>
7+
<tbody className="form-table-tbody">{props.componentTb}</tbody>
88
</table>
99
)
1010
}

‎src/Components/forms/inputs/tableTb.js

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎src/Components/forms/inputs/tableTb/desktop.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React, { Fragment } from 'react'
2+
import ListsData from '../../data.json'
3+
import CheckBox from '../CheckBox'
4+
export default ({ onChange, list, name }) => {
5+
return (
6+
<Fragment>
7+
{list.map(listItem => (
8+
<tr
9+
className={`form-table-tr desktop ${listItem.level === "It's empty" &&
10+
'form-table-tr-is-empty'}`}
11+
>
12+
<td className="form-table-td row">
13+
<CheckBox
14+
value={listItem.id}
15+
onChange={e => onChange(e, name)}
16+
label={listItem.label}
17+
name={listItem.label}
18+
checked={listItem.name === listItem.label}
19+
id={listItem.id}
20+
/>
21+
{listItem.label === 'Other' && (
22+
<input
23+
type="text"
24+
name={listItem.label}
25+
placeholder={` Other`}
26+
className="ml-5"
27+
value={listItem.level === "It's empty" ? '' : listItem.level}
28+
onChange={e => onChange(e, name)}
29+
/>
30+
)}
31+
</td>
32+
{listItem.label !== 'Other' &&
33+
ListsData.radioButtonList.map(item => (
34+
<td className="form-table-td" key={item._id}>
35+
<input
36+
type="radio"
37+
name={listItem.label}
38+
onChange={e => onChange(e, name)}
39+
value={item._id}
40+
id={item._id}
41+
checked={listItem.level === item._id}
42+
/>
43+
</td>
44+
))}
45+
</tr>
46+
))}
47+
</Fragment>
48+
)
49+
}

0 commit comments

Comments
 (0)