Update the new writable gradebook UI to make it look better

lms/static/js/writable_gradebook.js

@@ -336,6 +336,7 @@ $(document).ready(function() {
 
             $tableWrapper.attr('data-manual-grading', isManualGrading);
             $tableWrapper.show();
+            $modal.find('#modal-table-empty-message').hide();
             $saveGradeOverrideButton.show().prop('disabled', true);
             modalDataTable.$('tr').each(function(){
                 $(this).attr('data-block-id', blockID);
@@ -584,8 +585,10 @@ $(document).ready(function() {
             }
 
             for (var i = 0; i < adjustedGradesData[username].errors.length; i++) {
-                $errorMessage = edx.HtmlUtils.joinHtml('Error for user ', username, ': ', adjustedGradesData[username].errors[i], '<br>').toString();
+                $separator = $('<br />');
+                $errorMessage = edx.HtmlUtils.joinHtml('Error for user ', username, ': ', adjustedGradesData[username].errors[i]).toString();
                 $messageField.append($errorMessage);
+                $messageField.append($separator);
             }
 
             if (adjustedGradesData[username].errors.length === 0) {

lms/static/sass/_build-course.scss

@@ -48,14 +48,15 @@
 @import "course/syllabus"; // TODO arjun replace w/ custom tabs, see courseware/courses.py
 @import "course/textbook";
 @import "course/profile";
-@import "course/gradebook";
 @import "course/tabs";
 @import "course/student-notes";
 @import "views/teams";
 
 // course - instructor-only views
+@import "course/gradebook";
 @import "course/instructor/instructor_2";
 @import "course/instructor/email";
+@import "course/instructor/writable_gradebook";
 @import "xmodule/descriptors/css/module-styles.scss";
 
 // course - ccx_coach

lms/static/sass/course/instructor/_writable_gradebook.scss

@@ -0,0 +1,105 @@
+@mixin table-filter-input {
+    border: 1px $gray solid;
+    background-color: $white;
+    border-radius: 4px;
+}
+
+.gradebook-content {
+
+    .dataTables_filter {
+        input {
+            @include table-filter-input;
+        }
+    } 
+
+    .gradebook-filter {
+        select {
+            @include table-filter-input;
+        }
+    }
+
+    .view-container {
+        padding-bottom: 30px;
+        .filter-title {
+            margin-right: 5px;
+        }
+        input {
+            margin: 0px 2px;
+        }
+    }
+
+    .gradebook-filter {
+        margin: 10px 0px;
+    }
+
+
+    .dataTables_wrapper {
+        #student-grades-table{
+            margin:0;
+        }
+        .dataTables_info {
+            float: none;
+            width: 100%;
+            text-align: center;
+        }
+    }
+    .grade-override-modal {
+        left: 0px;
+        top: 50%;
+        background: $white;
+        border: 1px $gray solid;
+        width: 100%;
+        .modal-content {
+            background-color: $white;
+            p{
+                padding: 5px;
+            }
+            .block-id-placeholder {
+                font-size: $small-font-size;
+            }
+            .grade-override-message {
+                padding: 5px;
+                margin: 0px 5px;
+                background-color: $uxpl-gray-background;
+                color: $error-color;
+            }
+            .user-adjusted-grade input {
+                max-width: 50px;
+                height: 18px;
+                padding: 5px 2px;
+            }
+            .user-grade-comment textarea {
+                max-width: 150px;
+            }
+            .grade-override-menu-buttons {
+                padding: 10px;
+            }
+        }
+    }
+
+
+    @media (min-width: $bp-screen-md) {
+        .view-container {
+            .report-download-link {
+                float: right;
+            }
+        }
+        .grade-override-modal {
+            left: 22px;
+            top: 40%;
+        }
+    }
+
+    @media (min-width: $bp-screen-xl) {
+        .view-container {
+            .report-download-link {
+                float: right;
+            }
+        }
+        .grade-override-modal {
+            left: 10%;
+            top: 30%;
+            max-width: 1100px;
+        }
+    }
+}

lms/templates/courseware/writable_gradebook.html

@@ -42,10 +42,10 @@ from django.core.urlresolvers import reverse
       %if number_of_students > 0:
         <div id="filters-container" class="hidden">
           <div class="view-container">
-            <span>${_("Score View:")} </span>
+            <span class="filter-title">${_("Score View:")} </span>
             <input type="radio" id="table-data-view-percent" name="table-data-view" value="percent"> ${_("Percent")}
             <input type="radio" id="table-data-view-absolute" name="table-data-view" value="absolute" checked> ${_("Absolute")}
-            <a id="download-grade-report" href="../../instructor?report=grade-report#view-data_download">${_("Download Grade Report")}</a>
+            <a class="report-download-link" id="download-grade-report" href="../../instructor?report=grade-report#view-data_download">${_("Download Grade Report")}</a>
           </div>
 
           <div id="gp-filter" class="gradebook-filter">