Changes to sass styling

TNL-708

openassessment/templates/openassessmentblock/response/oa_response.html

@@ -54,10 +54,10 @@
                     <ol class="list list--fields response__submission__content">
                         {% for part in saved_response.answer.parts %}
                             <li class="submission__answer__part">
-                                <article class="openassessment__prompt ui-toggle-visibility">
-                                    <h2 class="openassessment__prompt__title">{% trans "The prompt for this assignment" %}</h2>
+                                <article class="submission__answer__part__prompt ui-toggle-visibility">
+                                    <h2 class="submission__answer__part__prompt__title">{% trans "The prompt for this assignment" %}</h2>
 
-                                    <div class="openassessment__prompt__copy ui-toggle-visibility__content">
+                                    <div class="submission__answer__part__prompt__copy ui-toggle-visibility__content">
                                         {{ part.prompt.description|linebreaks }}
                                     </div>
                                 </article>

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

@@ -459,26 +459,26 @@
 
 
   // --------------------
-  // problem
+  // submission
   // --------------------
   .wrapper--openassessment__prompt {
 
   }
 
-  .openassessment__prompt {
+  .submission__answer__part__prompt {
     @extend %ui-well;
     position: relative;
-    margin-bottom: $baseline-v;
+    margin: ($baseline-v/2) 0;
     border: 1px solid $color-decorative-tertiary;
     @include border-left(($baseline-h/4) solid $color-decorative-secondary);
     @include padding-left(($baseline-h*0.75));
   }
 
-  .openassessment__prompt__title {
+  .submission__answer__part__prompt__title {
     @extend %text-sr;
   }
 
-  .openassessment__prompt__copy {
+  .submission__answer__part__prompt__copy {
     @extend %copy-2;
     color: $copy-color;
 
@@ -495,6 +495,11 @@
     }
   }
 
+  .submission__answer__part__text {
+    border: 1px solid $color-decorative-secondary;
+    background-color: $white-t;
+    padding: $baseline-v;
+  }
 
   // --------------------
   // response
@@ -816,9 +821,20 @@
 
   .submission__answer__display__content {
     @extend %copy-3;
-    @extend %ui-content-longanswer;
     @extend %ui-subsection-content;
-    @extend %ui-well;
+
+    padding: ($baseline-v/2) ($baseline-h/4) $baseline-v ($baseline-h/4);
+    background: $color-decorative-quaternary;
+    border-radius: ($baseline-v/10);
+    list-style: none;
+
+    .submission__answer__part {
+      margin: ($baseline-v*1.5) 0px 0px;
+
+      &:first-child {
+        margin-top: 0px;
+      }
+    }
   }
 
 

openassessment/xblock/test/test_openassessment.py

@@ -61,7 +61,7 @@ class TestOpenAssessment(XBlockHandlerTestCase):
         xblock_fragment = self.runtime.render(xblock, "student_view")
         body_html = xblock_fragment.body_html()
         present_prompt_text = "you'll provide a response to the question"
-        missing_article = u'<article class="openassessment__prompt'
+        missing_article = u'<article class="submission__answer__part__prompt'
         self.assertIn(present_prompt_text, body_html)
         self.assertNotIn(missing_article, body_html)