Better positioning of elements draggables with labels in slider.

common/static/js/capa/drag_and_drop/draggable_logic.js

@@ -354,7 +354,11 @@ return {
             'width': this.iconWidthSmall,
             'height': this.iconHeightSmall,
             'left': 50 - this.iconWidthSmall * 0.5,
-            'top': ((this.labelEl !== null) ? 5 : 50 - this.iconHeightSmall * 0.5)
+
+            // Before:
+            // 'top': ((this.labelEl !== null) ? (100 - this.iconHeightSmall - 25) * 0.5 : 50 - this.iconHeightSmall * 0.5)
+            // After:
+            'top': ((this.labelEl !== null) ? 37.5 : 50.0) - 0.5 * this.iconHeightSmall
         });
         this.iconEl.appendTo(this.containerEl);
 
@@ -367,7 +371,11 @@ return {
                 'padding-right': 0,
                 'z-index': this.zIndex,
                 'left': 50 - this.labelWidth * 0.5,
-                'top': 5 + this.iconHeightSmall + 5
+
+                // Before:
+                // 'top': (100 - this.iconHeightSmall - 25) * 0.5 + this.iconHeightSmall + 5
+                // After:
+                'top': 42.5 + 0.5 * this.iconHeightSmall
             });
             this.labelEl.appendTo(this.containerEl);
         }

common/static/js/capa/drag_and_drop/draggables.js

@@ -214,7 +214,11 @@ define(['logme', 'draggable_events', 'draggable_logic'], function (logme, dragga
                     'width': draggableObj.iconWidthSmall,
                     'height': draggableObj.iconHeightSmall,
                     'left': 50 - draggableObj.iconWidthSmall * 0.5,
-                    'top': ((obj.label.length > 0) ? 5 : 50 - draggableObj.iconHeightSmall * 0.5)
+
+                    // Before:
+                    // 'top': ((obj.label.length > 0) ? (100 - draggableObj.iconHeightSmall - 25) * 0.5 : 50 - draggableObj.iconHeightSmall * 0.5)
+                    // After:
+                    'top': ((obj.label.length > 0) ? 37.5 : 50.0) - 0.5 * draggableObj.iconHeightSmall
                 });
                 draggableObj.iconImgEl.css({
                     'position': 'absolute',
@@ -243,7 +247,11 @@ define(['logme', 'draggable_events', 'draggable_logic'], function (logme, dragga
                     draggableObj.labelWidth = draggableObj.labelEl.width();
                     draggableObj.labelEl.css({
                         'left': 50 - draggableObj.labelWidth * 0.5,
-                        'top': 5 + draggableObj.iconHeightSmall + 5
+
+                        // Before:
+                        // 'top': (100 - this.iconHeightSmall - 25) * 0.5 + this.iconHeightSmall + 5
+                        // After:
+                        'top': 42.5 + 0.5 * draggableObj.iconHeightSmall
                     });
 
                     draggableObj.attachMouseEventsTo('labelEl');