Drag handles. In progress.

client/components/cards/cardDetails.js

@@ -165,8 +165,7 @@ BlazeComponent.extendComponent({
     $checklistsDom.sortable({
       tolerance: 'pointer',
       helper: 'clone',
-      //handle: '.checklist-title',
-      handle: '.checklist-item-handle',
+      handle: '.checklist-title',
       items: '.js-checklist',
       placeholder: 'checklist placeholder',
       distance: 7,

client/components/cards/checklists.jade

@@ -31,12 +31,20 @@ template(name="checklistDetail")
           h2.title.js-open-inlined-form.is-editable
             +viewer
               = checklist.title
+          if isMiniScreen
             a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle
+          unless isMiniScreen
+            if showDesktopDragHandles
+              a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle
         else
           h2.title
             +viewer
                 = checklist.title
-            a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle
+            if isMiniScreen
+              a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle
+            unless isMiniScreen
+              if showDesktopDragHandles
+                a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle
     +checklistItems(checklist = checklist)
 
 template(name="checklistDeleteDialog")

client/components/cards/checklists.js

@@ -4,11 +4,11 @@ function initSorting(items) {
   items.sortable({
     tolerance: 'pointer',
     helper: 'clone',
-    items: '.js-checklist-item-handle:not(.placeholder)',
+    items: '.js-checklist-item:not(.placeholder)',
     connectWith: '.js-checklist-items',
     appendTo: '.board-canvas',
     distance: 7,
-    placeholder: 'checklist-item-handle placeholder',
+    placeholder: 'checklist-item placeholder',
     scroll: false,
     start(evt, ui) {
       ui.placeholder.height(ui.helper.height());
@@ -17,11 +17,11 @@ function initSorting(items) {
     stop(evt, ui) {
       const parent = ui.item.parents('.js-checklist-items');
       const checklistId = Blaze.getData(parent.get(0)).checklist._id;
-      let prevItem = ui.item.prev('.js-checklist-item-handle').get(0);
+      let prevItem = ui.item.prev('.js-checklist-item').get(0);
       if (prevItem) {
         prevItem = Blaze.getData(prevItem).item;
       }
-      let nextItem = ui.item.next('.js-checklist-item-handle').get(0);
+      let nextItem = ui.item.next('.js-checklist-item').get(0);
       if (nextItem) {
         nextItem = Blaze.getData(nextItem).item;
       }
@@ -38,7 +38,8 @@ function initSorting(items) {
   });
 
   // ugly touch event hotfix
-  enableClickOnTouch('.js-checklist-item-handle:not(.placeholder)');
+  enableClickOnTouch('.js-checklist-item:not(.placeholder)');
+
 }
 
 BlazeComponent.extendComponent({
@@ -60,6 +61,30 @@ BlazeComponent.extendComponent({
       if ($itemsDom.data('sortable')) {
         $(self.itemsDom).sortable('option', 'disabled', !userIsMember());
       }
+      if(Utils.isMiniScreen()) {
+        this.$('.js-checklists').sortable({
+          handle: '.checklist-handle',
+        });
+        this.$('.js-checklist-item').sortable({
+          handle: '.checklist-item-handle',
+        });
+      } else {
+        if (Meteor.user().hasShowDesktopDragHandles()) {
+          this.$('.js-checklists').sortable({
+            handle: '.checklist-handle',
+          });
+          this.$('.js-checklist-item').sortable({
+            handle: '.checklist-item-handle',
+          });
+        } else {
+          this.$('.js-checklists').sortable({
+            handle: '.checklist-title',
+          });
+          this.$('.js-checklist-item').sortable({
+            handle: '.checklist-item',
+          });
+        }
+      }
     });
   },
 
@@ -72,6 +97,12 @@ BlazeComponent.extendComponent({
   },
 }).register('checklistDetail');
 
+Template.checklistDetail.helpers({
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
+});
+
 BlazeComponent.extendComponent({
   addChecklist(event) {
     event.preventDefault();

client/components/cards/checklists.styl

@@ -37,10 +37,10 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
 
   .checklist-handle
     position: absolute
-    padding: 7px
-    top: 50%
+    float: right
+    padding-bottom: 30px
     transform: translateY(-50%)
-    left: 100px
+    left: 400px
     font-size: 18px
 
   .js-delete-checklist
@@ -141,10 +141,10 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
         max-width: 420px
     .checklist-item-handle
       position: absolute
-      padding: 7px
-      top: 50%
+      float: right
+      padding-bottom: 30px
       transform: translateY(-50%)
-      left: 200px
+      left: 400px
       font-size: 18px
 
 .js-delete-checklist-item

client/components/cards/minicard.jade

@@ -3,13 +3,13 @@ template(name="minicard")
     class="{{#if isLinkedCard}}linked-card{{/if}}"
     class="{{#if isLinkedBoard}}linked-board{{/if}}"
     class="minicard-{{colorClass}}")
-    if isMiniScreen
-      .handle
-        .fa.fa-arrows
     unless isMiniScreen
       if showDesktopDragHandles
         .handle
           .fa.fa-arrows
+    if isMiniScreen
+      .handle
+        .fa.fa-arrows
     if cover
       .minicard-cover(style="background-image: url('{{cover.url}}');")
     if labels

client/components/cards/minicard.styl

@@ -105,12 +105,25 @@
     right: 5px;
     top: 5px;
     display:none;
-    @media only screen {
+    @media only screen and (min-width: 1200px) {
       display:block;
     }
     .fa-arrows
       font-size:20px;
       color: #ccc;
+  //.handle-minicard-desktop
+  //  width: 20px;
+  //  height: 20px;
+  //  position: absolute;
+  //  right: 5px;
+  //  top: 5px;
+  //  display:none;
+  //  @media only screen and (min-width: 1200px) {
+  //    display:block;
+  //  }
+  //  .fa-arrows
+  //    font-size:20px;
+  //    color: #ccc;
   .minicard-title
     p:last-child
       margin-bottom: 0