WIP - styling rubric/complete response state

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

@@ -27,28 +27,33 @@
 
 <!-- peer evaluations -->
 <article class="submission__peer-evaluations">
-<h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
+    <h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
 
-<ol class="list submission__peer-evaluations__questions">
+    <ol class="list submission__peer-evaluations__questions">
 
-{% for criterion in rubric_criteria %}
-{% with criterion_num=forloop.counter %}
-<!-- individual question from rubric -->
-<li class="question question--{{ criterion_num }} ui-toggle-visibility">
+    {% for criterion in rubric_criteria %}
+    {% with criterion_num=forloop.counter %}
+    <!-- individual question from rubric -->
+    <li class="question question--{{ criterion_num }} ui-toggle-visibility">
         <h4 class="question__title ui-toggle-visibility__control">
-        <span class="title__copy">{{ criterion.name }}</span>
+            <span class="question__title__copy">{{ criterion.name }}</span>
+
             <span class="question__score">
               <span class="label sr">Overall Question Score</span>
               <span class="question__score__value">{{ criterion.median_score }}</span>
               <span class="label label--divider sr">out of</span>
-              <span class="question__score__potential">{{ criterion.total_value }}</span>
+              <span class="question__score__potential">
+                {{ criterion.total_value }}
+                <span class="unit">Points</span>
+              </span>
             </span>
         </h4>
+
+        <ul class="question__answers ui-toggle-visibility__content">
             {% for assessment in peer_assessments %}
             {% with peer_num=forloop.counter %}
             {% for part in assessment.parts %}
             {% if part.option.criterion.name == criterion.name %}
-    <ul class="question__answers ui-toggle-visibility__content">
             <li class="answer peer-assessment--{{ peer_num}}"
                 id="question--{{ criterion_num }}__answer-{{ peer_num }}">
                 <h5 class="answer__title">
@@ -66,19 +71,18 @@
                     {{ part.option.explanation }}
                   </span>
             </li>
-    </ul>
             {% endif %}
             {% endfor %}
             {% endwith %}
             {% endfor %}
-</li>
-{% endwith %}
-{% endfor %}
-</ol>
-</article>
+        </ul>
+    </li>
+    {% endwith %}
+    {% endfor %}
+    </ol>
 
-<!-- peer assessment feedback -->
-<form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
+    <!-- peer assessment feedback -->
+    <form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
         <h3 class="submission__feeedback__title ui-toggle-visibility__control">Give Feedback On Peer Evaluations</h3>
 
         <ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
@@ -93,6 +97,7 @@
                 <button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
             </li>
         </ul>
-</form>
+    </form>
+</article>
 </div>
 {% endblock %}

apps/openassessment/templates/openassessmentblock/t-grade.html

@@ -85,12 +85,4 @@
   <div class="openassessment__grade__content">
     <span class="grade__value">4.00</span> out of <span class="grade__potential">5.00</span>
   </div>
-
-  <div class="grade__actions">
-    <ul class="list list--actions">
-      <li class="list--actions__item">
-        <a class="action action--view">View in Courseware</a>
-      </li>
-    </ul>
-  </div>
 </div>

apps/openassessment/xblock/static/sass/oa/utilities/_developer.scss

@@ -11,6 +11,13 @@
 //   background: transparent;
 // }
 
+// --------------------
+// Views: Counterbalancing XBlock workbench styling
+// --------------------
+.workbench .vertical {
+  border: none;
+}
+
 
 // --------------------
 // Views: Static HTML Page Display

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

@@ -7,11 +7,29 @@
 // --------------------
 // in-view extends
 // --------------------
-%ui--content--longanswer {
+%ui-content-longanswer {
   max-height: ($baseline-v*15);
   overflow-y: scroll;
 }
 
+%ui-section {
+  border: ($baseline-v/10) solid $color-decorative-tertiary;
+  border-radius: ($baseline-v/10);
+  margin-bottom: $spacing-bravo;
+}
+
+%ui-section-title {
+  @extend %hd-golf;
+  @extend %t-weight3;
+  padding: $spacing-charlie $spacing-bravo;
+  background: $color-decorative-tertiary;
+  color: $heading-secondary-color;
+}
+
+%ui-section-content {
+  padding: $spacing-bravo;
+}
+
 .wrapper--openassessment {
   position: relative;
 }
@@ -350,8 +368,8 @@
 
     }
 
-    // STATE: step is complete/submitted
-    &.is--complete, &.is--submitted {
+    // STATE: step is complete/submitted/graded
+    &.is--complete, &.is--submitted, &.is--graded {
 
       .step__counter:before {
         border-color: rgba($color-complete, 0.5);
@@ -460,7 +478,7 @@
         }
 
         textarea {
-          @extend %ui--content--longanswer;
+          @extend %ui-content-longanswer;
           width: 100%;
           min-height: ($baseline-v*10);
         }
@@ -485,41 +503,162 @@
 
     // STATE: displayed response
     .submission__answer__display {
-      border: ($baseline-v/10) solid $color-decorative-tertiary;
-      border-radius: ($baseline-v/10);
+      @extend %ui-section;
     }
 
     .submission__answer__display__title {
-      @extend %hd-golf;
-      @extend %t-weight3;
-      padding: $spacing-charlie $spacing-bravo;
-      background: $color-decorative-tertiary;
-      color: $heading-secondary-color;
+      @extend %ui-section-title;
     }
 
     .submission__answer__display__content {
       @extend %copy-charlie;
-      @extend %ui--content--longanswer;
-      padding: $spacing-bravo;
+      @extend %ui-content-longanswer;
+      @extend %ui-section-content;
     }
 
-    // STATE: complete/graded
-    &.is--graded {
+    // --------------------
+    // STATE: graded/complete
+    // --------------------
 
-      .submission__answer__display {
-        margin-bottom: $spacing-bravo;
+    // peer review summary
+    .submission__peer-evaluations {
+      @extend %ui-section;
     }
 
-      .submission__peer-evaluations {
+    .submission__peer-evaluations__title {
+      @extend %ui-section-title;
+    }
+
+    // rubric questions
+    .submission__peer-evaluations__questions {
+      @extend %no-list;
+      @extend %ui-section-content;
+      margin-bottom: $spacing-charlie; // override city
+
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      // individual question
+      .question {
+        margin-bottom: $spacing-charlie;
+        @extend %wipe-last-child;
+      }
+
+      .question__title {
+        @include clearfix();
         margin-bottom: $spacing-bravo;
+        border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
+        padding-bottom: $spacing-delta;
       }
 
-      .submission__peer-evaluations__title {
-        @extend %hd-golf;
+      .question__title__copy {
+        @extend %hd-delta;
         @extend %t-weight3;
+        float: left;
+        color: $heading-secondary-color;
+      }
+
+      .question__score {
+        @extend %copy-foxtrot;
+        @extend %t-titlecase;
+        float: right;
+        position: relative;
+        bottom: -($spacing-delta);
+        margin-left: $spacing-bravo;
+        padding: $spacing-delta $spacing-charlie;
+        background: $color-decorative-tertiary;
+        color: $white;
+      }
+
+      .question__score__value {
+        color: $color-complete;
+
+        &:after {
+          content: "/";
+          margin-left: $spacing-delta;
           color: $heading-secondary-color;
         }
       }
+
+      .question__score__potential {
+        color: $heading-secondary-color;
+
+        .unit {
+          margin-left: $spacing-delta;
+        }
+      }
+
+      .question__answers {
+        @extend %no-list;
+        @extend %wipe-last-child;
+        @include row();
+      }
+
+      // individual answers
+      .answer {
+        margin-bottom: $spacing-bravo;
+
+        @include media($bp-m) {
+        }
+
+        @include media($bp-ds) {
+          @include span-columns(3 of 6);
+          @include omega(2n);
+        }
+
+        @include media($bp-dm) {
+          @include span-columns(3 of 12);
+          @include omega(3n);
+        }
+
+        @include media($bp-dl) {
+          @include span-columns(3 of 12);
+          @include omega(3n);
+        }
+
+        @include media($bp-dx) {
+          @include span-columns(3 of 12);
+          @include omega(3n);
+        }
+      }
+
+      .answer__source {
+        @extend %hd-golf;
+        display: block;
+        color: $heading-tertiary-color;
+      }
+
+      .answer__value {
+        @extend %copy-charlie;
+        display: block;
+        margin-bottom: $spacing-charlie;
+        color: $heading-primary-color;
+      }
+
+      .answer__content {
+        @extend %copy-delta;
+        display: block;
+        color: $copy-supplemental-color;
+      }
+    }
+
+    // feedback form
+    .submission__feeedback {
+      @extend %ui-section-content;
+      border-top: ($baseline-v/4) solid $color-decorative-tertiary;
+      padding-top: $spacing-bravo;
+    }
+
+    .submission__feeedback__title {
+
+    }
+
+    .submission__feeedback__content {
+
+    }
   }
 
 
@@ -594,9 +733,4 @@
   // STATE: waiting
   // --------------------
 
-
-  // --------------------
-  // STATE: graded/complete
-  // --------------------
-
 }