Merge pull request #523 from edx/grady/image-submission-ux

Cleaned up styles around image submissions

openassessment/templates/openassessmentblock/response/oa_response.html

@@ -72,7 +72,7 @@
                             <button type="submit" id="file__upload" class="action action--upload is--disabled">{% trans "Upload your image" %}</button>
                         </li>
                         <li>
-                            <div class="submission__answer__display__image">
+                            <div class="submission__answer__display__image is--hidden">
                                 <img id="submission__answer__image"
                                      class="submission--image"
                                      {% if file_url %}

openassessment/xblock/static/js/src/oa_response.js

@@ -93,6 +93,7 @@ OpenAssessment.ResponseView.prototype = {
             function(eventObject) {
                 // Override default form submission
                 eventObject.preventDefault();
+                $('.submission__answer__display__image', view.element).removeClass('is--hidden');
                 view.fileUpload();
             }
         );

openassessment/xblock/static/sass/oa/utilities/_developer.scss

@@ -183,21 +183,43 @@
   .action--upload {
     @extend %btn--secondary;
     @extend %action-2;
-    display: block;
     text-align: center;
-    margin-bottom: ($baseline-v/2);
+    float: right;
+    display: inline-block;
+    margin: ($baseline-v/2) 0;
+    box-shadow: none;
   }
 
   .file--upload {
-    margin-top: $baseline-v/2;
-    margin-bottom: $baseline-v/2;
+    margin: $baseline-v ($baseline-v/2);
   }
 }
+.self-assessment__display__header
+.self-assessment__display__title,
+.peer-assessment__display__header
+.peer-assessment__display__title,
+.submission__answer__display
+.submission__answer__display__title{
+  margin: 10px 0;
+}
+
 
-.submission--image {
-  max-height: 600px;
-  max-width: $max-width/2;
-  margin-bottom: $baseline-v;
+.self-assessment__display__image,
+.peer-assessment__display__image,
+.submission__answer__display__image{
+  @extend .submission__answer__display__content;
+  max-height: 400px;
+  text-align: left;
+  overflow: auto;
+  img{
+    max-height: 100%;
+    max-width: 100%;
+  }
+}
+.submission__answer__display__image
+.submission--image{
+  max-height: 250px;
+  max-width: 100%;
 }
 
 // Developer SASS for Continued Grading.

openassessment/xblock/static/sass/oa/views/_oa-base.scss

@@ -201,7 +201,7 @@
     // step content wrapper
     .wrapper--step__content {
       margin-top: ($baseline-v/2);
-      padding-top: $baseline-v;
+      padding-top: ($baseline-v/2);
       border-top: 1px solid $color-decorative-tertiary;
     }