Skip to content

Commit 05b4c46

Browse files
Wolfjawankkarimi
Wolfjawan
authored and
kkarimi
committed
new design (#52)
1 parent f3966a4 commit 05b4c46

File tree

9 files changed

+90
-154
lines changed

9 files changed

+90
-154
lines changed

‎src/Components/forms/data.json

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -136,17 +136,7 @@
136136
},
137137
{ "id": "iuhiygutf4w3", "name": "", "level": "", "label": "Other" }
138138
],
139-
"GuidePeopleThList": ["A. Guide people", "None", "Some", "Part of a job"],
140-
"TechSkillThList": [
141-
"B. Teach people coding or UX",
142-
"None",
143-
"Some",
144-
"Part of a job"
145-
],
146-
"OtherSkillThList": [
147-
"C. Help run Code Your Future",
148-
"None",
149-
"Some",
150-
"Part of a job"
151-
]
139+
"GuidePeopleThList": ["A. Guide people"],
140+
"TechSkillThList": ["B. Teach people coding or UX"],
141+
"OtherSkillThList": ["C. Help run Code Your Future"]
152142
}

‎src/Components/forms/index.css

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -70,13 +70,14 @@
7070
.form-table {
7171
width: 80%;
7272
}
73-
.form-table-tr {
74-
height: 30px;
75-
margin: 60px 0 !important;
76-
}
77-
.form-table-tr:hover {
78-
border-bottom: 0.01px solid rgb(194, 193, 193);
73+
.form-table-tr-desktop {
74+
border: 1px solid rgb(194, 193, 193);
75+
width: 100% !important;
76+
margin: 10px 0;
77+
padding: 20px;
78+
border-radius: 5px;
7979
}
80+
8081
.form-table-tr-is-empty {
8182
border: 1px solid rgb(250, 26, 26) !important;
8283
}
@@ -103,11 +104,12 @@
103104
cursor: pointer;
104105
text-decoration: underline;
105106
}
106-
.desktop {
107-
display: table-row;
108-
}
109-
.media {
110-
display: none;
107+
.form-table {
108+
border: 1px solid rgb(194, 193, 193);
109+
width: 50%;
110+
margin: 10px 0;
111+
padding: 20px;
112+
border-radius: 5px;
111113
}
112114
.errors {
113115
color: #ff0b0b;
@@ -125,6 +127,25 @@
125127
.modal-footer {
126128
justify-content: space-around !important;
127129
}
130+
.check-list-header {
131+
font-size: 20px;
132+
font-weight: bold;
133+
}
134+
.check-list-single-footer {
135+
font-size: 12px;
136+
color: #575757;
137+
margin: 0%;
138+
}
139+
.radio-group {
140+
display: flex;
141+
flex-wrap: wrap;
142+
margin-top: 10px;
143+
}
144+
.radio-btn {
145+
border: 1px solid rgb(194, 193, 193);
146+
width: 100%;
147+
text-align: left;
148+
}
128149
@media screen and (max-width: 1000px) {
129150
.media {
130151
display: block;
@@ -161,13 +182,13 @@
161182
.form-table-thead {
162183
width: 100% !important;
163184
}
164-
.media-radio-group {
185+
.radio-group {
165186
width: 100%;
166187
}
167188
.media-radio-item {
168189
width: 30%;
169190
}
170-
.form-table-tr-media {
191+
.form-table {
171192
border: 1px solid rgb(194, 193, 193);
172193
width: 100% !important;
173194
margin: 10px 0;

‎src/Components/forms/inputs/tableTb/media.js renamed to ‎src/Components/forms/inputs/checkListB.js

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import React, { Fragment } from 'react'
2-
import ListsData from '../../data.json'
3-
import CheckBox from '../CheckBox'
2+
import ListsData from '../data.json'
3+
import CheckBox from './CheckBox'
44

55
export default ({ onChange, list, name }) => {
66
return (
77
<Fragment>
88
{list.map(listItem => (
9-
<tr
9+
<div
1010
key={listItem.label}
11-
className={`media form-table-tr-media ${listItem.level ===
12-
"It's empty" && 'form-table-tr-is-empty'}`}
11+
className={`form-table ${listItem.level === "It's empty" &&
12+
'form-table-tr-is-empty'}`}
1313
>
14-
<td className="form-table-td-media">
14+
<div className="form-table-single">
1515
<CheckBox
1616
value={listItem.id}
1717
onChange={e => onChange(e, name)}
@@ -21,13 +21,12 @@ export default ({ onChange, list, name }) => {
2121
id={`media${listItem.id}`}
2222
/>
2323
{listItem.name === listItem.label ? (
24-
<span className="media-radio-group">
25-
<hr />
24+
<span className="radio-group">
2625
{listItem.label !== 'Other' ? (
2726
ListsData.radioButtonList.map(item => (
2827
<label
2928
htmlFor={`media${listItem.id}${item._id}`}
30-
className="media media-radio-btn"
29+
className="btn radio-btn"
3130
key={item._id}
3231
>
3332
<input
@@ -53,12 +52,15 @@ export default ({ onChange, list, name }) => {
5352
onChange={e => onChange(e, name)}
5453
/>
5554
)}
55+
{listItem.label !== 'Other' && (
56+
<p className="check-list-single-footer">Choose your level</p>
57+
)}
5658
</span>
5759
) : (
5860
''
5961
)}
60-
</td>
61-
</tr>
62+
</div>
63+
</div>
6264
))}
6365
</Fragment>
6466
)

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, { Fragment } from 'react'
2+
3+
export default ({ list }) => {
4+
return (
5+
<Fragment>
6+
{list &&
7+
list.map((item, i) => (
8+
<div className="check-list-header" key={`${i}${item}`}>
9+
{item}
10+
</div>
11+
))}
12+
</Fragment>
13+
)
14+
}

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

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ import PhoneNumber from './phoneNumber'
44
import DropDown from './dropDown'
55
import TextInput from './textInput'
66
import TextArea from './textArea'
7-
import Table from './table'
8-
import TableTb from './tableTb'
9-
import TableTh from './tableTh'
7+
import CheckListB from './checkListB'
8+
import CheckListH from './checkListH'
109

1110
export default class VolunteerForm extends Component {
1211
render() {
@@ -31,26 +30,6 @@ export default class VolunteerForm extends Component {
3130
otherSkill
3231
} = this.props
3332

34-
const GuidePeopleTh = <TableTh list={ListsData.GuidePeopleThList} />
35-
const GuidePeopleTb = (
36-
<TableTb
37-
onChange={onChangeCheckList}
38-
list={guidePeople}
39-
name="guidePeople"
40-
/>
41-
)
42-
const TechSkillTh = <TableTh list={ListsData.TechSkillThList} />
43-
const TechSkillTb = (
44-
<TableTb onChange={onChangeCheckList} list={techSkill} name="techSkill" />
45-
)
46-
const OtherSkillTh = <TableTh list={ListsData.OtherSkillThList} />
47-
const OtherSkillTb = (
48-
<TableTb
49-
onChange={onChangeCheckList}
50-
list={otherSkill}
51-
name="otherSkill"
52-
/>
53-
)
5433
return (
5534
<Fragment>
5635
<div className="form-section-one">
@@ -141,9 +120,30 @@ export default class VolunteerForm extends Component {
141120
What would you like help Code Your Future with, and what is your level
142121
of experience?
143122
</p>
144-
<Table componentTb={GuidePeopleTb} componentTh={GuidePeopleTh} />
145-
<Table componentTb={TechSkillTb} componentTh={TechSkillTh} />
146-
<Table componentTb={OtherSkillTb} componentTh={OtherSkillTh} />
123+
<div>
124+
<CheckListH list={ListsData.GuidePeopleThList} />
125+
<CheckListB
126+
onChange={onChangeCheckList}
127+
list={guidePeople}
128+
name="guidePeople"
129+
/>
130+
</div>
131+
<div>
132+
<CheckListH list={ListsData.TechSkillThList} />
133+
<CheckListB
134+
onChange={onChangeCheckList}
135+
list={techSkill}
136+
name="techSkill"
137+
/>
138+
</div>
139+
<div>
140+
<CheckListH list={ListsData.OtherSkillThList} />
141+
<CheckListB
142+
onChange={onChangeCheckList}
143+
list={otherSkill}
144+
name="otherSkill"
145+
/>
146+
</div>
147147
</Fragment>
148148
)
149149
}

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

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

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

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

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

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

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

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

0 commit comments

Comments
 (0)