Merge pull request #144 from edx/talbs/fix-uimisc

Fix - General UI/Front End Clean Up

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/peer/oa_peer_waiting.html

@@ -9,7 +9,6 @@
   <span class="step__status__label">This step's status:</span>
   <span class="step__status__value">
     <span class="copy">Awaiting Peer Responses</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

@@ -424,7 +424,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/utilities/_shame.scss

@@ -41,7 +41,7 @@
   }
 
   // step header
-  .step__header {
+  .openassessment__steps .openassessment__steps__step .step__header {
 
     .step__deadline {
       color: $color-focused;
@@ -72,6 +72,29 @@
         text-transform: none;
         letter-spacing: normal;
       }
+
+      .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__status__value {
@@ -135,6 +158,11 @@
     }
   }
 
+  // actions
+  .action--submit, .action--save {
+    box-shadow: none;
+  }
+
   // --------------------
   // Studio countermeasures
   // --------------------

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

@@ -60,70 +60,27 @@
         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;
       }
     }
 
     // step status
     .step__status {
 
+
       .step__status__value {
         display: block;
         border-radius: ($baseline-v/5);
@@ -134,16 +91,27 @@
         @include media($bp-m) {
           margin-top: ($baseline-v/2);
         }
-      }
 
-      .ico, .copy {
-        display: inline-block;
-        vertical-align: bottom;
+        @include media($bp-ds) {
+          display: inline-block;
+          vertical-align: bottom;
+        }
+
+        @include media($bp-dm) {
+          display: inline-block;
+          vertical-align: bottom;
+        }
+
+        @include media($bp-dl) {
+          display: inline-block;
+          vertical-align: bottom;
+        }
       }
 
       .ico {
         @extend %t-icon-m;
-        display: none; // hiding by default
+        display: inline-block;
+        vertical-align: bottom;
         margin-left: ($baseline-v/4);
       }
 
@@ -267,7 +235,7 @@
           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;
           }
@@ -600,35 +568,36 @@
     }
 
     .response__submission__actions {
-      @include transition(background-color $tmg-f1 ease-in-out 0s);
-      border-radius: ($baseline-v/5);
-      padding: ($baseline-v/2) ($baseline-h/2);
-      background: transparent;
 
       .action--save {
         @extend %btn--secondary;
         @extend %action-4;
         display: block;
         text-align: center;
+        margin-bottom: ($baseline-v/2);
 
         @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;
         }
       }
     }
@@ -738,36 +707,6 @@
         }
       }
     }
-
-    // step actions
-    .peer-assessment__actions {
-      @include transition(background-color $tmg-f1 ease-in-out 0s);
-      border-radius: ($baseline-v/5);
-      padding: ($baseline-v/2) ($baseline-h/2);
-      background: transparent;
-      text-align: center;
-
-      @include media($bp-ds) {
-        text-align: right;
-      }
-
-      @include media($bp-dm) {
-       text-align: right;
-      }
-
-      @include media($bp-dl) {
-        text-align: right;
-      }
-
-      @include media($bp-dx) {
-        text-align: right;
-      }
-
-      .action--submit {
-        @extend %btn--primary;
-        @extend %action-4;
-      }
-    }
   }
 
 
@@ -829,36 +768,6 @@
         }
       }
     }
-
-    // step actions
-    .self-assessment__actions {
-      @include transition(background-color $tmg-f1 ease-in-out 0s);
-      border-radius: ($baseline-v/5);
-      padding: ($baseline-v/2) ($baseline-h/2);
-      background: transparent;
-      text-align: center;
-
-      @include media($bp-ds) {
-        text-align: right;
-      }
-
-      @include media($bp-dm) {
-       text-align: right;
-      }
-
-      @include media($bp-dl) {
-        text-align: right;
-      }
-
-      @include media($bp-dx) {
-        text-align: right;
-      }
-
-      .action--submit {
-        @extend %btn--primary;
-        @extend %action-4;
-      }
-    }
   }
 
 

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

@@ -115,7 +115,6 @@
   background: $action-primary-color;
   border: 1px solid shade($action-primary-color, 15%);
   color: tint($action-primary-color, 90%);
-  box-shadow: none; // needed for LMS override
 
   .copy {
     @extend %t-weight3;
@@ -150,7 +149,6 @@
   background: $action-secondary-color;
   border: 1px shade($action-secondary-color, 10%);
   color: tint($action-secondary-color, 90%);
-  box-shadow: none; // needed for LMS override
 
   .copy {
     @extend %t-weight3;