Skip to content

Commit addb4b6

Browse files
ashgorenashgoren
authored
Merge pull request #898 from epicodus/demographics
refactor and redesign demmographics form
2 parents 4a4b174 + 7f57d67 commit addb4b6

12 files changed

Lines changed: 284 additions & 201 deletions

File tree

‎app/assets/javascripts/demographics.js‎

Lines changed: 57 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,64 @@
11
$(function() {
2-
if ($('#demographic_info_after_graduation').val() !== "I intend to start a new in-field job within 180 days of graduating the program.") {
3-
$('#time_off').hide();
4-
}
5-
if ($('#demographic_info_pronouns_other').prop('checked') === false) {
6-
$('#pronouns_blank').hide();
7-
}
8-
9-
$('#demographic_info_after_graduation').change(function() {
10-
if ($(this).val() === "I intend to start a new in-field job within 180 days of graduating the program.") {
11-
$('#time_off').show();
12-
} else {
2+
if ($('#new_demographic_info').length > 0) {
3+
COLLEGE_OR_HIGHER = ["associate's degree", "bachelor's degree", "master's degree", "doctoral degree or above", "other"];
4+
if (!COLLEGE_OR_HIGHER.includes($('#demographic_info_education').val())) {
5+
$('#cs_degree').hide();
6+
}
7+
if ($('#demographic_info_after_graduation').val() !== "I intend to start a new in-field job within 180 days of graduating the program.") {
138
$('#time_off').hide();
149
}
15-
});
16-
$('#demographic_info_pronouns_other').change(function() {
17-
if ($('#demographic_info_pronouns_other').prop('checked') === true) {
18-
$('#pronouns_blank').show();
19-
$('#demographic_info_pronouns_blank').focus();
20-
} else {
10+
if ($('#demographic_info_pronouns_other').prop('checked') === false) {
2111
$('#pronouns_blank').hide();
2212
}
23-
});
2413

25-
// enforces numbers only; adds dashes in correct places
26-
$('#demographic_info_ssn').keyup(function(event) {
27-
var selection = window.getSelection().toString();
28-
if (selection !== '' || $.inArray( event.keyCode, [38,40,37,39,8] ) !== -1) {
29-
return; // ignore arrow keys and backspace
30-
}
31-
var val = this.value.replace(/\D/g, '');
32-
var newVal = '';
33-
if(val.length > 4) {
34-
this.value = val;
35-
}
36-
if((val.length > 3) && (val.length < 6)) {
37-
newVal += val.substr(0, 3) + '-';
38-
val = val.substr(3);
39-
}
40-
if (val.length > 5) {
41-
newVal += val.substr(0, 3) + '-';
42-
newVal += val.substr(3, 2) + '-';
43-
val = val.substr(5);
44-
}
45-
newVal += val;
46-
if(newVal.length === 3 || newVal.length === 6) {
47-
newVal += '-';
48-
}
49-
this.value = newVal.substring(0, 11);
50-
});
14+
$('#demographic_info_education').change(function() {
15+
if (COLLEGE_OR_HIGHER.includes($(this).val())) {
16+
$('#cs_degree').show();
17+
} else {
18+
$('#cs_degree').hide();
19+
}
20+
});
21+
$('#demographic_info_after_graduation').change(function() {
22+
if ($(this).val() === "I intend to start a new in-field job within 180 days of graduating the program.") {
23+
$('#time_off').show();
24+
} else {
25+
$('#time_off').hide();
26+
}
27+
});
28+
$('#demographic_info_pronouns_other').change(function() {
29+
if ($('#demographic_info_pronouns_other').prop('checked') === true) {
30+
$('#pronouns_blank').show();
31+
$('#demographic_info_pronouns_blank').focus();
32+
} else {
33+
$('#pronouns_blank').hide();
34+
}
35+
});
36+
37+
// enforces numbers only; adds dashes in correct places
38+
$('#demographic_info_ssn').keyup(function(event) {
39+
var selection = window.getSelection().toString();
40+
if (selection !== '' || $.inArray( event.keyCode, [38,40,37,39,8] ) !== -1) {
41+
return; // ignore arrow keys and backspace
42+
}
43+
var val = this.value.replace(/\D/g, '');
44+
var newVal = '';
45+
if(val.length > 4) {
46+
this.value = val;
47+
}
48+
if((val.length > 3) && (val.length < 6)) {
49+
newVal += val.substr(0, 3) + '-';
50+
val = val.substr(3);
51+
}
52+
if (val.length > 5) {
53+
newVal += val.substr(0, 3) + '-';
54+
newVal += val.substr(3, 2) + '-';
55+
val = val.substr(5);
56+
}
57+
newVal += val;
58+
if(newVal.length === 3 || newVal.length === 6) {
59+
newVal += '-';
60+
}
61+
this.value = newVal.substring(0, 11);
62+
});
63+
}
5164
});

‎app/assets/stylesheets/application.css.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,9 @@
2121
@import "bootstrap-sprockets";
2222
@import "bootstrap";
2323
@import "font-awesome";
24+
25+
// @media (min-width: 1200px) {
26+
// .container {
27+
// width: 1170px; // 1170px is default
28+
// }
29+
// }

‎app/assets/stylesheets/core.css.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,6 @@ li, a {
9999
margin-top: 7rem;
100100
}
101101

102-
#demographic_info_city, #demographic_info_state {
103-
margin-right: 19px;
104-
}
105-
106102
.refund-input-group {
107103
margin-bottom: 20px;
108104
}

‎app/assets/stylesheets/demographics.css.scss‎

Lines changed: 65 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,68 @@
1-
// DELETE THIS AFTER MERGE
2-
// .form-group.required label:after {
3-
// content:"*";
4-
// color:red;
5-
// }
6-
7-
#new_demographic_info label {
8-
font-weight: bold;
9-
}
1+
#new_demographic_info {
2+
.radio, .checkbox-inline, li {
3+
label {
4+
font-weight: normal;
5+
}
6+
}
107

11-
#new_demographic_info li label {
12-
font-weight: normal;
13-
}
8+
.form-group {
9+
margin-bottom: 2em;
10+
11+
label {
12+
margin-right: .7em;
13+
}
14+
}
15+
16+
.btn {
17+
margin-top: 1em;
18+
margin-bottom: 1em;
19+
width: 15em;
20+
}
21+
22+
select, input {
23+
min-width: 0;
24+
max-width: 100%;
25+
}
26+
27+
.flex-container {
28+
display: flex;
29+
flex-wrap: wrap;
30+
gap: 10px;
31+
margin-bottom: 10px;
32+
33+
.flex-item {
34+
flex-grow: 1;
35+
flex-basis: 10%;
36+
max-width: 100%;
37+
}
38+
39+
.address {
40+
flex-grow: 5;
41+
}
42+
43+
.city, .country {
44+
flex-grow: 2;
45+
}
46+
}
47+
48+
@media (max-width: 1199px) {
49+
.flex-container {
50+
.address {
51+
flex-basis: 100%;
52+
}
53+
}
54+
}
55+
56+
@media (max-width: 767px) {
57+
margin-top: -60px;
58+
margin-bottom: -20px;
59+
60+
.flex-container {
61+
flex-direction: column;
62+
}
1463

15-
#asterisk-explanation {
16-
color: red;
64+
.btn {
65+
width: 100%;
66+
}
67+
}
1768
}

app/assets/stylesheets/radio.css.scss renamed to app/assets/stylesheets/inputs.css.scss

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
.form-group.required label:not(.radio label):after {
2-
content:" *";
3-
color:red;
4-
}
5-
61
.radio {
72
padding-left: 20px;
83
label {

‎app/assets/stylesheets/labels.css.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.form-group.required label:not(.radio label):after {
2+
content:" *";
3+
color:red;
4+
}

app/assets/stylesheets/sticky.css renamed to app/assets/stylesheets/sticky.css.scss

File renamed without changes.

‎app/controllers/demographics_controller.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ def create
3535
private
3636
def demographic_info_params
3737
params.require(:demographic_info).permit(:birth_date, :disability, :veteran, :education, :cs_degree,
38-
:address, :city, :state, :zip, :country, :shirt, :job, :salary, :after_graduation,
38+
:address, :apartment, :city, :state, :zip, :country, :shirt, :job, :salary, :after_graduation,
3939
:time_off, :ssn, :pronouns_blank, :genders => [], :races => [], :pronouns => [])
4040
end
4141
end

0 commit comments

Comments
 (0)