Merge pull request #2033 from adaptlearning/itemDnd-styling

minor sortable styling
adaptlearning · Aug 2, 2018 · 15da7b8 · 15da7b8
2 parents 423ce1b + 79e9c09
commit 15da7b8
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/frontend/src/modules/scaffold/less/forms.less b/frontend/src/modules/scaffold/less/forms.less
@@ -137,7 +137,8 @@ form .error {
   border: 1px solid #aaa;
   border-radius: 2px;
   padding: 15px;
-  margin-bottom: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
   cursor: pointer;
   word-wrap: break-word;
   &:hover {

diff --git a/frontend/src/modules/scaffold/less/list.less b/frontend/src/modules/scaffold/less/list.less
@@ -1,9 +1,28 @@
-.list-items .list-item {
-  background: white;
+.list-items {
 
-  .list-item-description {
-    font-weight: bold;
-    margin-right: 5px;
-    width: auto;
+  .ui-sortable {
+    margin-bottom: 20px;
   }
+
+  .list-item {
+    background: white;
+
+    .list-item-description {
+      font-weight: bold;
+      margin-right: 5px;
+      width: auto;
+    }
+  }
+
+  .sortable-placeholder {
+    background: darken(white,  20%);
+    margin: 5px 0;
+    padding: 16px;
+  }
+
+  .ui-sortable-helper {
+    opacity: 0.8;
+    transform: scale(0.9) rotate(2deg);
+  }
+
 }
diff --git a/frontend/src/modules/scaffold/views/scaffoldListView.js b/frontend/src/modules/scaffold/views/scaffoldListView.js
@@ -9,7 +9,12 @@ define([
       var instance = Backbone.Form.editors.__List.prototype.render.apply(this, arguments);
       // set-up drag 'n drop
       this.$list.sortable({
-        update: this.updateItemPositions.bind(this)
+        placeholder: 'sortable-placeholder',
+        axis: 'y',
+        update: this.updateItemPositions.bind(this),
+        start: function(event, ui) {
+          ui.placeholder.height(ui.item.height());
+        }
       });
       return instance;
     },