Merge pull request #4140 from mfilser/checklist_and_items_drag_drop_scrollable_mobile_view

Checklist and items drag drop scrollable mobile view

client/components/cards/cardDetails.styl

@@ -287,6 +287,8 @@ input[type="submit"].attachment-add-link-submit
     padding: 0px 20px 0px 20px
     margin: 0px
     transition: none
+    overflow-y: revert
+    overflow-x: revert
 
     .card-details-canvas
       width: 100%
@@ -314,12 +316,12 @@ input[type="submit"].attachment-add-link-submit
     & > .content
       width: calc(100% - 10px)
 
-    & > .content > .card-details-popup
-      overflow-y: auto
-
-      & hr
+    & > .content > .card-details-popup hr
         margin: 15px 0px
 
+      .card-details-header
+        margin: 0
+
 card-details-color(background, color...)
   background: background !important
   if color

client/components/cards/checklists.js

@@ -13,7 +13,7 @@ function initSorting(items) {
     appendTo: 'parent',
     distance: 7,
     placeholder: 'checklist-item placeholder',
-    scroll: false,
+    scroll: true,
     start(evt, ui) {
       ui.placeholder.height(ui.helper.height());
       EscapeActions.clickExecute(evt.target, 'inlinedForm');
@@ -55,7 +55,7 @@ BlazeComponent.extendComponent({
       return Meteor.user() && Meteor.user().isBoardMember();
     }
 
-    // Disable sorting if the current user is not a board member or is a miniscreen
+    // Disable sorting if the current user is not a board member
     self.autorun(() => {
       const $itemsDom = $(self.itemsDom);
       if ($itemsDom.data('uiSortable') || $itemsDom.data('sortable')) {
@@ -188,6 +188,7 @@ BlazeComponent.extendComponent({
     }
   },
 
+  /** closes all inlined forms (checklist and checklist-item input fields) */
   closeAllInlinedForms() {
     this.$('.js-close-inlined-form').click();
   },
@@ -216,8 +217,8 @@ BlazeComponent.extendComponent({
         'click .js-delete-checklist-item': this.deleteItem,
         'click .confirm-checklist-delete': this.deleteChecklist,
         'focus .js-add-checklist-item': this.focusChecklistItem,
-        'click .add-checklist-item.js-open-inlined-form': this.closeAllInlinedForms,
-        'click .add-checklist.js-open-inlined-form': this.closeAllInlinedForms,
+        // add and delete checklist / checklist-item
+        'click .js-open-inlined-form': this.closeAllInlinedForms,
         keydown: this.pressKey,
       },
     ];

client/components/cards/checklists.styl

@@ -167,4 +167,13 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
 
 .add-checklist-item
   margin: 0.2em 0 0.5em 1.33em
-  display: inline-block
+
+.add-checklist-item,.add-checklist
+  &.js-open-inlined-form
+    display: block
+    width: 50%
+
+    &:hover
+      background: #dbdbdb
+      color: #222
+      box-shadow: 0 1px 2px rgba(0,0,0,.2)