proofing status step UI rendering

apps/openassessment/templates/openassessmentblock/oa_base.html

@@ -53,10 +53,9 @@
 
                             <span class="step__status">
                                 <span class="step__status__label">This step's status:</span>
-                                    <span class="step__status__value">
-                                        <span class="copy">Loading</span>
-                                        <i class="icon-refresh icon-spin"></i>
-                                    </span>
+                                <span class="step__status__value">
+                                  <span class="copy">Loading</span>
+                                  <i class="ico icon-refresh icon-spin"></i>
                                 </span>
                             </span>
                         </header>

apps/openassessment/xblock/static/css/openassessment.css

@@ -892,7 +892,7 @@ hr.divider,
   position: relative; }
 
 .openassessment .message {
-  margin-bottom: 30px;
+  margin-bottom: 20px;
   border-radius: 2px;
   padding: 20px 20px;
   background: #f5f6f7; }
@@ -1038,7 +1038,7 @@ hr.divider,
 .openassessment .openassessment__steps__step .step__status .ico {
   display: inline-block;
   vertical-align: bottom;
-  margin-left: 5px; }
+  margin-left: 10px; }
 .openassessment .openassessment__steps__step .step__status .copy {
   color: #646464; }
 @media screen and (max-width: 529px) {
@@ -1052,7 +1052,7 @@ hr.divider,
     width: 30.11389%;
     margin-right: 0;
     position: relative;
-    top: -5px;
+    top: -8px;
     text-align: right; }
     .openassessment .openassessment__steps__step .step__status:last-child {
       margin-right: 0; } }
@@ -1064,7 +1064,7 @@ hr.divider,
     width: 23.23176%;
     margin-right: 0;
     position: relative;
-    top: -5px;
+    top: -8px;
     text-align: right; }
     .openassessment .openassessment__steps__step .step__status:last-child {
       margin-right: 0; } }
@@ -1076,7 +1076,7 @@ hr.divider,
     width: 23.23176%;
     margin-right: 0;
     position: relative;
-    top: -5px;
+    top: -8px;
     text-align: right; }
     .openassessment .openassessment__steps__step .step__status:last-child {
       margin-right: 0; } }
@@ -1088,7 +1088,7 @@ hr.divider,
     width: 23.23176%;
     margin-right: 0;
     position: relative;
-    top: -5px;
+    top: -8px;
     text-align: right; }
     .openassessment .openassessment__steps__step .step__status:last-child {
       margin-right: 0; } }
@@ -1152,7 +1152,7 @@ hr.divider,
   color: #e5a635; }
 .openassessment .openassessment__steps__step.is--incomplete .step__status__value {
   background: #e5a635; }
-  .openassessment .openassessment__steps__step.is--incomplete .step__status__value .copy {
+  .openassessment .openassessment__steps__step.is--incomplete .step__status__value .copy, .openassessment .openassessment__steps__step.is--incomplete .step__status__value .ico {
     color: white; }
 .openassessment .openassessment__steps__step.is--incomplete .step__label {
   color: #e5a635; }
@@ -1184,14 +1184,14 @@ hr.divider,
   background: #62c24a; }
   .openassessment .openassessment__steps__step.is--complete .step__status__value .ico {
     display: inline-block; }
-  .openassessment .openassessment__steps__step.is--complete .step__status__value .copy {
+  .openassessment .openassessment__steps__step.is--complete .step__status__value .copy, .openassessment .openassessment__steps__step.is--complete .step__status__value .ico {
     color: white; }
 .openassessment .openassessment__steps__step.has--error .step__counter:before {
   border-color: rgba(188, 85, 71, 0.5);
   color: #bc5547; }
 .openassessment .openassessment__steps__step.has--error .step__status__value {
   background: #bc5547; }
-  .openassessment .openassessment__steps__step.has--error .step__status__value .copy {
+  .openassessment .openassessment__steps__step.has--error .step__status__value .copy, .openassessment .openassessment__steps__step.has--error .step__status__value .ico {
     color: white; }
 .openassessment .openassessment__steps__step.has--error .step__label {
   color: #bc5547; }

apps/openassessment/xblock/static/js/src/oa_base.js

@@ -98,7 +98,7 @@ OpenAssessment.BaseUI.prototype = {
                         ui.save();
                     }
                 );
-                
+
             }
         ).fail(function(errMsg) {
             ui.showLoadError('response');
@@ -253,7 +253,7 @@ OpenAssessment.BaseUI.prototype = {
             function(html) {
                 // Load the HTML
                 $('#openassessment__grade', ui.element).replaceWith(html);
-                
+
                 // Install a click handler for collapse/expand
                 var sel = $('#openassessment__grade', ui.element);
                 ui.setUpCollapseExpand(sel);
@@ -267,7 +267,7 @@ OpenAssessment.BaseUI.prototype = {
         ).fail(function(errMsg) {
             ui.showLoadError('grade', errMsg);
         });
-        
+
     },
 
     /**
@@ -453,7 +453,7 @@ OpenAssessment.BaseUI.prototype = {
     showLoadError: function(step) {
         var container = '#openassessment__' + step;
         $(container).toggleClass('has--error', true);
-        $(container + ' .step__status__value i').removeClass().addClass('icon-warning-sign');
+        $(container + ' .step__status__value i').removeClass().addClass('ico icon-warning-sign');
         $(container + ' .step__status__value .copy').html('Unable to Load');
     }
 };

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

@@ -14,7 +14,7 @@
   // general: messages
   // --------------------
   .message {
-    margin-bottom: ($baseline-v*1.5);
+    margin-bottom: $baseline-v;
     border-radius: ($baseline-v/10);
     padding: $baseline-v ($baseline-h/2);
     background: $color-decorative-quaternary;
@@ -239,7 +239,7 @@
         @extend %icon-2;
         display: inline-block;
         vertical-align: bottom;
-        margin-left: ($baseline-v/4);
+        margin-left: ($baseline-v/2);
       }
 
       .copy {
@@ -255,7 +255,7 @@
         @include span-columns(2 of 6);
         @include omega();
         position: relative;
-        top: -($baseline-v/4);
+        top: -8px;
         text-align: right;
       }
 
@@ -263,7 +263,7 @@
         @include span-columns(3 of 12);
         @include omega();
         position: relative;
-        top: -($baseline-v/4);
+        top:-8px;
         text-align: right;
       }
 
@@ -271,7 +271,7 @@
         @include span-columns(3 of 12);
         @include omega();
         position: relative;
-        top: -($baseline-v/4);
+        top: -8px;
         text-align: right;
       }
 
@@ -279,7 +279,7 @@
         @include span-columns(3 of 12);
         @include omega();
         position: relative;
-        top: -($baseline-v/4);
+        top: -8px;
         text-align: right;
       }
     }
@@ -405,7 +405,7 @@
       .step__status__value {
         background: $color-incomplete;
 
-        .copy {
+        .copy, .ico {
           color: $white-t;
         }
       }
@@ -479,7 +479,7 @@
           display: inline-block;
         }
 
-        .copy {
+        .copy, .ico {
           color: $white-t;
         }
       }
@@ -496,7 +496,7 @@
       .step__status__value {
         background: $color-error;
 
-        .copy {
+        .copy, .ico {
           color: $white-t;
         }
       }