Merge pull request #636 from edx/muzaffar/tnl814-multiline-issue-ux

fixed the multi-line issue for criterion prompt, criterion option text,

openassessment/templates/openassessmentblock/grade/oa_grade_complete.html

@@ -171,7 +171,7 @@
                                             </h6>
 
                                             <div class="feedback__value">
-                                              {{ feedback }}
+                                                <p class="feedback__value__raw">{{ feedback }}</p>
                                             </div>
                                         </li>
                                         {% endfor %}
@@ -182,7 +182,7 @@
                                             </h6>
 
                                             <div class="feedback__value">
-                                              {{ criterion.self_feedback }}
+                                                <p class="feedback__value__raw">{{ criterion.self_feedback }}</p>
                                             </div>
                                         </li>
                                         {% endif %}
@@ -215,9 +215,7 @@
 
                                         <div class="answer__value">
                                             <h6 class="label sr">{% trans "Peer's assessment" %}: </h6>
-                                            <div class="value">
-                                                <p>{{ assessment.feedback }}</p>
-                                            </div>
+                                            <p class="answer__value__raw">{{ assessment.feedback }}</p>
                                         </div>
                                     </li>
                                     {% endif %}
@@ -234,9 +232,7 @@
 
                                         <div class="answer__value">
                                             <h6 class="label sr">{% trans "Your assessment" %}: </h6>
-                                            <div class="value">
-                                                <p>{{ self_assessment.feedback }}</p>
-                                            </div>
+                                            <p class="answer__value__raw">{{ self_assessment.feedback }}</p>
                                         </div>
                                     </li>
                                     {% endif %}

openassessment/xblock/static/sass/oa/utilities/_extends.scss

@@ -175,6 +175,7 @@
   .question__title__copy {
     @extend %t-heading;
     margin-left: ($baseline-h/4);
+    white-space: pre-wrap;
     color: $heading-color;
   }
 }
@@ -246,6 +247,7 @@
 
   .answer__tip {
     margin-bottom: ($baseline-v/2);
+    white-space: pre-wrap;
 
     @extend %copy-3;
     margin-right: $baseline-v;

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

@@ -634,6 +634,7 @@
 
         .question__title__copy {
           margin-left: 0;
+          white-space: pre-wrap;
         }
 
         textarea {
@@ -858,6 +859,7 @@
     .question__title__copy {
       @extend %t-heading;
       margin-left: ($baseline-h/4);
+      white-space: pre-wrap;
       color: $heading-color;
     }
 
@@ -942,6 +944,10 @@
       display: block;
       margin-bottom: ($baseline-v/2);
       color: $heading-primary-color;
+
+      .answer__value__raw {
+        white-space: pre-wrap;
+      }
     }
 
     .answer__value__value {
@@ -1015,6 +1021,11 @@
     .feedback__value {
       @extend %copy-3;
       display: block;
+
+      .feedback__value__raw {
+        white-space: pre-wrap;
+      }
+
     }
   }