revising styling/layout for error messages

apps/openassessment/templates/openassessmentblock/peer/oa_peer_unavailable.html

@@ -9,7 +9,6 @@
   <span class="step__status__label">This step's status:</span>
   <span class="step__status__value">
     <span class="copy">Unavailable</span>
-    <span class="ico"><i class="icon-info-sign"></i></span>
   </span>
 </span>
 {% endblock %}

apps/openassessment/templates/openassessmentblock/self/oa_self_unavailable.html

@@ -9,7 +9,6 @@
   <span class="step__status__label">This step's status:</span>
   <span class="step__status__value">
     <span class="copy">Unavailable</span>
-    <i class="ico icon-warning-sign"></i>
   </span>
 </span>
 {% endblock %}

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

@@ -438,7 +438,7 @@ OpenAssessment.BaseUI.prototype = {
         var container = '#openassessment__' + step;
         $(container).toggleClass('has--error', true);
         $(container + ' .step__status__value i').removeClass().addClass('icon-warning-sign');
-        $(container + ' .step__status__value').html('Unable to Load');
+        $(container + ' .step__status__value .copy').html('Unable to Load');
     }
 };
 

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

@@ -60,64 +60,20 @@
         color: $color-focused;
       }
 
+      .step__label, .step__deadline {
+        display: block;
+      }
 
-      // step title/name - TODO: nesting needed due to LMS CSS overrides
-      .step__title {
-
-        @include media($bp-ds) {
-          @include span-columns(4 of 6);
-        }
-
-        @include media($bp-dm) {
-          @include span-columns(9 of 12);
-        }
-
-        @include media($bp-dl) {
-          @include span-columns(9 of 12);
-        }
-
-        @include media($bp-dx) {
-          @include span-columns(9 of 12);
-        }
-
-        .step__counter, .wrapper--copy {
-          display: inline-block;
-          vertical-align: middle;
-        }
-
-        // step counter
-        .step__counter {
-
-          // increment: show numbers using parent list counter
-          &:before {
-            @extend %hd-6;
-            @extend %t-weight4;
-            content: counter(item, decimal);
-            counter-increment: item;
-            margin-right: ($baseline-v/4);
-            border-radius: ($baseline-v/10);
-            border: 1px solid rgba($color-focused, 0.5);
-            padding: ($baseline-v/4) ($baseline-v/2);
-            color: $color-focused;
-
-          }
-        }
-
-        .step__label, .step__deadline {
-          display: block;
-        }
-
-        .step__label {
-          @extend %hd-4;
-          @extend %t-weight3;
-          @extend %trans-color;
-        }
+      .step__label {
+        @extend %hd-4;
+        @extend %t-weight3;
+        @extend %trans-color;
+      }
 
-        .step__deadline {
-          @extend %hd-8;
-          @extend %trans-color;
-          color: $heading-secondary-color;
-        }
+      .step__deadline {
+        @extend %hd-8;
+        @extend %trans-color;
+        color: $heading-secondary-color;
       }
     }
 
@@ -279,25 +235,25 @@
           margin-bottom: ($baseline-v/2);
 
           @include media($bp-ds) {
-            @include span-columns(4 of 6);
+            @include span-columns(3 of 6);
             margin-bottom: 0;
             text-align: left;
           }
 
           @include media($bp-dm) {
-            @include span-columns(6 of 12);
+            @include span-columns(4 of 12);
             margin-bottom: 0;
             text-align: left;
           }
 
           @include media($bp-dl) {
-            @include span-columns(6 of 12);
+            @include span-columns(4 of 12);
             margin-bottom: 0;
             text-align: left;
           }
 
           @include media($bp-dx) {
-            @include span-columns(6 of 12);
+            @include span-columns(4 of 12);
             margin-bottom: 0;
             text-align: left;
           }
@@ -307,19 +263,19 @@
           display: block;
 
           @include media($bp-ds) {
-            @include span-columns(3 of 6);
+            @include span-columns(4 of 6);
           }
 
           @include media($bp-dm) {
-            @include span-columns(6 of 12);
+            @include span-columns(8 of 12);
           }
 
           @include media($bp-dl) {
-            @include span-columns(6 of 12);
+            @include span-columns(8 of 12);
           }
 
           @include media($bp-dx) {
-            @include span-columns(6 of 12);
+            @include span-columns(8 of 12);
           }
         }
       }
@@ -617,11 +573,6 @@
       padding: ($baseline-v/2) ($baseline-h/2);
       background: transparent;
 
-      .action--save, .tip {
-        display: block;
-        width: 100%;
-      }
-
       .action--save {
         @extend %btn--secondary;
         @extend %action-4;
@@ -632,21 +583,25 @@
         @include media($bp-ds) {
           display: inline-block;
           margin-right: ($baseline-v/2);
+          margin-bottom: 0;
         }
 
         @include media($bp-dm) {
           display: inline-block;
           margin-right: ($baseline-v/2);
+          margin-bottom: 0;
         }
 
         @include media($bp-dl) {
           display: inline-block;
           margin-right: ($baseline-v/2);
+          margin-bottom: 0;
         }
 
         @include media($bp-dx) {
           display: inline-block;
           margin-right: ($baseline-v/2);
+          margin-bottom: 0;
         }
       }
     }