MDL-43688 dndupload: fixed positioning across themes

course/dndupload.js

@@ -102,31 +102,32 @@ M.course_dndupload = {
      * is available (or to explain why it is not available)
      */
     add_status_div: function() {
-        var coursecontents = document.getElementById(this.pagecontentid);
+        var Y = this.Y,
+            coursecontents = Y.one('#' + this.pagecontentid),
+            div,
+            handlefile = (this.handlers.filehandlers.length > 0),
+            handletext = false,
+            handlelink = false,
+            i = 0,
+            styletop,
+            styletopunit;
+
         if (!coursecontents) {
             return;
         }
 
-        var div = document.createElement('div');
-        div.id = 'dndupload-status';
-        div.style.opacity = 0.0;
-        coursecontents.insertBefore(div, coursecontents.firstChild);
+        div = Y.Node.create('<div id="dndupload-status"></div>').setStyle('opacity', '0.0');
+        coursecontents.insert(div, 0);
 
-        var Y = this.Y;
-        div = Y.one(div);
-        var handlefile = (this.handlers.filehandlers.length > 0);
-        var handletext = false;
-        var handlelink = false;
-        var i;
-        for (i=0; i<this.handlers.types.length; i++) {
+        for (i = 0; i < this.handlers.types.length; i++) {
             switch (this.handlers.types[i].identifier) {
-            case 'text':
-            case 'text/html':
-                handletext = true;
-                break;
-            case 'url':
-                handlelink = true;
-                break;
+                case 'text':
+                case 'text/html':
+                    handletext = true;
+                    break;
+                case 'url':
+                    handlelink = true;
+                    break;
             }
         }
         $msgident = 'dndworking';
@@ -141,16 +142,20 @@ M.course_dndupload = {
         }
         div.setContent(M.util.get_string($msgident, 'moodle'));
 
+        styletop = div.getStyle('top') || '0px';
+        styletopunit = styletop.replace(/^\d+/, '');
+        styletop = parseInt(styletop.replace(/\D*$/, ''), 10);
+
         var fadeanim = new Y.Anim({
             node: '#dndupload-status',
             from: {
                 opacity: 0.0,
-                top: '-30px'
+                top: (styletop - 30).toString() + styletopunit
             },
 
             to: {
                 opacity: 1.0,
-                top: '0px'
+                top: styletop.toString() + styletopunit
             },
             duration: 0.5
         });

theme/base/style/course.css

@@ -353,7 +353,7 @@ input.titleeditor { vertical-align: text-bottom; }
 }
 
 /* Course drag and drop upload styles */
-#dndupload-status {width:40%;margin:0 30%;padding:6px;border:1px solid #ddd;text-align:center;background:#ffc;position:absolute;z-index:9999;box-shadow:2px 2px 5px 1px #ccc;border-radius:0px 0px 8px 8px;z-index: 0;}
+#dndupload-status {width:40%;margin:0 30%;padding:6px;border:1px solid #ddd;top:-5px;text-align:center;background:#ffc;position:absolute;left:0;box-shadow:2px 2px 5px 1px #ccc;border-radius:0px 0px 8px 8px;z-index: 0;}
 .dndupload-preview {color:#909090;border:1px dashed #909090;list-style:none; margin-top: .2em; padding: .3em; line-height: 16px;}
 .dndupload-preview img.icon { vertical-align: text-bottom; padding: 0;}
 .dndupload-progress-outer {width:70px;border:1px solid black;border-radius:4px;height:10px;display:inline-block;margin:0;padding:0;overflow:hidden;position:relative;}

theme/bootstrapbase/less/moodle/course.less

@@ -464,6 +464,8 @@ span.editinstructions {
 
 /* Course drag and drop upload styles */
 #dndupload-status {
+    position: fixed;
+    left:0;
     width: 40%;
     margin: 0 30%;
     padding: 6px;
@@ -471,11 +473,9 @@ span.editinstructions {
     text-align: center;
     background: @infoBackground;
     color: @infoText;
-    position: absolute;
-    z-index: 9999;
+    z-index: 1; // Required in order to have this above relatively positioned course content.
     .box-shadow(2px 2px 5px 1px #ccc);
-    .border-bottom-radius(8px);
-    z-index: 0;
+    .border-radius(8px);
 }
 .dndupload-preview {
     color: #909090;