Tweak spacing and text boldness on assessments results

problem_builder/public/css/mentoring.css

@@ -5,9 +5,6 @@
 .mentoring .messages,
 .mentoring .assessment-messages {
     display: none;
-    margin-top: 10px;
-    border-top: 2px solid #eaeaea;
-    padding: 12px 0px 20px;
 }
 
 .mentoring .messages .title1,
@@ -74,7 +71,7 @@
     display: inline-block;
     vertical-align: middle;
     font-size: 13px;
-    font-weight: bold;
+    font-weight: 600;
 }
 
 .mentoring .attempts > span {
@@ -121,6 +118,10 @@
     margin-right: 10px;
 }
 
+.mentoring .grade .grade-result {
+    margin: 20px;
+}
+
 .mentoring .grade .checkmark-incorrect {
     margin-left: 10px;
     margin-right: 20px;
@@ -158,6 +159,11 @@
 .mentoring .results-section {
     float: left;
 }
+
+.mentoring .results-section p {
+    margin: 4px;
+}
+
 .mentoring .clear {
     display: block;
     clear: both;

problem_builder/templates/html/mentoring_grade.html

@@ -4,51 +4,55 @@
   <% }} else {{ %>
   <p><%= gettext("Note: if you retake this assessment, only your final score counts.") %></p>
   <% }} %>
-  <h2>
-    <%= _.template(gettext("You scored {percent}% on this assessment."), {percent: score}, {interpolate: /\{(.+?)\}/g}) %>
-  </h2>
-  <hr/>
 
-  <span class="assessment-checkmark icon-2x checkmark-correct icon-ok fa fa-check"></span>
-  <div class="results-section">
-    <p>
-      <%= _.template(
-        ngettext(
-          "You answered 1 question correctly.",
-          "You answered {number_correct} questions correctly.",
-          correct_answer
-        ), {number_correct: correct_answer}, {interpolate: /\{(.+?)\}/g})
-      %>
-    </p>
-    <%= runDetails('correct') %>
-  </div>
-  <div class="clear"></div>
-  <span class="assessment-checkmark icon-2x checkmark-partially-correct icon-ok fa fa-check"></span>
-  <div class="results-section">
-    <p>
-      <%= _.template(
-        ngettext(
-          "You answered 1 question partially correctly.",
-          "You answered {number_partially_correct} questions partially correctly.",
-          partially_correct_answer
-        ), {number_partially_correct: partially_correct_answer}, {interpolate: /\{(.+?)\}/g})
-      %>
-    </p>
-    <%= runDetails('partial') %>
-  </div>
-  <div class="clear"></div>
-  <span class="assessment-checkmark icon-2x checkmark-incorrect icon-exclamation fa fa-exclamation"></span>
-  <div class="results-section">
-    <p>
-      <%= _.template(
-        ngettext(
-          "You answered 1 question incorrectly.",
-          "You answered {number_incorrect} questions incorrectly.",
-          incorrect_answer
-        ), {number_incorrect: incorrect_answer}, {interpolate: /\{(.+?)\}/g})
-      %>
-    </p>
-    <%= runDetails('incorrect') %>
+  <div class="grade-result">
+    <h2>
+      <%= _.template(gettext("You scored {percent}% on this assessment."), {percent: score}, {interpolate: /\{(.+?)\}/g}) %>
+    </h2>
+    <hr/>
+
+    <span class="assessment-checkmark icon-2x checkmark-correct icon-ok fa fa-check"></span>
+    <div class="results-section">
+      <p>
+        <%= _.template(
+          ngettext(
+            "You answered 1 question correctly.",
+            "You answered {number_correct} questions correctly.",
+            correct_answer
+          ), {number_correct: correct_answer}, {interpolate: /\{(.+?)\}/g})
+        %>
+      </p>
+      <%= runDetails('correct') %>
+    </div>
+    <div class="clear"></div>
+    <span class="assessment-checkmark icon-2x checkmark-partially-correct icon-ok fa fa-check"></span>
+    <div class="results-section">
+      <p>
+        <%= _.template(
+          ngettext(
+            "You answered 1 question partially correctly.",
+            "You answered {number_partially_correct} questions partially correctly.",
+            partially_correct_answer
+          ), {number_partially_correct: partially_correct_answer}, {interpolate: /\{(.+?)\}/g})
+        %>
+      </p>
+      <%= runDetails('partial') %>
+    </div>
+    <div class="clear"></div>
+    <span class="assessment-checkmark icon-2x checkmark-incorrect icon-exclamation fa fa-exclamation"></span>
+    <div class="results-section">
+      <p>
+        <%= _.template(
+          ngettext(
+            "You answered 1 question incorrectly.",
+            "You answered {number_incorrect} questions incorrectly.",
+            incorrect_answer
+          ), {number_incorrect: incorrect_answer}, {interpolate: /\{(.+?)\}/g})
+        %>
+      </p>
+      <%= runDetails('incorrect') %>
+    </div>
+    <div class="clear"></div>
+    <hr/>
   </div>
-  <div class="clear"></div>
 </script>