aligning step__status icons/text to be left-justified

apps/openassessment/templates/openassessmentblock/oa_base.html

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

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

@@ -9,11 +9,11 @@
   <span class="step__status__label">This step's status:</span>
   <span class="step__status__value">
     <span class="copy">
+    <i class="ico icon-warning-sign"></i>
       Incomplete
       (<span class="step__status__value--completed">{{ graded }}</span> of
       <span class="step__status__value--required">{{ must_grade }}</span>)
     </span>
-    <i class="ico icon-warning-sign"></i>
   </span>
 </span>
 {% endblock %}

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

@@ -8,12 +8,12 @@
 <span class="step__status">
   <span class="step__status__label">This step's status:</span>
   <span class="step__status__value">
+    <i class="ico icon-ok"></i>
     <span class="copy">
       Complete
       (<span class="step__status__value--completed">{{ graded }}</span> of
       <span class="step__status__value--required">{{ must_grade }}</span>)
     </span>
-    <i class="ico icon-ok"></i>
   </span>
 </span>
 {% endblock %}

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

@@ -8,11 +8,11 @@
 <span class="step__status">
   <span class="step__status__label">This step's status:</span>
   <span class="step__status__value">
+    <i class="ico icon-ok"></i>
     <span class="copy">
       Complete
       (<span class="step__status__value--completed">{{ graded }}</span>
     </span>
-    <i class="ico icon-ok"></i>
   </span>
 </span>
 {% endblock %}

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

@@ -8,11 +8,11 @@
 <span class="step__status">
   <span class="step__status__label">This step's status:</span>
   <span class="step__status__value">
+    <i class="ico icon-ok"></i>
     <span class="copy">
       Complete
       (<span class="step__status__value--completed">{{ graded }}</span>
     </span>
-    <i class="ico icon-ok"></i>
   </span>
 </span>
 {% endblock %}

apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html

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

apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html

@@ -8,8 +8,8 @@
 <span class="step__status">
   <span class="step__status__label">This step's status:</span>
   <span class="step__status__value">
-    <span class="copy">Complete</span>
     <i class="ico icon-ok"></i>
+    <span class="copy">Complete</span>
   </span>
 </span>
 {% endblock %}

apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html

@@ -8,8 +8,8 @@
 <span class="step__status">
   <span class="step__status__label">This step's status:</span>
   <span class="step__status__value">
-    <span class="copy">Complete</span>
     <i class="ico icon-ok"></i>
+    <span class="copy">Complete</span>
   </span>
 </span>
 {% endblock %}

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

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

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

@@ -8,8 +8,8 @@
 <span class="step__status">
   <span class="step__status__label">This step's status:</span>
   <span class="step__status__value">
-    <span class="copy">Complete</span>
     <i class="ico icon-ok"></i>
+    <span class="copy">Complete</span>
   </span>
 </span>
 {% endblock %}

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

@@ -289,8 +289,8 @@
       .ico {
         @extend %icon-3;
         display: inline-block;
-        vertical-align: bottom;
-        margin-left: ($baseline-v/4);
+        vertical-align: baseline;
+        margin-right: ($baseline-v/4);
       }
 
       .copy {
@@ -307,7 +307,6 @@
         @include omega();
         position: relative;
         top: -12px;
-        text-align: right;
       }
 
       @include media($bp-dm) {
@@ -315,7 +314,6 @@
         @include omega();
         position: relative;
         top:-12px;
-        text-align: right;
       }
 
       @include media($bp-dl) {
@@ -323,7 +321,6 @@
         @include omega();
         position: relative;
         top: -12px;
-        text-align: right;
       }
 
       @include media($bp-dx) {
@@ -331,7 +328,6 @@
         @include omega();
         position: relative;
         top: -8px;
-        text-align: right;
       }
     }