visual styling changes to staff grading and peer grading, along with additional…

visual styling changes to staff grading and peer grading, along with additional instances of the use of the baseline variable instead of pixel definitions for padding and margins.

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -282,10 +282,9 @@ section.problem {
 
     .grader-status {
       @include clearfix;
-      margin-bottom: $baseline;
-      padding: 9px;
-      border: 1px solid #ddd;
-      border-top: 0;
+      margin: $baseline/2 0;
+      padding: $baseline/2;
+      border-radius: 5px;
       background: #F6F6F6;
 
       span {
@@ -311,11 +310,11 @@ section.problem {
       }
 
       &.file {
-        background: #fff;
         margin-top: $baseline;
         padding: $baseline 0 0 0;
         border: 0;
         border-top: 1px solid #eee;
+        background: #fff;
 
         p.debug {
           display: none;
@@ -335,8 +334,8 @@ section.problem {
 
 
     .feedback-on-feedback {
-      height: 100px;
       margin-right: $baseline;
+      height: 100px;
     }
 
     .evaluation-response {

lms/static/sass/course/_staff_grading.scss

 div.staff-grading,
 div.peer-grading{
+    padding: $baseline;
+    border: none;
+    
     textarea.feedback-area {
+        margin: 0;
         height: 75px;
-        margin: 0px;
     }
 
     ul.rubric-list{
+        margin: 0;
+        padding: 0;
         list-style-type: none;
-        padding:0;
-        margin:0;
+
         li {
-             &.rubric-list-item{
-                 margin-bottom: 0px;
-                 padding: 0px;
-             }
+            &.rubric-list-item{
+                margin-bottom: 0;
+                padding: 0;
+            }
         }
     }
 
     h1 {
-        margin : 0 0 0 10px;
+        margin: 0 0 0 $baseline/2;
     }
 
-    h2{
-        a
-        {
+    h2 {
+        a {
             text-size: .5em;
         }
     }
 
     div {
-        margin: 0px;
+        margin: 0;
+
         &.submission-container{
-              overflow-y: auto;
-              height: 150px;
-              background: #F6F6F6;
-              border: 1px solid #ddd;
-              @include clearfix;
+            @include clearfix;
+            overflow-y: auto;
+            height: 150px;
+            border: 1px solid #ddd;
+            background: #F6F6F6;
         }
     }
 
     label {
-        margin: 0px;
+        margin: 0;
         padding: 2px;
         min-width: 50px;
         background-color: white;
@@ -58,143 +62,127 @@ div.peer-grading{
         display: none;
     }
 
-    .problem-list
-    {
-        text-align: center;
-        table-layout: auto;
+    .problem-list {
         width:100%;
-        th
-        {
+        table-layout: auto;
+        text-align: center;
+        
+        th {
             padding: 2px;
         }
-        td
-        {
-            padding:2px;
+        
+        td {
+            padding: 2px;
         }
-        td.problem-name
-        {
-            text-align:left;
+        
+        td.problem-name {
+            text-align: left;
         }
-        .ui-progressbar
-        {
-            height:1em;
-            margin:0px;
-            padding:0px;
+
+        .ui-progressbar {
+            margin: 0;
+            padding: 0;
+            height: 1em;
         }
     }
 
     .prompt-information-container,
     .rubric-wrapper,
     .calibration-feedback-wrapper,
-    .grading-container
-    {
-        padding: 2px;
+    .grading-container {
+        padding: $baseline/2 0;
     }
-    .error-container
-    {
-        background-color: #FFCCCC;
+
+    .error-container {
+        margin-left: 0;
         padding: 2px;
-        margin-left: 0px;
+        background-color: #ffcccc;
     }
-    .submission-wrapper
-    {
-        h3
-        {
+    
+    .submission-wrapper {
+        padding: 2px;
+        padding-bottom: 15px;
+        
+        h3 {
             margin-bottom: 2px;
         }
-        p
-        {
-            margin-left:2px;
+
+        p {
+            margin-left: 2px;
         }
-        padding: 2px;
-        padding-bottom: 15px;
     }
-    .meta-info-wrapper
-    {
-        background-color: #eee;
+    .meta-info-wrapper {
         padding:2px;
-        div
-        {
-            display : inline;
+        background-color: #eee;
+        
+        div {
+            display: inline;
         }
     }
     .message-container,
-    .grading-message
-    {
-        background-color: $yellow;
+    .grading-message {
+        margin-left: 0;
         padding: 2px;
-        margin-left:0px;
+        background-color: $yellow;
     }
     
-    .breadcrumbs
-    {
-        margin-top:2px;
-        margin-left:0px;
-        margin-bottom:2px;
+    .breadcrumbs {
+        margin: $baseline/2 $baseline/4;
         font-size: .8em;
     }
 
-    .instructions-panel
-    {
-
+    .instructions-panel {
+        @include clearfix;
         margin-right:2px;
-        > div
-        {
-            padding: 2px;
+        
+        > div {
             margin-bottom: 5px;
+            padding: 2px;
+            width: 47.6%;
             background: #eee;
-            width:47.6%;
-            h3
-            {
-                text-align:center;
-                text-transform:uppercase;
+
+            h3 {
                 color: #777;
+                text-align: center;
+                text-transform: uppercase;
             }
-            p
-            {
+            
+            p{
                 color: #777;
             }
         }
-        .calibration-panel
-        {
-            float:left;
+        .calibration-panel {
+            float: left;
         }
-        .grading-panel
-        {
-            float:right;
+
+        .grading-panel {
+            float: right;
         }
-        .current-state
-        {
-            background: #1D9DD9;
-            h3, p
-            {
+        .current-state {
+            background: #1d9dd9;
+            
+            h3, p {
                 color: white;
             }
         }
-        @include clearfix;
     }
 
+    .collapsible {
+        margin-left: 0;
 
-    .collapsible
-    {
-        margin-left: 0px;
-        header
-        {
-            margin-top:2px;
-            margin-bottom:2px;
+        header {
+            margin-top: 2px;
+            margin-bottom: 2px;
             font-size: 1.2em;
         }
     }
     
-    .interstitial-page
-    {
+    .interstitial-page {
         text-align: center;
-        input[type=button]
-        {
-            margin-top: 20px;
+
+        input[type=button] {
+            margin-top: $baseline;
         }
     }
-    padding: 15px;
-    border: none;
 }
 

lms/templates/combinedopenended/combined_open_ended_results.html

@@ -12,7 +12,7 @@
                 <span class="section-header section-header-rubric">Submitted Rubric</span>
             </div>
             <div class="oe-tools rubric-header">
-                <span class="oe-tools-label">Assessment Tools: </span>
+                <span class="oe-tools-label"></span>
                 <button class="rubric-collapse" href="#">Show Score Only</button>
                 % if len(results)>1:
                     <a href="#" class="rubric-previous-button">Previous</a>

lms/templates/peer_grading/peer_grading_problem.html

@@ -14,7 +14,11 @@
         </div>
 
         <div class="prompt-wrapper">
-            <h2>${_('Prompt')} <a href="#" class="question-header">${_('(Hide)')}</a></h2>
+            <div class="visibility-control visibility-control-rubric">
+                <div class="inner">
+                </div>
+                <span class="section-header section-header-rubric">${_('Hide Prompt')}</span>
+            </div>
             <div class="prompt-information-container">
                 <section>
                 <div class="prompt-container">