Presentation improvements for LMS (CSS)

mentoring/static/css/answer.css

+.mentoring .answer.editable {
+    height: 150px;
+    width: 100%;
+    margin-bottom: 20px;
+}
+
 .mentoring .answer.read_only {
     background: #f9f9f9;
     border-left: 10px solid #ccc;

mentoring/static/css/mentoring-table.css

@@ -2,11 +2,12 @@
     background-size: 100% auto;
     background-repeat: no-repeat;
     background-position: center;
+    margin-bottom: 20px;
 }
 
 .mentoring-table table {
     width: 100%;
-    border: 1px solid;
+    border: 1px solid rgb(221, 221, 221);
     border-spacing: 0;
     border-collapse: collapse;
 }
@@ -15,7 +16,11 @@
 .mentoring-table th {
     padding: 10px;
     vertical-align: top;
-    border: 1px solid;
+    border: 1px solid rgb(221, 221, 221);
+}
+
+.mentoring-table thead a {
+    font-weight: bold;
 }
 
 .mentoring-table.immunity-map td {

mentoring/static/css/mentoring.css

 .mentoring .messages {
+    display: none;
     margin-top: 10px;
+    border: 1px solid rgb(221, 221, 221);
+    padding: 12px 15px 20px;
+}
+
+.mentoring .messages .title1 {
+    color: rgb(170, 170, 170);
+    text-transform: uppercase;
+    font-weight: bold;
+    font-style: normal;
+    font-size: 0.9em;
+    margin-bottom: 5px;
 }
 
 .mentoring .warning {
@@ -23,3 +35,8 @@
 .mentoring .italic {
     font-style: italic;
 }
+
+.mentoring h3,
+.mentoring h4 {
+    margin-bottom: 20px;
+}

mentoring/static/css/quizz.css

+.mentoring .rating .question,
+.mentoring .choices .question {
+    font-weight: bold;
+}
+
+.mentoring .rating,
+.mentoring .choices {
+    margin-bottom: 5px;
+}
+
+.mentoring .choices .choice {
+    margin-right: 10px;
+}
+
+.mentoring .choices .choice .choice-selector {
+    margin-right: 5px;
+}

mentoring/static/js/mentoring.js

@@ -24,7 +24,8 @@ function MentoringBlock(runtime, element) {
     }
 
     function handleSubmitResults(results) {
-        $('.messages', element).empty();
+        $('.messages', element).hide();
+        $('.messages', element).html('<div class="title1">Feedback</div>');
 
         $.each(results.submitResults || [], function(index, submitResult) {
             var input = submitResult[0],
@@ -37,7 +38,10 @@ function MentoringBlock(runtime, element) {
         renderProgress();
 
         // Messages should only be displayed upon hitting 'submit', not on page reload
-        $('.messages', element).append(results.message);
+        if (results.message.trim()) {
+            $('.messages', element).append(results.message);
+            $('.messages', element).show();
+        }
     }
 
     function getChildren(element) {

mentoring/templates/html/answer_editable.html

-<textarea cols="100" rows="10" name="input">{{ self.student_input }}</textarea>
+<textarea class="answer editable" cols="50" rows="10" name="input">{{ self.student_input }}</textarea>

mentoring/templates/html/quizz_choices.html

 <fieldset class="choices">
-  <legend>{{ self.question }}</legend>
+  <legend class="question">{{ self.question }}</legend>
   <div class="choices">
     {% for choice in custom_choices %}
     <span class="choice">
-      <label><input type="radio" name="{{ self.name }}" value="{{ choice.value }}"{% if self.student_choice == choice.value %} checked{% endif %}> {{ choice.content }}</label>
+      <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="{{ choice.value }}"{% if self.student_choice == choice.value %} checked{% endif %}> {{ choice.content }}</label>
     </span>
     {% endfor %}
   </div>

mentoring/templates/html/quizz_rating.html

 <fieldset class="rating">
-  <legend>{{ self.question }}</legend>
+  <legend class="question">{{ self.question }}</legend>
   <div class="choices">
     <span class="low">{{ self.low }}</span>
     <span class="choice">
-      <label><input type="radio" name="{{ self.name }}" value="1"{% if self.student_choice == '1' %} checked{% endif %}>1</label>
+      <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="1"{% if self.student_choice == '1' %} checked{% endif %}>1</label>
     </span>
     <span class="choice">
-      <label><input type="radio" name="{{ self.name }}" value="2"{% if self.student_choice == '2' %} checked{% endif %}>2</label>
+      <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="2"{% if self.student_choice == '2' %} checked{% endif %}>2</label>
     </span>
     <span class="choice">
-      <label><input type="radio" name="{{ self.name }}" value="3"{% if self.student_choice == '3' %} checked{% endif %}>3</label>
+      <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="3"{% if self.student_choice == '3' %} checked{% endif %}>3</label>
     </span>
     <span class="choice">
-      <label><input type="radio" name="{{ self.name }}" value="4"{% if self.student_choice == '4' %} checked{% endif %}>4</label>
+      <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="4"{% if self.student_choice == '4' %} checked{% endif %}>4</label>
     </span>
     <span class="choice">
-      <label><input type="radio" name="{{ self.name }}" value="5"{% if self.student_choice == '5' %} checked{% endif %}>5</label>
+      <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="5"{% if self.student_choice == '5' %} checked{% endif %}>5</label>
     </span>
     <span class="low">{{ self.high }}</span>
     {% for choice in custom_choices %}