Changes the Modal Height when used for OpenAssessment Editing

openassessment/xblock/static/css/openassessment.css

@@ -2137,10 +2137,11 @@ hr.divider,
       border-bottom: none; }
 
 #openassessment-editor {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+  height: 100%; }
   #openassessment-editor .openassessment_editor_content_and_tabs {
     width: 100%;
-    height: 373px; }
+    height: Calc(100% - 97px); }
   #openassessment-editor #openassessment_editor_header {
     background-color: #e5e5e5;
     width: 100%;
@@ -2448,9 +2449,15 @@ hr.divider,
     border: 0px;
     clear: both; }
 
-.modal-content {
-  height: 470px !important;
-  background-color: #e5e5e5; }
+.modal-lg.modal-window.confirm.openassessment_modal_window {
+  height: 80%;
+  top: 10%; }
+
+.openassessment_full_height.edit-xblock-modal,
+.openassessment_full_height.xblock-editor,
+.openassessment_full_height.xblock.xblock-studio_view.xblock-initialized,
+[class*="view-"] .modal-lg.modal-editor .openassessment_full_height.modal-content {
+  height: 100%; }
 
 .openassessment .self-assessment__display__header, .openassessment .peer-assessment__display__header, .openassessment .step__header {
   margin-bottom: 0 !important;

openassessment/xblock/static/js/src/oa_edit.js

@@ -19,6 +19,8 @@ OpenAssessment.StudioView = function(runtime, element, server) {
 
     var liveElement = this.liveElement;
 
+    this.fixModalHeight();
+
     // Instantiates JQuery selector variables which will allow manipulation and display controls.
     this.settingsFieldSelectors = {
         promptBox: $('#openassessment_prompt_editor', liveElement),
@@ -90,6 +92,16 @@ OpenAssessment.StudioView = function(runtime, element, server) {
 OpenAssessment.StudioView.prototype = {
 
     /**
+     Adjusts the modal's height, position and padding to be larger for OA editing only (Does not impact other modals)
+     */
+    fixModalHeight: function () {
+        var element = this.liveElement;
+        element.toggleClass('openassessment_full_height');
+        element.parentsUntil('.modal-window').toggleClass('openassessment_full_height');
+        $('.modal-window').toggleClass('openassessment_modal_window');
+    },
+
+    /**
      Load the XBlock XML definition from the server and display it in the view.
      **/
     load: function () {

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

@@ -179,10 +179,11 @@
 
 #openassessment-editor {
   margin-bottom: 0;
+  height: 100%;
 
   .openassessment_editor_content_and_tabs {
     width: 100%;
-    height: 373px;
+    height: Calc(100% - 97px);
   }
 
   #openassessment_editor_header{
@@ -659,12 +660,17 @@
 
 }
 
-#openassessment_make_invisible{
-
+//For Both of these, we use high specificity to overload the previous styles
+//without the important tag.
+.modal-lg.modal-window.confirm.openassessment_modal_window{
+  height: 80%;
+  top: 10%;
 }
 
-.modal-content {
-  height: 470px !important;
-  background-color: #e5e5e5;
+.openassessment_full_height.edit-xblock-modal,
+.openassessment_full_height.xblock-editor,
+.openassessment_full_height.xblock.xblock-studio_view.xblock-initialized,
+[class*="view-"] .modal-lg.modal-editor .openassessment_full_height.modal-content
+{
+  height: 100%;
 }
-