Skip to content
Snippets Groups Projects
Commit e2002154 authored by Justin Hynes's avatar Justin Hynes
Browse files

MICROBA-596 | Adjust style of MultiSelect dropdown in demographics modal 

[MICROBA-596]
- Add space between checkbox and label
- Adjust spacing between end of MultiSelect dropdown choices and next question
parent 3a5ec456
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lms/static/js/demographics_collection/DemographicsCollectionModal.jsx
+ 107
− 95
View file @ e2002154
......@@ -326,21 +326,23 @@ class DemographicsCollectionModal extends React.Component {
}}
/>
{/* Family Income */}
<label htmlFor={FIELD_NAMES.INCOME}>
{gettext("What was the total combined income, during the last 12 months, of all members of your family? ")}
</label>
<select
onChange={this.handleSelectChange}
className="form-control"
name={FIELD_NAMES.INCOME} id={FIELD_NAMES.INCOME}
value={wizardConsumer[FIELD_NAMES.INCOME]}
disabled={this.state.fieldError}
>
<option value="default">{gettext("Select income")}</option>
{
this.loadOptions(FIELD_NAMES.INCOME)
}
</select>
<div className="d-flex flex-column pb-3">
<label htmlFor={FIELD_NAMES.INCOME}>
{gettext("What was the total combined income, during the last 12 months, of all members of your family? ")}
</label>
<select
onChange={this.handleSelectChange}
className="form-control"
name={FIELD_NAMES.INCOME} id={FIELD_NAMES.INCOME}
value={wizardConsumer[FIELD_NAMES.INCOME]}
disabled={this.state.fieldError}
>
<option value="default">{gettext("Select income")}</option>
{
this.loadOptions(FIELD_NAMES.INCOME)
}
</select>
</div>
</div>
}
</Wizard.Page>
......@@ -348,22 +350,24 @@ class DemographicsCollectionModal extends React.Component {
{({ wizardConsumer }) =>
<div className="demographics-form-container" data-hj-suppress>
{/* Military History */}
<label htmlFor={FIELD_NAMES.MILITARY}>
{gettext("Have you ever served on active duty in the U.S. Armed Forces, Reserves, or National Guard?")}
</label>
<select
className="form-control"
onChange={this.handleSelectChange}
name={FIELD_NAMES.MILITARY}
id={FIELD_NAMES.MILITARY}
value={wizardConsumer[FIELD_NAMES.MILITARY]}
disabled={this.state.fieldError}
>
<option value="default">{gettext("Select military status")}</option>
{
this.loadOptions(FIELD_NAMES.MILITARY)
}
</select>
<div className="d-flex flex-column pb-3">
<label htmlFor={FIELD_NAMES.MILITARY}>
{gettext("Have you ever served on active duty in the U.S. Armed Forces, Reserves, or National Guard?")}
</label>
<select
className="form-control"
onChange={this.handleSelectChange}
name={FIELD_NAMES.MILITARY}
id={FIELD_NAMES.MILITARY}
value={wizardConsumer[FIELD_NAMES.MILITARY]}
disabled={this.state.fieldError}
>
<option value="default">{gettext("Select military status")}</option>
{
this.loadOptions(FIELD_NAMES.MILITARY)
}
</select>
</div>
</div>
}
</Wizard.Page>
......@@ -371,39 +375,43 @@ class DemographicsCollectionModal extends React.Component {
{({ wizardConsumer }) =>
<div className="demographics-form-container" data-hj-suppress>
{/* Learner Education Level */}
<label htmlFor={FIELD_NAMES.EDUCATION_LEVEL}>
{gettext("What is the highest level of education that you have achieved so far?")}
</label>
<select
className="form-control"
onChange={this.handleSelectChange}
name={FIELD_NAMES.EDUCATION_LEVEL}
id={FIELD_NAMES.EDUCATION_LEVEL}
value={wizardConsumer[FIELD_NAMES.EDUCATION_LEVEL]}
disabled={this.state.fieldError}
>
<option value="default">{gettext("Select level of education")}</option>
{
this.loadOptions(FIELD_NAMES.EDUCATION_LEVEL)
}
</select>
<div className="d-flex flex-column pb-3">
<label htmlFor={FIELD_NAMES.EDUCATION_LEVEL}>
{gettext("What is the highest level of education that you have achieved so far?")}
</label>
<select
className="form-control"
onChange={this.handleSelectChange}
name={FIELD_NAMES.EDUCATION_LEVEL}
id={FIELD_NAMES.EDUCATION_LEVEL}
value={wizardConsumer[FIELD_NAMES.EDUCATION_LEVEL]}
disabled={this.state.fieldError}
>
<option value="default">{gettext("Select level of education")}</option>
{
this.loadOptions(FIELD_NAMES.EDUCATION_LEVEL)
}
</select>
</div>
{/* Parent/Guardian Education Level */}
<label htmlFor={FIELD_NAMES.PARENT_EDUCATION}>
{gettext("What is the highest level of education that any of your parents or guardians have achieved?")}
</label>
<select
className="form-control"
onChange={this.handleSelectChange}
name={FIELD_NAMES.PARENT_EDUCATION}
id={FIELD_NAMES.PARENT_EDUCATION}
value={wizardConsumer[FIELD_NAMES.PARENT_EDUCATION]}
disabled={this.state.fieldError}
>
<option value="default">{gettext("Select guardian education")}</option>
{
this.loadOptions(FIELD_NAMES.PARENT_EDUCATION)
}
</select>
<div className="d-flex flex-column pb-3">
<label htmlFor={FIELD_NAMES.PARENT_EDUCATION}>
{gettext("What is the highest level of education that any of your parents or guardians have achieved?")}
</label>
<select
className="form-control pb-3"
onChange={this.handleSelectChange}
name={FIELD_NAMES.PARENT_EDUCATION}
id={FIELD_NAMES.PARENT_EDUCATION}
value={wizardConsumer[FIELD_NAMES.PARENT_EDUCATION]}
disabled={this.state.fieldError}
>
<option value="default">{gettext("Select guardian education")}</option>
{
this.loadOptions(FIELD_NAMES.PARENT_EDUCATION)
}
</select>
</div>
</div>
}
</Wizard.Page>
......@@ -431,39 +439,43 @@ class DemographicsCollectionModal extends React.Component {
disabled={this.state.fieldError}
/>
{/* Current Work Industry */}
<label htmlFor={FIELD_NAMES.CURRENT_WORK}>
{gettext("What industry do you currently work in?")}
</label>
<select
className="form-control"
onChange={this.handleSelectChange}
name={FIELD_NAMES.CURRENT_WORK}
id={FIELD_NAMES.CURRENT_WORK}
value={wizardConsumer[FIELD_NAMES.CURRENT_WORK]}
disabled={this.state.fieldError}
>
<option value="default">{gettext("Select current industry")}</option>
{
this.loadOptions(FIELD_NAMES.CURRENT_WORK)
}
</select>
<div className="d-flex flex-column pb-3">
<label htmlFor={FIELD_NAMES.CURRENT_WORK}>
{gettext("What industry do you currently work in?")}
</label>
<select
className="form-control pb-3"
onChange={this.handleSelectChange}
name={FIELD_NAMES.CURRENT_WORK}
id={FIELD_NAMES.CURRENT_WORK}
value={wizardConsumer[FIELD_NAMES.CURRENT_WORK]}
disabled={this.state.fieldError}
>
<option value="default">{gettext("Select current industry")}</option>
{
this.loadOptions(FIELD_NAMES.CURRENT_WORK)
}
</select>
</div>
{/* Future Work Industry */}
<label htmlFor={FIELD_NAMES.FUTURE_WORK}>
{gettext("What industry do you want to work in?")}
</label>
<select
className="form-control"
onChange={this.handleSelectChange}
name={FIELD_NAMES.FUTURE_WORK}
id={FIELD_NAMES.FUTURE_WORK}
value={wizardConsumer[FIELD_NAMES.FUTURE_WORK]}
disabled={this.state.fieldError}
>
<option value="default">{gettext("Select prospective industry")}</option>
{
this.loadOptions(FIELD_NAMES.FUTURE_WORK)
}
</select>
<div className="d-flex flex-column pb-3">
<label htmlFor={FIELD_NAMES.FUTURE_WORK}>
{gettext("What industry do you want to work in?")}
</label>
<select
className="form-control pb-3"
onChange={this.handleSelectChange}
name={FIELD_NAMES.FUTURE_WORK}
id={FIELD_NAMES.FUTURE_WORK}
value={wizardConsumer[FIELD_NAMES.FUTURE_WORK]}
disabled={this.state.fieldError}
>
<option value="default">{gettext("Select prospective industry")}</option>
{
this.loadOptions(FIELD_NAMES.FUTURE_WORK)
}
</select>
</div>
</div>
}
</Wizard.Page>
......
lms/static/js/demographics_collection/MultiselectDropdown.jsx
+ 2
− 2
View file @ e2002154
......@@ -109,7 +109,7 @@ class MultiselectDropdown extends React.Component {
<div key={index} id={`${option.value}-option-container`} className="option-container">
<label className="option-label">
<input id={`${option.value}-option-checkbox`} className="option-checkbox" type="checkbox" value={option.value} checked={checked} onChange={this.handleOptionClick} />
{option.display_name}
<span className="pl-2">{option.display_name}</span>
</label>
</div>
)
......@@ -126,7 +126,7 @@ class MultiselectDropdown extends React.Component {
render() {
return (
<div
className="multiselect-dropdown"
className="multiselect-dropdown pb-3"
tabIndex={-1}
onBlur={e => {
// We need to make sure we only close and save the dropdown when
......
lms/static/js/demographics_collection/SelectWithInput.jsx
+ 2
− 2
View file @ e2002154
......@@ -18,7 +18,7 @@ export const SelectWithInput = (props) => {
disabled,
} = props;
return (
<div className="d-flex flex-column">
<div className="d-flex flex-column pb-3">
<label htmlFor={selectName}>{labelText}</label>
<select
className="form-control"
......@@ -46,4 +46,4 @@ export const SelectWithInput = (props) => {
}
</div>
)
}
\ No newline at end of file
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment