Andal.LND/frontend-app-gradebook
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Filter UI css/layout clean-up

Browse Source
This commit is contained in:
Ben Warzeski
2020-12-14 16:20:43 -05:00
parent d6d09205f4
commit 92e7cc39cd
3 changed files with 94 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/Gradebook/Assignments.jsx
View File

@@ -75,7 +75,7 @@ export class Assignments extends React.Component {
render() {
return (
<Collapsible title="Assignments" open className="filter-group mb-3">
<Collapsible title="Assignments" defaultOpen className="filter-group mb-3">
<div>
<div className="student-filters">
<span className="label">
@@ -106,39 +106,45 @@ export class Assignments extends React.Component {
/>
</div>
<p>Grade Range (0% - 100%)</p>
<form className="d-fnlex justify-content-between align-items-center" onSubmit={this.handleSubmitAssignmentGrade}>
<InputText
label="Min Grade"
name="assignmentGradeMin"
type="number"
min={0}
max={100}
step={1}
value={this.props.assignmentGradeMin}
disabled={!this.props.selectedAssignment}
onChange={this.props.setAssignmentGradeMin}
/>
<span className="input-percent-label">%</span>
<InputText
label="Max Grade"
name="assignmentGradeMax"
type="number"
min={0}
max={100}
step={1}
value={this.props.assignmentGradeMax}
disabled={!this.props.selectedAssignment}
onChange={this.props.setAssignmentGradeMax}
/>
<span className="input-percent-label">%</span>
<Button
type="submit"
className="btn-outline-secondary"
name="assignmentGradeMinMax"
disabled={!this.props.selectedAssignment}
>
Apply
</Button>
<form className="grade-filter-inputs" onSubmit={this.handleSubmitAssignmentGrade}>
<div className="percent-group">
<InputText
label="Min Grade"
name="assignmentGradeMin"
type="number"
min={0}
max={100}
step={1}
value={this.props.assignmentGradeMin}
disabled={!this.props.selectedAssignment}
onChange={this.props.setAssignmentGradeMin}
/>
<span className="input-percent-label">%</span>
</div>
<div className="percent-group">
<InputText
label="Max Grade"
name="assignmentGradeMax"
type="number"
min={0}
max={100}
step={1}
value={this.props.assignmentGradeMax}
disabled={!this.props.selectedAssignment}
onChange={this.props.setAssignmentGradeMax}
/>
<span className="input-percent-label">%</span>
</div>
<div className="grade-filter-action">
<Button
type="submit"
className="btn-outline-secondary"
name="assignmentGradeMinMax"
disabled={!this.props.selectedAssignment}
>
Apply
</Button>
</div>
</form>
</div>
</Collapsible>

27
src/components/Gradebook/gradebook.scss
View File

@@ -151,10 +151,33 @@
text-decoration: underline;
}
}
}
.input-percent-label {
margin-top: 10px;
.form-group {
label {
font-weight: bold;
}
}
.filter-group {
.grade-filter-inputs {
.percent-group {
display: inline-block;
.form-group {
width: 115px;
display: inline-block;
}
.input-percent-label {
margin-top: 22px;
margin-left: 5px;
margin-right: 5px;
}
}
}
.grade-filter-action {
text-align: right;
}
}
.mb-85 {

52
src/components/Gradebook/index.jsx
View File

@@ -408,28 +408,34 @@ export default class Gradebook extends React.Component {
setAssignmentGradeMax={this.createStateFieldSetter('assignmentGradeMax')}
updateQueryParams={this.updateQueryParams}
/>
<Collapsible title="Overall Grade" open className="filter-group mb-3">
<div className="d-flex justify-content-between align-items-center">
<InputText
value={this.state.courseGradeMin}
name="minimum-grade"
label="Min Grade"
onChange={value => this.handleCourseGradeFilterChange('min', value)}
type="number"
min={0}
max={100}
/>
<span className="input-percent-label">%</span>
<InputText
value={this.state.courseGradeMax}
name="max-grade"
label="Max Grade"
onChange={value => this.handleCourseGradeFilterChange('max', value)}
type="number"
min={0}
max={100}
/>
<span className="input-percent-label">%</span>
<Collapsible title="Overall Grade" defaultOpen className="filter-group mb-3">
<div className="grade-filter-inputs">
<div className="percent-group">
<InputText
value={this.state.courseGradeMin}
name="minimum-grade"
label="Min Grade"
onChange={value => this.handleCourseGradeFilterChange('min', value)}
type="number"
min={0}
max={100}
/>
<span className="input-percent-label">%</span>
</div>
<div className="percent-group">
<InputText
value={this.state.courseGradeMax}
name="max-grade"
label="Max Grade"
onChange={value => this.handleCourseGradeFilterChange('max', value)}
type="number"
min={0}
max={100}
/>
<span className="input-percent-label">%</span>
</div>
</div>
<div className="grade-filter-action">
<Button
variant="outline-secondary"
onClick={this.handleCourseGradeFilterApplyButtonClick}
@@ -438,7 +444,7 @@ export default class Gradebook extends React.Component {
</Button>
</div>
</Collapsible>
<Collapsible title="Student Groups" open className="filter-group mb-3">
<Collapsible title="Student Groups" defaultOpen className="filter-group mb-3">
<InputSelect
label="Tracks"
name="Tracks"