Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
[MICROBA-596]
- Add space between checkbox and label
- Adjust spacing between end of MultiSelect dropdown choices and next question
This commit is contained in:
Justin Hynes
2020-09-28 08:46:32 -04:00
parent 3a5ec45676
commit e200215421
3 changed files with 111 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
lms/static/js/demographics_collection/DemographicsCollectionModal.jsx
View File

@@ -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>

4
lms/static/js/demographics_collection/MultiselectDropdown.jsx
View File

@@ -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

4
lms/static/js/demographics_collection/SelectWithInput.jsx
View File

@@ -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>
)
}
}