Slight changes to UI design. Part 2.

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

@@ -24,7 +24,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
 
         function processDraggable(obj, index) {
             var draggableContainerEl, imgEl, inContainer, ousePressed,
-                onTarget, draggableObj;
+                onTarget, draggableObj, marginCss;
 
             draggableContainerEl = $(
                 '<div ' +
@@ -52,8 +52,14 @@ define(['logme', 'update_input'], function (logme, updateInput) {
             }
 
             if (obj.label.length > 0) {
+                marginCss = '';
+
+                if (obj.icon.length === 0) {
+                    marginCss = 'margin-top: 38px;';
+                }
+
                 draggableContainerEl.append(
-                    $('<div style="clear: both; text-align: center;">' + obj.label + '</div>')
+                    $('<div style="clear: both; text-align: center; ' + marginCss + ' ">' + obj.label + '</div>')
                 );
             }
 

common/static/js/capa/drag_and_drop/scroller.js

@@ -59,24 +59,6 @@ define(['logme'], function (logme) {
         );
         moveLeftEl.appendTo(parentEl);
 
-/*
-position: absolute;
-margin-bottom: 0;
-height: 44px;
-width: 70px;
-border: 1px solid #CCC;
-background-color: #EEE;
-background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEE), color-stop(100%, #DDD));
-background-image: -webkit-linear-gradient(top, #EEE, #DDD);
-background-image: -moz-linear-gradient(top, #EEE, #DDD);
-background-image: -ms-linear-gradient(top, #EEE, #DDD);
-background-image: -o-linear-gradient(top, #EEE, #DDD);
-background-image: linear-gradient(top, #EEE, #DDD);
--webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
--moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
-*/
-
         moveLeftEl.click(function () {
             if (showElLeftMargin > -102) {
                 return;
@@ -120,7 +102,6 @@ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
                     'height: 102px; ' +
                     'display: inline; ' +
                     'float: left; ' +
-                    // 'background: url(\'/static/images/arrow-right.png\') center center no-repeat; ' +
                 '" ' +
             '>' +
                 '<div ' +

common/static/js/capa/drag_and_drop/target_container.js

@@ -35,13 +35,13 @@ define(['logme'], function (logme) {
                 state.targetElWidth = this.width;
             });
 
-        state.targetEl.mousemove(
-            function (event) {
-                mouseMoveDiv.html(
-                    '[' + event.offsetX + ', ' + event.offsetY + ']'
-                );
-            }
-        );
+        // state.targetEl.mousemove(
+        //     function (event) {
+        //         mouseMoveDiv.html(
+        //             '[' + event.offsetX + ', ' + event.offsetY + ']'
+        //         );
+        //     }
+        // );
 
         mouseMoveDiv = $(
             '<div ' +
@@ -51,7 +51,7 @@ define(['logme'], function (logme) {
                     'height: 25px; ' +
                     'text-align: center; ' +
                 '" ' +
-            '>[0, 0]</div>'
+            '></div>'
         );
         mouseMoveDiv.appendTo(targetElContainer);