Merge branch 'issue-boards-mobile-improvements' into 'master'

Improvements to issue boards on mobile

## What does this MR do?

- Removes the drag handles
- Adds a delay before dragging can start otherwise you can't scroll the page

See merge request !5897

7 files changed, 8 insertions, 38 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 2c65d4427be..a612cf0f1ae 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -38,7 +38,7 @@ $(() => {
     ready () {
       Store.disabled = this.disabled;
       gl.boardService.all()
-        .then((resp) => {          
+        .then((resp) => {
           resp.json().forEach((board) => {
             const list = Store.addList(board);
 
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index 5ef6a1b2277..d7f4107cb02 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -72,10 +72,6 @@
         }
       });
 
-      if (bp.getBreakpointSize() === 'xs') {
-        options.handle = '.js-board-drag-handle';
-      }
-
       this.sortable = Sortable.create(this.$el.parentNode, options);
     },
     beforeDestroy () {
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index dceacb25452..a6644e9eb8c 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -74,10 +74,6 @@
         }
       });
 
-      if (bp.getBreakpointSize() === 'xs') {
-        options.handle = '.js-card-drag-handle';
-      }
-
       this.sortable = Sortable.create(this.$els.list, options);
 
       // Scroll event on list to load more
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
index 8e8d13ede5a..44addb3ea98 100644
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
@@ -13,6 +13,8 @@
     document.body.classList.remove('is-dragging');
   };
 
+  gl.issueBoards.touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
+
   gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
     let defaultSortOptions = {
       forceFallback: true,
@@ -20,7 +22,8 @@
       fallbackOnBody: true,
       ghostClass: 'is-ghost',
       filter: '.has-tooltip',
-      scrollSensitivity: 100,
+      delay: gl.issueBoards.touchEnabled ? 100 : 0,
+      scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
       scrollSpeed: 20,
       onStart: gl.issueBoards.onStart,
       onEnd: gl.issueBoards.onEnd
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index bea9ac75715..9ac4d801ac4 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -105,8 +105,8 @@
 .board {
   display: -webkit-flex;
   display: flex;
-  min-width: calc(100vw - 15px);
-  max-width: calc(100vw - 15px);
+  min-width: calc(85vw - 15px);
+  max-width: calc(85vw - 15px);
   margin-bottom: 25px;
   padding-right: ($gl-padding / 2);
   padding-left: ($gl-padding / 2);
@@ -158,14 +158,6 @@
   padding: $gl-padding;
   font-size: 1em;
   border-bottom: 1px solid $border-color;
-
-  .board-mobile-handle {
-    position: relative;
-    left: 0;
-    top: 1px;
-    margin-top: 0;
-    margin-right: 5px;
-  }
 }
 
 .board-search-container {
@@ -268,11 +260,7 @@
   list-style: none;
 
   &.user-can-drag {
-    padding-left: ($gl-padding * 2);
-
-    @media (min-width: $screen-sm-min) {
-      padding-left: $gl-padding;
-    }
+    padding-left: $gl-padding;
   }
 
   &:not(:last-child) {
@@ -293,17 +281,6 @@
   }
 }
 
-.board-mobile-handle {
-  position: absolute;
-  left: 10px;
-  top: 50%;
-  margin-top: (-15px / 2);
-
-  @media (min-width: $screen-sm-min) {
-    display: none;
-  }
-}
-
 .card-title {
   margin: 0;
   font-size: 1em;
diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index f8ebf397ee2..de53a298f84 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/app/views/projects/boards/components/_board.html.haml
@@ -11,7 +11,6 @@
     .board-inner
       %header.board-header{ ":class" => "{ 'has-border': list.label }", ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" }
         %h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': (!disabled && !list.preset) }" }
-          = icon("align-justify", class: "board-mobile-handle js-board-drag-handle", "v-if" => "(!disabled && !list.preset)")
           {{ list.title }}
           %span.pull-right{ "v-if" => "list.type !== 'blank'" }
             {{ list.issues.length }}
diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml
index b20c23f6b8e..e8b60b54d80 100644
--- a/app/views/projects/boards/components/_card.html.haml
+++ b/app/views/projects/boards/components/_card.html.haml
@@ -9,7 +9,6 @@
   "track-by" => "id" }
   %li.card{ ":class" => "{ 'user-can-drag': !disabled }",
     ":index" => "index" }
-    = icon("align-justify", class: "board-mobile-handle js-card-drag-handle", "v-if" => "!disabled")
     %h4.card-title
       = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
       %a{ ":href" => "issueLinkBase + '/' + issue.id",