From 92e7cc39cd459d46e3f32bd8f337a7167a354eb4 Mon Sep 17 00:00:00 2001
From: Ben Warzeski <bwarzeski@edx.org>
Date: Mon, 14 Dec 2020 16:20:43 -0500
Subject: [PATCH] Filter UI css/layout clean-up

---
 src/components/Gradebook/Assignments.jsx | 74 +++++++++++++-----------
 src/components/Gradebook/gradebook.scss  | 27 ++++++++-
 src/components/Gradebook/index.jsx       | 52 +++++++++--------
 3 files changed, 94 insertions(+), 59 deletions(-)

diff --git a/src/components/Gradebook/Assignments.jsx b/src/components/Gradebook/Assignments.jsx
index b55c8b2..18e4681 100644
--- a/src/components/Gradebook/Assignments.jsx
+++ b/src/components/Gradebook/Assignments.jsx
@@ -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>
diff --git a/src/components/Gradebook/gradebook.scss b/src/components/Gradebook/gradebook.scss
index e251aa6..dd2e927 100644
--- a/src/components/Gradebook/gradebook.scss
+++ b/src/components/Gradebook/gradebook.scss
@@ -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 {
diff --git a/src/components/Gradebook/index.jsx b/src/components/Gradebook/index.jsx
index 170251e..1bbdb79 100644
--- a/src/components/Gradebook/index.jsx
+++ b/src/components/Gradebook/index.jsx
@@ -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"