Clean up CSS related to staff grading.

openassessment/templates/openassessmentblock/staff_area/oa_staff_area.html

@@ -19,7 +19,7 @@
 
             <div class="staff-info__content ui-staff__content">
 
-                <div class="staff-info__student ui-staff__content__section">
+                <div class="staff-info__student">
                     <div class="wrapper--input" class="staff-info__student__form">
                         <form class="openassessment_student_info_form">
                             <div class="form--error"></div>

openassessment/templates/openassessmentblock/staff_area/oa_staff_grade_learners.html

 {% load i18n %}
 
-<!-- staff-info__student is necessary to get proper styling for the staff assessment form -->
-<div class="staff__grade__control ui-toggle-visibility is--collapsed staff-info__student">
+<div class="staff__grade__control ui-toggle-visibility is--collapsed">
     <header class="staff__grade__header ui-toggle-visibility__control">
         <h3 class="staff__grade__title">
             <span class="wrapper--copy">
@@ -22,7 +21,7 @@
         {% endblock %}
     </header>
 
-    <div class="staff__grade__content ui-toggle-visibility__content">
+    <div class="ui-staff__content__section staff__grade__content ui-toggle-visibility__content">
         <div class="wrapper--input">
             <div class="staff__grade__form--error"></div>
             <div class="staff__grade__form"></div>

openassessment/templates/openassessmentblock/staff_area/oa_staff_override_assessment.html

@@ -2,7 +2,6 @@
 {% spaceless %}
 
     {% block body %}
-    <div class="ui-toggle-visibility__content">
     <div class="wrapper--staff-assessment">
         <div class="step__instruction">
             <p>{% trans "Override this learner's current grade using the problem's rubric." %}</p>
@@ -47,7 +46,5 @@
             </ul>
         </div>
     </div>
-    </div>
     {% endblock %}
 {% endspaceless %}
-

openassessment/templates/openassessmentblock/staff_area/oa_student_info.html

@@ -32,6 +32,7 @@
                         {% endblocktrans %}
                     </p>
                 {% else %}
+                    <div class="wrapper--content">
                         {% include "openassessmentblock/oa_submission_answer.html" with answer=submission.answer answer_text_label="The learner's response to the question above:" %}
 
                         {% if submission.file_url %}
@@ -40,6 +41,7 @@
                             </a>
                             <span>{%  trans "Caution: This file was uploaded by another course learner and has not been verified, screened, approved, reviewed, or endorsed by edX. If you decide to access it, you do so at your own risk." %}</span>
                         {% endif %}
+                    </div>
                 {% endif %}
             </div>
         </div>

openassessment/xblock/static/js/src/lms/oa_staff_area.js

@@ -443,7 +443,6 @@
             this.server.staffAssess(
                 rubric.optionsSelected(), rubric.criterionFeedback(), rubric.overallFeedback(), submissionID
             ).done(successCallback).fail(function(errorMessage) {
-                // TODO: this needs styling help Andy!
                 scope.find(errorSelector).html(_.escape(errorMessage));
                 view.staffSubmitEnabled(scope, true);
             });

openassessment/xblock/static/sass/oa/elements/_staff.scss

@@ -4,8 +4,7 @@
 // NOTES:
 // * staff-centric UI used for reporting/debugging
 
-.wrapper--xblock {
-
+.openassessment {
 
   // --------------------
   // general: staff UI
@@ -81,6 +80,12 @@
   .ui-staff__content__section {
     padding-bottom: ($baseline-v/2);
     @extend %wipe-last-child;
+
+    .wrapper--input,
+    .wrapper--content {
+      padding: $baseline-v ($baseline-h/2);
+      background-color: $bg-content;
+    }
   }
 
   // --------------------
@@ -105,9 +110,18 @@
     }
   }
 
-  // UI - status (table)
-  .staff-info__status, .staff-info__classifierset {
+  .openassessment_student_info_form {
+    margin-bottom: ($baseline-v/2);
+
+    .list--actions__item {
+      @include text-align(left);
+
+      .action--submit-username {
+        @extend %btn--secondary;
 
+        margin-left: 0;
+      }
+    }
   }
 
   .staff-info__status__table, .staff-info__classifierset__table {
@@ -155,33 +169,106 @@
     }
   }
 
-}
+  // staff assessments
+  .wrapper--staff-assessment {
+    margin-top: ($baseline-v/2);
+    padding-top: ($baseline-v/2);
+    border-top: 1px solid $color-decorative-tertiary;
+  }
+
+  .staff-assessment__display {
+    @extend %ui-subsection;
+  }
+
+  .staff-assessment__display__header {
+    @include clearfix();
+
+    span {
+      @extend %t-strong; // FIX: needed due to DOM structure
+    }
+
+    .staff-assessment__display__title {
+      @extend %t-heading;
+      margin-bottom: ($baseline-v/2);
+      color: $heading-secondary-color;
+    }
+  }
+
+  .staff-assessment__display__response {
+    @extend %ui-subsection-content;
+    @extend %copy-3;
+    @extend %ui-content-longanswer;
+    @extend %ui-well;
+    color: $copy-color;
+  }
+
+  // assessment form
+  .staff-assessment__assessment {
+
+    // fields
+    .assessment__fields {
+      margin-bottom: $baseline-v;
+    }
+
+    // rubric question
+    .assessment__rubric__question {
+      @extend %ui-rubric-question;
+    }
+
+    // rubric options
+    .question__answers {
+      @extend %ui-rubric-answers;
+    }
+
+    // general feedback question
+    .assessment__rubric__question--feedback {
 
-// Styling for staff grade tab ("Grade Available Responses").
-.ui-staff {
+      .wrapper--input {
+        margin-top: $baseline-v;
+      }
+
+      .question__title__copy {
+        @include margin-left(0);
+        white-space: pre-wrap;
+      }
+
+      textarea {
+        @extend %ui-content-longanswer;
+        min-height: ($baseline-v*5);
+      }
+    }
+  }
+
+  // Styling for staff grade tab ("Grade Available Responses").
+  .ui-staff {
     .staff__grade__control {
-    padding: 0 (3*$baseline-h/4);
       border-top: ($baseline-v/4) solid $color-decorative-tertiary;
       background: $bg-content;
+      background-color: $bg-content;
 
-    h3.staff__grade__title {
+      .staff__grade__title {
         @include text-align(left);
         @include float(none);
-      margin-top: 0 !important;
 
+        padding: 0 $baseline-v;
         display: block;
         width: 100%;
 
         .staff__grade__show-form {
+          @extend %btn-reset;
           @extend %t-superheading;
+          @include fontSize($f-size-medium);
+
+          background-color: $bg-content;
           text-transform: none;
           letter-spacing: normal;
+          padding: 0;
         }
       }
 
       .staff__grade__status {
         display: inline-block;
-      margin-top: ($baseline-v/4);
+        padding: 0 $baseline-v;
 
         @include media($bp-dm) {
           margin-top: 0;
@@ -208,7 +295,7 @@
           border-radius: ($baseline-v/10);
           padding: ($baseline-v/4) ($baseline-h/4);
           background: $color-decorative-tertiary;
-        position: relative;
+          line-height: 0;
 
           @include media($bp-ds) {
             display: block;
@@ -236,19 +323,20 @@
       .submit_assessment--action {
         display: inline;
       }
+
+      .wrapper--input {
+        padding-top: 0;
+      }
     }
 
     // Override the default color for h3 (for elements that can be toggled).
     .ui-toggle-visibility .ui-toggle-visibility__control .staff__grade__title {
       color: $action-primary-color;
     }
-}
-
-
-
+  }
 
-// UI - cancel submission (action)
-.staff-info__workflow-cancellation {
+  // UI - cancel submission (action)
+  .staff-info__workflow-cancellation {
 
     .staff-info__cancel-submission__content {
 
@@ -261,13 +349,6 @@
         min-height: ($baseline-v*5);
         text-align: left;
       }
-
-    .list--actions {
-      .action--submit {
-        margin: ($baseline-v/2) 0;
     }
   }
-
-  }
-
 }

openassessment/xblock/static/sass/oa/utilities/_developer.scss

@@ -44,23 +44,14 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
     padding: 10px;
 
     .ui-staff__button {
-      margin-left: ($baseline-v/2);
+      @extend %btn-reset;
+
       padding: ($baseline-v/4) ($baseline-v/2);
       border-radius: ($baseline-v/4);
       text-transform: uppercase;
       color: $lighter-base-font-color;
       background-color: $shadow-l2;
 
-      // Remove button styling
-      font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-      font-size: 12px;
-      -webkit-appearance: none;
-      background-image: none;
-      text-shadow: none;
-      box-shadow: none;
-      border: none;
-      border-image: none;
-
       &.is--active {
         color: white;
         background-color: $edx-pink;
@@ -103,14 +94,6 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
   }
 }
 
-.staff-info__status {
-  .action--submit {
-    @extend %btn--secondary;
-    @extend %action-2;
-    @include margin(($baseline-v/2), ($baseline-v/2), ($baseline-v/2), ($baseline-v/2));
-  }
-}
-
 .staff-info__student {
   .label {
     color: $heading-staff-color;
@@ -121,12 +104,6 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
     }
   }
 
-  .action--submit {
-    @extend %btn--secondary;
-    @extend %action-2;
-    @include margin(($baseline-v/2), ($baseline-v/2), ($baseline-v/2), ($baseline-v/2));
-  }
-
   .title {
     @extend %hd-2;
     color: $heading-staff-color;
@@ -161,89 +138,9 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
     }
   }
 
-  .staff-info__cancel-submission__content,
-  .staff-info__staff-override__content {
-    padding: $baseline-v ($baseline-h/2);
-    background-color: white;
-  }
-
   .value {
     width: $max-width/2;
   }
-
-  // staff assessments
-  .wrapper--staff-assessment {
-    margin-top: ($baseline-v/2);
-    padding-top: ($baseline-v/2);
-    border-top: 1px solid $color-decorative-tertiary;
-
-    .action--submit {
-      @extend .action--submit;
-    }
-  }
-
-  .staff-assessment__display {
-    @extend %ui-subsection;
-  }
-
-  .staff-assessment__display__header {
-    @include clearfix();
-
-    span {
-      @extend %t-strong; // FIX: needed due to DOM structure
-    }
-
-    .staff-assessment__display__title {
-      @extend %t-heading;
-      margin-bottom: ($baseline-v/2);
-      color: $heading-secondary-color;
-    }
-  }
-
-  .staff-assessment__display__response {
-    @extend %ui-subsection-content;
-    @extend %copy-3;
-    @extend %ui-content-longanswer;
-    @extend %ui-well;
-    color: $copy-color;
-  }
-
-  // assessment form
-  .staff-assessment__assessment {
-
-    // fields
-    .assessment__fields {
-      margin-bottom: $baseline-v;
-    }
-
-    // rubric question
-    .assessment__rubric__question {
-      @extend %ui-rubric-question;
-    }
-
-    // rubric options
-    .question__answers {
-      @extend %ui-rubric-answers;
-    }
-
-    // general feedback question
-    .assessment__rubric__question--feedback {
-
-      .wrapper--input {
-        margin-top: $baseline-v;
-      }
-
-      .question__title__copy {
-        @include margin-left(0);
-        white-space: pre-wrap;
-      }
-
-      textarea {
-        @extend %ui-content-longanswer;
-        min-height: ($baseline-v*5);
-      }
-    }
-  }
 }
 
 // --------------------
@@ -1211,14 +1108,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
   max-width: 100%;
 }
 
-// Developer SASS for Continued Grading.
-.openassessment__steps__step {
-    .action--continue--grading {
-      @extend .action--submit;
-    }
-}
-
-#openassessment__leaderboard{
+#openassessment__leaderboard {
   font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 
   .step__counter, .step__counter:before {

openassessment/xblock/static/sass/oa/utilities/_shame.scss

@@ -196,11 +196,11 @@
   .staff-info__workflow-cancellation {
     margin-bottom: ($baseline-v) !important;
   }
-}
 
-.staff-info__student {
+  .wrapper--staff-assessment {
     // 'p' elements in LMS have a color set on them.
     .student__answer__display__content p {
       color: inherit;
     }
+  }
 }

openassessment/xblock/static/sass/oa/views/_oa-base.scss

@@ -29,6 +29,56 @@
     padding: 0;
   }
 
+  // --------------------
+  // overall actions
+  // --------------------
+  .list--actions {
+    margin-bottom: ($baseline-v/2);
+    @include text-align(center);
+
+    @include media($bp-ds) {
+      @include text-align(right);
+    }
+
+    @include media($bp-dm) {
+      @include text-align(right);
+    }
+
+    @include media($bp-dl) {
+      @include text-align(right);
+    }
+
+    @include media($bp-dx) {
+      @include text-align(right);
+    }
+
+    // STATE: actions has an error
+    &.has--error {
+
+      .message {
+        margin-bottom: $baseline-v;
+        @include text-align(left);
+      }
+    }
+
+    .action--submit {
+      @extend %btn--primary;
+      @extend %action-2;
+      margin-left: ($baseline-v/2);
+
+      .copy, .icon {
+        display: inline;
+      }
+
+      .icon {
+        @extend %icon-2;
+      }
+
+      .fa-caret-right:before {
+        @include transform(rotate(bidi-rotate-angle(0deg)));
+      }
+    }
+  }
 
   // --------------------
   // steps
@@ -235,55 +285,6 @@
       }
     }
 
-    // step actions
-    .step__actions {
-      margin-bottom: ($baseline-v/2);
-      @include text-align(center);
-
-      @include media($bp-ds) {
-        @include text-align(right);
-      }
-
-      @include media($bp-dm) {
-       @include text-align(right);
-      }
-
-      @include media($bp-dl) {
-        @include text-align(right);
-      }
-
-      @include media($bp-dx) {
-        @include text-align(right);
-      }
-
-      .action--submit {
-        @extend %btn--primary;
-        @extend %action-2;
-
-        .copy, .icon {
-          display: inline;
-        }
-
-        .icon {
-          @extend %icon-2;
-        }
-
-        .fa-caret-right:before {
-          @include transform(rotate(bidi-rotate-angle(0deg)));
-        }
-
-      }
-
-      // STATE: actions has an error
-      &.has--error {
-
-        .message {
-          margin-bottom: $baseline-v;
-          @include text-align(left);
-        }
-      }
-    }
-
     // STATE: step is loading
     &.is--loading {
 
@@ -540,6 +541,10 @@
       display: inline-block;
       vertical-align: middle;
       @include margin-left(($baseline-h/4));
+
+      .list--actions {
+        @include text-align(left);
+      }
     }
 
     .response__submission__status__title {
@@ -549,11 +554,14 @@
 
     .response__submission__actions {
 
+      .list--actions__item {
+        @include text-align(left);
+      }
+
       .action--save {
         @extend %btn--secondary;
         @extend %action-2;
         display: block;
-        @include text-align(center);
         margin-bottom: ($baseline-v/2);
         min-width: 215px;
 

openassessment/xblock/static/sass/xb/elements/_controls.scss

@@ -106,6 +106,16 @@
   border-radius: ($baseline-v/10);
 }
 
+%btn-reset {
+  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-size: 12px;
+  -webkit-appearance: none;
+  background-image: none;
+  text-shadow: none;
+  box-shadow: none;
+  border: none;
+  border-image: none;
+}
 
 // buttons - primary (assuming dark bg/light copy)
 %btn--primary {