Merge pull request #38 from edx-solutions/design-refresh-fixes

Design refresh - Adds extra fixes

mentoring/public/css/mentoring.css

@@ -36,7 +36,6 @@
     font-style: italic;
 }
 
-.mentoring h3,
 .mentoring h4 {
     margin-bottom: 20px;
 }
@@ -46,22 +45,41 @@
 }
 
 .mentoring .submit {
+    display: inline-block;
     margin-top: 20px;
 }
 
 .mentoring .attempts {
-    margin-top: 20px;
+    margin-left: 10px;
     display: inline-block;
-    vertical-align: baseline;
+    vertical-align: middle;
+}
+
+.mentoring .attempts > span {
     color: #777;
     font-style: italic;
     webkit-font-smoothing: antialiased;
 }
 
 .mentoring .checkmark-correct {
+    font-size: 22pt;
     color: #006600;
+    color: #629b2b;
+    float: left;
 }
 
 .mentoring .checkmark-incorrect {
+    font-size: 22pt;
     color: #ff0000;
+    float: left;
+}
+
+.mentoring div {
+    overflow: hidden;
+}
+
+.mentoring .choice-result{
+    display:block;
+    float: left;
+    height:33.33px;
 }

mentoring/public/css/questionnaire.css

@@ -4,10 +4,6 @@
     margin-bottom: 10px;
 }
 
-.mentoring .questionnaire .choice {
-    margin: 10px 0;
-}
-
 .mentoring .choices .choice-checkbox {
     display: inline-block;
     margin-top: 5px;
@@ -22,11 +18,6 @@
 }
 
 .mentoring .questionnaire .choice-result.checkmark-correct,
-.mentoring .questionnaire .choice-answer.checkmark-correct {
-    position: relative;
-    top: -3px;
-}
-
 .mentoring .questionnaire .choice-result.checkmark-incorrect {
     text-align:center;
 }
@@ -78,3 +69,7 @@
 .mentoring .choices-list .choice-selector {
     margin-right: 5px;
 }
+
+.mentoring .choice-label {
+    margin-top: 5px;
+}

mentoring/templates/html/mcqblock_choices.html

 <fieldset class="choices questionnaire">
-  <legend class="question">{{ self.question }}</legend>
+  <legend class="question">
+    <h3>QUESTION</h3>
+    <p>{{ self.question }}</p>
+  </legend>
   <div class="choices-list">
     {% for choice in custom_choices %}
     <div class="choice">
-      <span class="choice-result icon-2x"></span>
+      <div class="choice-result icon-2x"></div>
       <label class="choice-label">
         <input class="choice-selector" type="radio" name="{{ self.name }}" value="{{ choice.value }}"{% if self.student_choice == choice.value %} checked{% endif %}> {{ choice.content }}
       </label>

mentoring/templates/html/mcqblock_rating.html

@@ -2,35 +2,35 @@
   <legend class="question">{{ self.question }}</legend>
   <div class="choices-list">
     <div class="choice">
-      <span class="choice-result icon-2x"></span>
+      <div class="choice-result icon-2x"></div>
       <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="1"{% if self.student_choice == '1' %} checked{% endif %}>1</label>
       <span class="low"> - {{ self.low }}</span>
       <div class="choice-tips"></div>
     </div>
     <div class="choice">
-      <span class="choice-result icon-2x"></span>
+      <div class="choice-result icon-2x"></div>
       <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="2"{% if self.student_choice == '2' %} checked{% endif %}>2</label>
       <div class="choice-tips"></div>
     </div>
     <div class="choice">
-      <span class="choice-result icon-2x"></span>
+      <div class="choice-result icon-2x"></div>
       <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="3"{% if self.student_choice == '3' %} checked{% endif %}>3</label>
       <div class="choice-tips"></div>
     </div>
     <div class="choice">
-      <span class="choice-result icon-2x"></span>
+      <div class="choice-result icon-2x"></div>
       <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="4"{% if self.student_choice == '4' %} checked{% endif %}>4</label>
       <div class="choice-tips"></div>
     </div>
     <div class="choice">
-      <span class="choice-result icon-2x"></span>
+      <div class="choice-result icon-2x"></div>
       <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="5"{% if self.student_choice == '5' %} checked{% endif %}>5</label>
       <span class="low"> - {{ self.high }}</span>
       <div class="choice-tips"></div>
     </div>
     {% for choice in custom_choices %}
     <div class="choice">
-      <span class="choice-result icon-2x"></span>
+      <div class="choice-result icon-2x"></div>
       <label><input type="radio" name="{{ self.name }}" value="{{ choice.value }}"{% if self.student_choice == '{{ choice.value }}' %} checked{% endif %}> {{ choice.content }}</label>
       <div class="choice-tips"></div>
     </div>

mentoring/templates/html/mentoring.html

@@ -10,9 +10,9 @@
   {{c.body_html|safe}}
   {% endfor %}
   {% if self.display_submit %}
-  <div class="attempts" data-max_attempts="{{ self.max_attempts }}" data-num_attempts="{{ self.num_attempts }}"></div>
   <div class="submit">
     <input type="button" class="input-main" value="Submit"></input>
+    <div class="attempts" data-max_attempts="{{ self.max_attempts }}" data-num_attempts="{{ self.num_attempts }}"></div>
   </div>
   {% endif %}
   <div class="messages"></div>

mentoring/templates/html/mentoring_attempts.html

 <script type="text/template" id="xblock-attempts-template">
   <% if (_.isNumber(max_attempts) && max_attempts > 0) {{ %>
-  <div> You have used <%= _.min([num_attempts, max_attempts]) %> of <%= max_attempts %> attempts.</div>
+  <span> You have used <%= _.min([num_attempts, max_attempts]) %> of <%= max_attempts %> attempts.</span>
   <% }} %>
 </script>

mentoring/templates/html/mrqblock_choices.html

 <fieldset class="choices questionnaire" data-hide_results="{{self.hide_results}}">
-  <legend class="question">{{ self.question }}</legend>
+
+  <legend class="question">
+    <h3>QUESTION</h3>
+    <p>{{ self.question }}</p>
+  </legend>
   <div class="choices-list">
     {% for choice in custom_choices %}
     <div class="choice">
-      <span class="choice-result icon-2x"></span>
+      <div class="choice-result icon-2x"></div>
       <div class="choice-checkbox">
         <label class="choice-label">
           <input class="choice-selector" type="checkbox" name="{{ self.name }}"