Rework styles for test results and style file upload

common/lib/capa/capa/templates/filesubmission.html

@@ -1,17 +1,18 @@
 <section id="filesubmission_${id}" class="filesubmission">
-    <input type="file" name="input_${id}" id="input_${id}" value="${value}" multiple="multiple" data-required_files="${required_files}" data-allowed_files="${allowed_files}"/><br />
+  <div class="grader-status file">
     % if state == 'unsubmitted':
-    <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
+    <span class="unanswered" style="display:inline-block;" id="status_${id}">Unanswered</span>
     % elif state == 'correct':
-    <span class="correct" id="status_${id}"></span>
+    <span class="correct" id="status_${id}">Correct</span>
     % elif state == 'incorrect':
-    <span class="incorrect" id="status_${id}"></span>
+    <span class="incorrect" id="status_${id}">Incorrect</span>
     % elif state == 'queued':
-    <span class="processing" id="status_${id}"></span>
+    <span class="processing" id="status_${id}">Queued</span>
     <span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span>
     % endif
-    <span style="display:none;" class="debug">(${state})</span>
-    <br/>
-    <span class="message">${msg|n}</span>
-    <br/>
+    <p class="debug">${state}</p>
+
+    <input type="file" name="input_${id}" id="input_${id}" value="${value}" multiple="multiple" data-required_files="${required_files}" data-allowed_files="${allowed_files}"/>
+  </div>
+    <div class="message">${msg|n}</div>
 </section>

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

@@ -195,9 +195,31 @@ section.problem {
         margin-bottom: 0;
         float: left;
       }
+
+      &.file {
+        background: #FFF;
+        margin-top: 20px;
+        padding: 20px 0 0 0;
+
+        border: {
+          top: 1px solid #eee;
+          right: 0;
+          bottom: 0;
+          left: 0;
+        }
+
+        p.debug {
+          display: none;
+        }
+
+        input {
+          float: left;
+        }
+      }
     }
   }
 
+
   ul {
     list-style: disc outside none;
     margin-bottom: lh();
@@ -408,18 +430,27 @@ section.problem {
   }
 
   .test {
-    border-top: 1px solid #aaa;
     padding-top: 18px;
 
     header {
       margin-bottom: 12px;
+
+      h3 {
+        font-size: 0.9em;
+        font-weight: bold;
+        font-style: normal;
+        text-transform: uppercase;
+        color: #AAA;
+      }
     }
 
-    .shortform, .longform {
-      border: 1px solid #d3d3d3;
+    .longform, .shortform {
+      border: 1px solid #ddd;
       padding: 9px;
-      margin-bottom: 12px;
-      @include box-shadow(inset 0 0 0 1px #f3f3f3);
+      margin-bottom: 10px;
+      background: #FFF;
+      @include box-shadow(inset 0 0 0 1px #eee);
+      @include border-radius(3px);
 
       p:last-of-type {
         margin-bottom: 0;
@@ -427,7 +458,7 @@ section.problem {
     }
 
     a.full {
-      @include position(absolute,  0 0 0px 0px);
+      @include position(absolute,  0 0 1px 0px);
       font-size: .8em;
       padding: 4px;
       text-align: right;
@@ -443,7 +474,7 @@ section.problem {
     }
 
     .longform-header {
-      margin-bottom: lh();
+      margin-bottom: .6em;
     }
   }
 }

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

@@ -264,7 +264,7 @@ class @Problem
     alert_elem = "<div class='capa_alert'>" + msg + "</div>"
     @el.find('.action').after(alert_elem)
     @el.find('.capa_alert').animate(opacity: 0, 500).animate(opacity: 1, 500)
-    
+
   save: =>
     Logger.log 'problem_save', @answers
     $.postWithPrefix "#{@url}/problem_save", @answers, (response) =>