styled rubric, dividers between sections

common/lib/xmodule/xmodule/css/combinedopenended/display.scss

@@ -1,3 +1,6 @@
+// lms - xmodule - combinedopenended
+// ====================
+
 h2 {
   margin-top: 0;
   margin-bottom: 15px;
@@ -16,6 +19,7 @@ h2 {
   }
 }
 
+ // Problem Header
 div.name{
   padding-bottom: 15px;
   
@@ -38,6 +42,7 @@ section.combined-open-ended {
   @include clearfix;
 }
 
+
 div.problemwrapper {
   border: 1px solid lightgray;
   border-radius: $baseline/2;
@@ -85,29 +90,6 @@ div.problemwrapper {
   .item-container {
     padding-bottom: $baseline/2;
     margin: 15px;
-
-    .visibility-control-prompt {
-      display: block;
-      height: 40px;
-      width: 100%; 
-
-      .inner {
-        float: left;
-        height: 5px;
-        margin-top: 17px;
-        border-top: 1px dotted #ddd;
-        width: 85%; 
-      }
-    }
-
-    a {
-      display: block;
-      text-align: center;
-      width: 15%;
-      float: right;
-      padding-top: $baseline/2;
-      font-size: .9em;
-    }
   }
 
   .result-container {
@@ -163,7 +145,6 @@ section.combined-open-ended-status {
 
  .statusitem-current {
     background-color: #fff;
-    box-shadow: inset 0 1px 1px gray;
     color: #222; 
  }
 
@@ -203,6 +184,63 @@ section.combined-open-ended-status {
   }
 }
 
+ // Problem Section Controls
+
+.visibility-control, .visibility-control-prompt {
+  display: block;
+  height: 40px;
+  width: 100%; 
+
+  .inner {
+    float: left;
+    height: 5px;
+    margin-top: $baseline;
+    border-top: 1px dotted #ddd;
+    width: 85%; 
+  }
+}
+
+.section-header {
+  display: block;
+  text-align: center;
+  width: 15%;
+  float: right;
+  padding-top: $baseline/2;
+  font-size: .9em;
+}
+
+
+// Rubric Styling
+
+.wrapper-score-selection { 
+  display: table-cell;
+  padding: 0 $baseline/2;
+  width: 20px;
+  vertical-align: middle;
+
+}
+
+.wrappable {
+  display: table-cell;
+  padding: $baseline/4 0 ;
+}
+
+.rubric-list-item {
+  margin-bottom: 2px;
+  padding: $baseline/2;
+
+  &:hover {
+    background-color: #eee;
+  }
+}
+
+span.rubric-category {
+  display: block;
+  width: 100%;
+  border-bottom: 1px solid lightgray;
+  font-size: .9em;
+}
+
 div.combined-rubric-container {
   margin: 15px;
   padding-bottom: 5px;
@@ -217,21 +255,9 @@ div.combined-rubric-container {
 
       &.rubric-list-item {
         margin-bottom: 2px;
-        padding: 0px;
+        padding: $baseline/2;
       }
     }
-
-    .score-selection { 
-      //display: inline-block;
-      //padding-right: $baseline/2;
-      //width: 5%;
-      //vertical-align: center;
-    }
-
-    .wrappable {
-      //display: inline-block;
-      //width: 94%;
-    }
   }
   h4 {
     padding-top: 10px;

common/lib/xmodule/xmodule/js/src/combinedopenended/display.coffee

@@ -561,11 +561,11 @@ class @CombinedOpenEnded
     @prompt_container.slideToggle()
     @prompt_container.toggleClass('open')
     if @question_header.text() == "(Hide)"
-      new_text = "↧ Show Prompt"
+      new_text = "Show Prompt"
       Logger.log 'oe_hide_question', {location: @location}
     else
       Logger.log 'oe_show_question', {location: @location}
-      new_text = "↥ Hide Prompt"
+      new_text = "Hide Prompt"
     @question_header.text(new_text)
     return false
 
@@ -573,13 +573,13 @@ class @CombinedOpenEnded
     if @prompt_container.is(":hidden")==true
       @prompt_container.slideToggle()
       @prompt_container.toggleClass('open')
-      @question_header.text("↥ Hide Prompt")
+      @question_header.text("Hide Prompt")
 
   prompt_hide: () =>
     if @prompt_container.is(":visible")==true
       @prompt_container.slideToggle()
       @prompt_container.toggleClass('open')
-      @question_header.text("↧ Show Prompt")
+      @question_header.text("Show Prompt")
 
   log_feedback_click: (event) ->
     link_text = @$(event.target).html()

lms/static/coffee/src/staff_grading/test_grading.html

@@ -23,7 +23,11 @@
 </section>
 
 <section class="rubric-wrapper">
-<h3>Rubric</h3>
+<div class="visibility-control visibility-control-rubric">
+	<div class="inner">
+	</div>
+	<span class="section-header section-header-rubric">Rubric</span>
+</div>
 <div class="rubric-container">
 </div>
 

lms/templates/combinedopenended/combined_open_ended.html

@@ -30,7 +30,7 @@
             <div class="visibility-control visibility-control-prompt">
                 <div class="inner">
                 </div>
-                <a href="" class="question-header">&#x21a5; Hide Prompt</a>
+                <span class="section-header question-header section-header-prompt">Prompt</span>
             </div>
             <div class="problem-container">
             % for item in items:

lms/templates/combinedopenended/openended/open_ended.html

@@ -3,7 +3,11 @@
    <div class="prompt">
     ${prompt|n}
    </div>
-  <h4>Response</h4>
+  <div class="visibility-control visibility-control-response">
+    <div class="inner">
+    </div>
+    <span class="section-header section-header-response">Response</span>
+  </div>
   <textarea rows="${rows}" cols="${cols}" name="answer" class="answer short-form-response" id="input_${id}">${previous_answer|h}</textarea>
 
   <div class="message-wrapper"></div>

lms/templates/combinedopenended/openended/open_ended_rubric.html

@@ -1,5 +1,9 @@
 <form class="rubric-template" id="inputtype_${id}" xmlns="http://www.w3.org/1999/html">
-    <h3>Rubric</h3>
+    <div class="visibility-control visibility-control-rubric">
+        <div class="inner">
+        </div>
+        <span class="section-header section-header-rubric">Rubric</span>
+    </div>
     <p>Select the criteria you feel best represents this submission in each category.</p>
     <div class="rubric">
         % for i in range(len(categories)):
@@ -14,7 +18,7 @@
                         <li class="rubric-list-item">
                     % endif
                     <label class="rubric-label" for="score-${i}-${j}">
-                        <input type="radio" class="score-selection" data-category="${i}" name="score-selection-${i}" id="score-${i}-${j}" value="${option['points']}"/>
+                        <span class="wrapper-score-selection"><input type="radio" class="score-selection" data-category="${i}" name="score-selection-${i}" id="score-${i}-${j}" value="${option['points']}"/></span>
                         <span class="wrappable"> ${option['points']} points : ${option['text']}</span>
                     </label>
                     </li>

lms/templates/combinedopenended/selfassessment/self_assessment_prompt.html

@@ -3,10 +3,11 @@
     <div class="error"></div>
     <div class="prompt">
     ${prompt}
+    <div class="visibility-control visibility-control-response">
+        <div class="inner">
+        </div>
+        <span class="section-header section-header-response">Response</span>
     </div>
-
-    <h4>Response</h4>
-    <div>
     <textarea name="answer" class="answer short-form-response" cols="70" rows="20">${previous_answer|n}</textarea>
     </div>