Merge pull request #546 from edx/grady/fix-alert

Fixed the behavior of the alert

openassessment/templates/openassessmentblock/edit/oa_edit_rubric.html

@@ -21,6 +21,7 @@
         </a>
     </div>
 
+    <div id="openassessment_rubric_content_editor">
     <div id="openassessment_rubric_instructions">
         <p class = openassessment_description>
             {% trans "For open response problems, assessment is rubric-based.  Rubric criterion have point breakdowns and explanations to help students with peer and self assessment steps. For more information on how to build your rubric, see our online help documentation."%}
@@ -56,5 +57,6 @@
 
         </ul>
     </div>
+    </div>
 </div>
 {% endspaceless %}
\ No newline at end of file

openassessment/xblock/static/js/src/studio/oa_edit_validation_alert.js

@@ -11,6 +11,7 @@ Returns:
 OpenAssessment.ValidationAlert = function (element) {
     var alert = this;
     this.element = element;
+    this.rubricContentElement = $('#openassessment_rubric_content_editor');
     this.title = $(".openassessment_alert_title", this.element);
     this.message = $(".openassessment_alert_message", this.element);
     $(".openassessment_alert_close", element).click(function(eventObject) {
@@ -27,6 +28,7 @@ OpenAssessment.ValidationAlert.prototype = {
      */
     hide: function() {
         this.element.addClass('is--hidden');
+        this.rubricContentElement.removeClass('openassessment_alert_shown');
     },
 
     /**
@@ -34,6 +36,7 @@ OpenAssessment.ValidationAlert.prototype = {
      */
     show : function() {
         this.element.removeClass('is--hidden');
+        this.rubricContentElement.addClass('openassessment_alert_shown');
     },
 
     /**

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

@@ -230,12 +230,13 @@
   }
 
   .oa_editor_content_wrapper {
-    height: 100%;
+    height: Calc(100% - 1px);
     width: 100%;
     border-radius: 3px;
     border: 1px solid $edx-gray-d1;
     background-color: white;
     overflow-y: scroll;
+    position: absolute;
   }
 
   #openassessment_prompt_editor {
@@ -426,20 +427,17 @@
   #oa_rubric_editor_wrapper{
 
     #openassessment_rubric_validation_alert{
-      -webkit-animation: notificationSlideDown 1s ease-in-out 1;
-      -moz-animation: notificationSlideDown 1s ease-in-out 1;
-      animation: notificationSlideDown 1s ease-in-out 1;
-      -webkit-animation-fill-mode: forwards;
-      -moz-animation-fill-mode: forwards;
-      animation-fill-mode: forwards;
-
-      background-color: #323232;
       height: auto;
+      width: 100%;
+      border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
+      background-color: #323232;
       border-bottom: 3px solid rgb(192, 172, 0);
       padding: 10px;
       position: absolute;
       z-index: 10;
-      width: 100%;
+      min-height: 70px;
+      @include transition (color 0.50s ease-in-out 0s);
 
       .openassessment_alert_icon:before{
         font-family: FontAwesome;
@@ -448,7 +446,7 @@
         color: rgb(192, 172, 0);
         float: left;
         font-size: 200%;
-        margin: 20px 0px 0px 25px;
+        margin: 1.5% 0px 0px 2%;
       }
       .openassessment_alert_header {
         width: 85%;
@@ -470,11 +468,11 @@
         display: inline-block;
         position: absolute;
         top: 0px;
-        right: 10px;
+        right: 0px;
         color: #e9e9e9;
         background: #323232;
         text-align: center;
-        padding: 2px 5px;
+        margin: 5px 10px;
 
         [class^="icon"] {
           width: auto;
@@ -488,6 +486,17 @@
       }
     }
 
+    #openassessment_rubric_content_editor{
+      height: 100%;
+      overflow-y: scroll;
+    }
+
+    #openassessment_rubric_content_editor.openassessment_alert_shown{
+      height: Calc(100% - 70px);
+      position: absolute;
+      bottom: 0;
+    }
+
     .wrapper-comp-settings{
       display: initial;
     }