revising markup and styling for oa_*.html templates:

* matches static template expected markup
* adds in missing classes
* revises indentation/nesting
* adds in system__element markup/styling for system-based DOM elements

apps/openassessment/templates/openassessmentblock/oa_base.html

@@ -12,7 +12,7 @@
 
 <div class="wrapper wrapper--openassessment theme--basic">
     <div class="openassessment" id="openassessment">
-
+        <div class="wrapper--grid">
             <h1 class="openassessment__title">
                 <span class="openassessment__title--super">
                     {{ title }}
@@ -77,4 +77,5 @@
             <!-- STATUS: problem grade -->
             {% include "openassessmentblock/oa_grade.html" %}
         </div>
+    </div>
 </div>

apps/openassessment/templates/openassessmentblock/oa_grade.html

@@ -18,6 +18,6 @@
 
     <div class="openassessment__grade__content">
         <span class="grade__value">{{ grade_state.value }}</span>
-        <p>{{ grade_state.message }}</p>
+        <p class="grade__description">{{ grade_state.message }}</p>
     </div>
 </div>

apps/openassessment/templates/openassessmentblock/oa_peer_assessment.html

@@ -9,41 +9,19 @@
 
  -->
 
-
 <!-- CASE: default/not started -->
-<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
-    <div id="peer_submission_uuid" hidden="true">{{ peer_submission.uuid }}</div>
-    <h2 class="step__title">
-        <span class="step__label">Evaluate Peers' Responses</span>
-        <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
-    </h2>
+<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
 
-    <span class="step__status">
-      <span class="step__status__label">This step's status:</span>
-      <span class="step__status__value">
-        <span class="step__status__value--completed">0</span> of
-        <span class="step__status__value--required">5</span> completed
+    <span class="system__element" id="peer_submission_uuid">
+        {{ peer_submission.uuid }}
     </span>
-    </span>
-{#</header>#}
-
-<div class="step__instruction">
-    <p>Please read and evaluate the following response from one of your peers in the course.</p>
-</div>
-
-<div class="step__content">
-    <ul class="list--peer-assessments">
-        <li class="list--peer-assessments__item">
-            <article class="peer-assessment" id="peer-assessment--001">
-                <header class="peer-assessment__header">
-                    <h3 class="peer-assessment__title">Assessment #
-                        <span class="peer-assessment__number--current">1</span> of
-                        <span class="peer-assessment__number--required">3</span>
-                    </h3>
 
-            <span class="peer-assessment__expected-time">
-              <span class="label">Expected Time Spent:</span>
-              <span class="value">20 Minutes</span>
+    <header class="step__header ui-toggle-visibility__control">
+        <h2 class="step__title">
+            <span class="step__counter"></span>
+            <span class="wrapper--copy">
+                <span class="step__label">Evaluate Peers' Responses</span>
+                <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
             </span>
                 </header>
 
@@ -84,14 +62,6 @@
                             </li>
                             {% endfor %}
 
-                            <!-- individual rubric question (text) -->
-                            <li class="field field--textarea assessment__rubric__question" id="assessment__rubric__question--004">
-                                <label for="assessment__rubric__question--004__value">Please provide any other feedback you have around this response</label>
-                                <textarea id="assessment__rubric__question--004__value" placeholder="I felt this response was..."></textarea>
-                            </li>
-                        </ol>
-                    </fieldset>
-
                         <ul class="list list--actions">
                             <li class="list--actions__item">
                                 <button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit">Submit your assessment &amp; move to response #2</button>
@@ -101,5 +71,5 @@
                 </article>
             </li>
         </ul>
-</div>
+    </div>
 </li>

apps/openassessment/templates/openassessmentblock/oa_response.html

@@ -19,10 +19,13 @@
     {%  block header %}
     <!--header class="step__header ui-toggle-visibility__control"-->
         <h2 class="step__title">
+            <span class="step__counter"></span>
+            <span class="wrapper--copy">
                 <span class="step__label">Your Response</span>
                 {% if formatted_due_datetime %}
                 <span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
                 {% endif %}
+            </span>
         </h2>
 
     <span class="step__status">

apps/openassessment/templates/openassessmentblock/oa_self_assessment.html

@@ -12,17 +12,20 @@
 
 <!-- CASE: default/not started -->
 <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
-{#    <header class="step__header">#}
+    <header class="step__header">
         <h2 class="step__title">
+            <span class="step__counter"></span>
+            <span class="wrapper--copy">
                 <span class="step__title__label">Evaluate Your Response</span>
                 <span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
+            </span>
         </h2>
 
         <span class="step__status">
           <span class="step__status__label">This step's status:</span>
           <span class="step_status_value">Incomplete</span>
         </span>
-{#    </header>#}
+    </header>
 
     <div class="step--content">
         <article class="self-assessment" id="self-assessment">

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

@@ -30,6 +30,13 @@ hr.divider,
   @extend %text-sr;
 }
 
+// --------------------
+// system-needed elements, but visually hidden
+// --------------------
+.system__element {
+  @extend %text-sr;
+}
+
 
 // --------------------
 // semantic lists used for UI