10 files changed, 84 insertions, 28 deletions
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index 47941560..ad0ee1a6 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -165,7 +165,8 @@ BlazeComponent.extendComponent({
     $checklistsDom.sortable({
       tolerance: 'pointer',
       helper: 'clone',
-      handle: '.checklist-title',
+      //handle: '.checklist-title',
+      handle: '.checklist-item-handle',
       items: '.js-checklist',
       placeholder: 'checklist placeholder',
       distance: 7,
diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade
index 279d3671..5cc82211 100644
--- a/client/components/cards/checklists.jade
+++ b/client/components/cards/checklists.jade
@@ -31,10 +31,12 @@ template(name="checklistDetail")
           h2.title.js-open-inlined-form.is-editable
             +viewer
               = checklist.title
+            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
     +checklistItems(checklist = checklist)
 
 template(name="checklistDeleteDialog")
@@ -75,6 +77,11 @@ template(name="checklistItems")
         +editChecklistItemForm(type = 'item' item = item checklist = checklist)
       else
         +checklistItemDetail(item = item checklist = checklist)
+        if isMiniScreen
+          a.checklist-item-handle.handle.fa.fa-arrows.js-checklist-item-handle
+        unless isMiniScreen
+          if showDesktopDragHandles
+            a.checklist-item-handle.handle.fa.fa-arrows.js-checklist-item-handle
     if canModifyCard
       +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist)
         +addChecklistItemForm
diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js
index 57939eb8..1a3a3265 100644
--- a/client/components/cards/checklists.js
+++ b/client/components/cards/checklists.js
@@ -4,11 +4,11 @@ function initSorting(items) {
   items.sortable({
     tolerance: 'pointer',
     helper: 'clone',
-    items: '.js-checklist-item:not(.placeholder)',
+    items: '.js-checklist-item-handle:not(.placeholder)',
     connectWith: '.js-checklist-items',
     appendTo: '.board-canvas',
     distance: 7,
-    placeholder: 'checklist-item placeholder',
+    placeholder: 'checklist-item-handle 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').get(0);
+      let prevItem = ui.item.prev('.js-checklist-item-handle').get(0);
       if (prevItem) {
         prevItem = Blaze.getData(prevItem).item;
       }
-      let nextItem = ui.item.next('.js-checklist-item').get(0);
+      let nextItem = ui.item.next('.js-checklist-item-handle').get(0);
       if (nextItem) {
         nextItem = Blaze.getData(nextItem).item;
       }
@@ -38,7 +38,7 @@ function initSorting(items) {
   });
 
   // ugly touch event hotfix
-  enableClickOnTouch('.js-checklist-item:not(.placeholder)');
+  enableClickOnTouch('.js-checklist-item-handle:not(.placeholder)');
 }
 
 BlazeComponent.extendComponent({
@@ -197,6 +197,12 @@ BlazeComponent.extendComponent({
   },
 }).register('checklists');
 
+Template.checklists.helpers({
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
+});
+
 Template.checklistDeleteDialog.onCreated(() => {
   const $cardDetails = this.$('.card-details');
   this.scrollState = {
@@ -231,6 +237,9 @@ Template.checklistItemDetail.helpers({
       !Meteor.user().isCommentOnly()
     );
   },
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
 });
 
 BlazeComponent.extendComponent({
diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl
index 8ac37a15..a383a128 100644
--- a/client/components/cards/checklists.styl
+++ b/client/components/cards/checklists.styl
@@ -35,6 +35,14 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
     &.is-finished
       color: #3cb500
 
+  .checklist-handle
+    position: absolute
+    padding: 7px
+    top: 50%
+    transform: translateY(-50%)
+    left: 100px
+    font-size: 18px
+
   .js-delete-checklist
     @extends .delete-text
 
@@ -70,7 +78,7 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
       margin-left: 12%
       float: left
     .toggle-delete-checklist-dialog
-      margin-right: 12%
+      margin-right: 20%
       float: right
 
 #card-details-overlay
@@ -125,12 +133,19 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
     &.is-checked
       color: #8c8c8c
       font-style: italic
-    & .viewer
+    &.viewer
       p
         margin-bottom: 2px
         display: block
         word-wrap: break-word
         max-width: 420px
+    .checklist-item-handle
+      position: absolute
+      padding: 7px
+      top: 50%
+      transform: translateY(-50%)
+      left: 200px
+      font-size: 18px
 
 .js-delete-checklist-item
   margin: 0 0 0.5em 1.33em
diff --git a/client/components/lists/list.js b/client/components/lists/list.js
index 023ba358..a134a00a 100644
--- a/client/components/lists/list.js
+++ b/client/components/lists/list.js
@@ -52,6 +52,7 @@ BlazeComponent.extendComponent({
     $cards.sortable({
       connectWith: '.js-minicards:not(.js-list-full)',
       tolerance: 'pointer',
+      handle: 'list-header',
       appendTo: '.board-canvas',
       helper(evt, item) {
         const helper = item.clone();
diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl
index 459481ea..53de5bad 100644
--- a/client/components/lists/list.styl
+++ b/client/components/lists/list.styl
@@ -225,7 +225,7 @@
       padding: 7px
       top: 50%
       transform: translateY(-50%)
-      margin-right: 27px
+      right: 47px
       font-size: 20px
 
     .list-header-menu-handle
@@ -236,6 +236,14 @@
       right: 10px
       font-size: 24px
 
+    .list-header-menu-handle-miniscreen-angle-left
+      position: absolute
+      padding: 7px
+      top: 50%
+      transform: translateY(-50%)
+      right: 25px
+      font-size: 24px
+
 .link-board-wrapper
   display: flex
   align-items: baseline
diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade
index 6a61a66f..78d0801a 100644
--- a/client/components/lists/listHeader.jade
+++ b/client/components/lists/listHeader.jade
@@ -29,9 +29,10 @@ template(name="listHeader")
               if canSeeAddCard
                 a.js-add-card.fa.fa-plus.list-header-plus-icon
               a.fa.fa-navicon.js-open-list-menu
-          a.list-header-menu-handle.handle.fa.fa-arrows.js-list-handle
+          a.list-header-menu-handle-miniscreen-angle-left.handle.fa.fa-arrows.js-list-handle
         else
           a.list-header-menu-icon.fa.fa-angle-right.js-select-list
+          |&nbsp;&nbsp;&nbsp;&nbsp;
           a.list-header-menu-handle.handle.fa.fa-arrows.js-list-handle
       else if currentUser.isBoardMember
         if isWatching
diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade
index fb6ef21d..dde8561e 100644
--- a/client/components/swimlanes/swimlaneHeader.jade
+++ b/client/components/swimlanes/swimlaneHeader.jade
@@ -16,8 +16,11 @@ template(name="swimlaneFixedHeader")
     unless currentUser.isCommentOnly
       a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon
       a.fa.fa-navicon.js-open-swimlane-menu
-      if showDesktopDragHandles
-        a.swimlane-header-menu-handle.handle.fa.fa-arrows.js-swimlane-header-handle
+      if isMiniScreen
+        a.swimlane-header-menu-miniscreen-handle.handle.fa.fa-arrows.js-swimlane-header-handle
+      unless isMiniScreen
+        if showDesktopDragHandles
+          a.swimlane-header-menu-handle.handle.fa.fa-arrows.js-swimlane-header-handle
 
 template(name="editSwimlaneTitleForm")
   .list-composer
diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js
index 2c916e4d..8953eb05 100644
--- a/client/components/swimlanes/swimlanes.js
+++ b/client/components/swimlanes/swimlanes.js
@@ -53,22 +53,9 @@ function initSortable(boardComponent, $listsDom) {
     },
   };
 
-  if (Utils.isMiniScreen) {
-    $listsDom.sortable({
-      handle: '.js-list-handle',
-    });
-  }
-
-  if (!Utils.isMiniScreen && showDesktopDragHandles) {
-    $listsDom.sortable({
-      handle: '.js-list-header',
-    });
-  }
-
   $listsDom.sortable({
     tolerance: 'pointer',
     helper: 'clone',
-    handle: '.js-list-header',
     items: '.js-list:not(.js-list-composer)',
     placeholder: 'list placeholder',
     distance: 7,
@@ -113,6 +100,22 @@ function initSortable(boardComponent, $listsDom) {
   // is not a board member
   boardComponent.autorun(() => {
     const $listDom = $listsDom;
+
+    if (Utils.isMiniScreen) {
+      $listsDom.sortable({
+        handle: '.js-list-handle',
+      });
+    }
+
+    if (!Utils.isMiniScreen && showDesktopDragHandles) {
+      $listsDom.sortable({
+        handle: '.js-list-header',
+      });
+    }
+
+
+
+
     if ($listDom.data('sortable')) {
       $listsDom.sortable(
         'option',
@@ -165,7 +168,7 @@ BlazeComponent.extendComponent({
           // his mouse.
 
           if (Utils.isMiniScreen) {
-            const noDragInside = [
+            noDragInside = [
               'a',
               'input',
               'textarea',
@@ -176,7 +179,7 @@ BlazeComponent.extendComponent({
           }
 
           if (!Utils.isMiniScreen && !showDesktopDragHandles) {
-            const noDragInside = [
+            noDragInside = [
               'a',
               'input',
               'textarea',
@@ -186,7 +189,7 @@ BlazeComponent.extendComponent({
           }
 
           if (!Utils.isMiniScreen && showDesktopDragHandles) {
-            const noDragInside = [
+            noDragInside = [
               'a',
               'input',
               'textarea',
diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl
index 503091ee..4fbfce4f 100644
--- a/client/components/swimlanes/swimlanes.styl
+++ b/client/components/swimlanes/swimlanes.styl
@@ -58,6 +58,14 @@
       left: 300px
       font-size: 18px
 
+    .swimlane-header-menu-miniscreen-handle
+      position: absolute
+      padding: 7px
+      top: 50%
+      transform: translateY(-50%)
+      left: 487px
+      font-size: 18px
+
 .list-group
   height: 100%