From 2b4e9f45b98ef943409333320906452f117b4f52 Mon Sep 17 00:00:00 2001
From: Diana Huang <dkh@edx.org>
Date: Thu, 17 Jan 2013 11:34:44 -0500
Subject: [PATCH] Updates to the CSS and html formatting for statuses and
 self-assessment

---
 .../css/combinedopenended/display.scss        | 21 ++++++++++++++++---
 lms/templates/combined_open_ended.html        |  4 +---
 .../combined_open_ended_results.html          |  4 ++--
 lms/templates/combined_open_ended_status.html |  8 ++++++-
 lms/templates/self_assessment_rubric.html     |  6 +++++-
 5 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
index 0112dd40ac..8c6fc24420 100644
--- a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
+++ b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
@@ -54,10 +54,17 @@ section.combined-open-ended-status {
       font-family: monospace;
       font-size: 1em;
       padding: 10px;
+      .show-results {
+          margin-top: .3em;
+          text-align:right;
+      }
+      .show-results-button {
+          font: 1em monospace;
+      }
    }
 
    .statusitem-current {
-     background-color: #ccc;
+     background-color: #cdc;
      color: #2C2C2C;
   }
 
@@ -624,7 +631,15 @@ section.open-ended-child {
     font-size: 0.9em;
   }
 
-  .assessment {
-      margin: 40px 0px 20px 0px;
+  .assessment-container {
+      margin: 40px 0px 30px 0px;
+      .scoring-container
+      {
+          p
+          {
+              margin-bottom: 1em;
+          }
+
+      }
   }
 }
diff --git a/lms/templates/combined_open_ended.html b/lms/templates/combined_open_ended.html
index a32a496895..c99ebe21d1 100644
--- a/lms/templates/combined_open_ended.html
+++ b/lms/templates/combined_open_ended.html
@@ -2,10 +2,7 @@
 
     <h2>${display_name}</h2>
     <div class="status-container">
-        <h4>Status</h4>
-        <div class="status-elements">
             ${status | n}
-        </div>
     </div>
 
     <div class="item-container">
@@ -21,6 +18,7 @@
         <input type="button" value="Next Step" class="next-step-button" name="reset"/>
     </div>
 
+    <a name="results" />
     <div class="result-container">
     </div>
 </section>
diff --git a/lms/templates/combined_open_ended_results.html b/lms/templates/combined_open_ended_results.html
index db86e95016..65732cdbaa 100644
--- a/lms/templates/combined_open_ended_results.html
+++ b/lms/templates/combined_open_ended_results.html
@@ -1,4 +1,4 @@
 <div class="result-container">
-    <h4>Results from Step ${task_number}</h4><br/>
+    <h4>Results from Step ${task_number}</h4>
     ${results | n}
-</div>
\ No newline at end of file
+</div>
diff --git a/lms/templates/combined_open_ended_status.html b/lms/templates/combined_open_ended_status.html
index ff6f06e221..63111704ae 100644
--- a/lms/templates/combined_open_ended_status.html
+++ b/lms/templates/combined_open_ended_status.html
@@ -1,3 +1,6 @@
+%if len(status_list) > 1:
+<h4>Status</h4>
+<div class="status-elements">
 <section id="combined-open-ended-status" class="combined-open-ended-status">
     %for i in xrange(0,len(status_list)):
         <%status=status_list[i]%>
@@ -20,9 +23,12 @@
 
             %if status['type']=="openended" and status['state'] in ['done', 'post_assessment']:
                 <div class="show-results">
-                    <a href="#" class="show-results-button">Show results from step ${status['task_number']}</a>
+                    <a href="#results" class="show-results-button">Show results from Step ${status['task_number']}</a>
+
                 </div>
             %endif
         </div>
     %endfor
 </section>
+</div>
+%endif
diff --git a/lms/templates/self_assessment_rubric.html b/lms/templates/self_assessment_rubric.html
index da05f87e6d..75c9b41bd6 100644
--- a/lms/templates/self_assessment_rubric.html
+++ b/lms/templates/self_assessment_rubric.html
@@ -1,14 +1,18 @@
-<div class="assessment">
+<div class="assessment-container">
     <div class="rubric">
     ${rubric | n }
     </div>
 
     % if not read_only:
+    <div class="scoring-container">
+    <h3>Scoring</h3>
+    <p>Please select a score below:</p>
     <select name="assessment" class="assessment">
         %for i in xrange(0,max_score+1):
             <option value="${i}">${i}</option>
         %endfor
     </select>
+    </div>
     % endif
 
 </div>