Mobile improvements

app/assets/javascripts/boards/components/board.js.es6

@@ -42,7 +42,7 @@
       }
     },
     ready: function () {
-      const options = _.extend({
+      let options = _.extend({
         disabled: this.disabled,
         group: 'boards',
         draggable: '.is-draggable',
@@ -52,6 +52,10 @@
         }
       }, gl.boardSortableDefaultOptions);
 
+      if (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'xs') {
+        options.handle = '.js-board-drag-handle';
+      }
+
       Sortable.create(this.$el.parentNode, options);
     }
   });

app/assets/javascripts/boards/components/board_list.js.es6

@@ -46,7 +46,7 @@
     },
     ready: function () {
       const list = this.list;
-      const options = _.extend({
+      let options = _.extend({
         group: 'issues',
         disabled: this.disabled,
         onAdd: (e) => {
@@ -62,6 +62,10 @@
         }
       }, gl.boardSortableDefaultOptions);
 
+      if (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'xs') {
+        options.handle = '.js-card-drag-handle';
+      }
+
       Sortable.create(this.$els.list, options);
 
       // Scroll event on list to load more

app/assets/javascripts/boards/mixins/sortable_default_options.js.es6

-(function (w) {
+((w) => {
   if (!window.gl) {
     window.gl = {};
   }
@@ -9,7 +9,7 @@
     fallbackOnBody: true,
     ghostClass: 'is-ghost',
     filter: '.has-tooltip',
-    scrollSensitivity: 50,
+    scrollSensitivity: 100,
     scrollSpeed: 10,
     onStart: function () {
       document.body.classList.add('is-dragging');

app/assets/stylesheets/pages/boards.scss

@@ -140,10 +140,19 @@
 }
 
 .board-title {
+  position: relative;
   margin: 0;
   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 {
@@ -241,6 +250,7 @@
 }
 
 .card {
+  position: relative;
   width: 100%;
   padding: 10px $gl-padding;
   background: #fff;
@@ -248,6 +258,14 @@
   box-shadow: 0 1px 2px rgba(186, 186, 186, 0.5);
   list-style: none;
 
+  &.user-can-drag {
+    padding-left: ($gl-padding * 2);
+
+    @media (min-width: $screen-sm-min) {
+      padding-left: $gl-padding;
+    }
+  }
+
   &:not(:last-child) {
     margin-bottom: 5px;
   }
@@ -262,6 +280,17 @@
   }
 }
 
+.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;

app/views/projects/boards/components/_board.html.haml

@@ -8,6 +8,7 @@
     .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 && !isPreset) }" }
+          = icon("align-justify", class: "board-mobile-handle js-board-drag-handle", "v-if" => "(!disabled && !isPreset)")
           {{ list.title }}
           %span.pull-right{ "v-if" => "list.type !== 'blank'" }
             {{ list.issues.length }}

app/views/projects/boards/components/_card.html.haml

@@ -6,6 +6,7 @@
   "track-by" => "id" }
   %li.card{ ":data-issue" => "issue.id",
     ":class" => "{ 'user-can-drag': !disabled }" }
+    = icon("align-justify", class: "board-mobile-handle js-card-drag-handle", "v-if" => "!disabled")
     %h4.card-title
       %a{ ":href" => "issueLinkBase + '/' + issue.id",
         ":title" => "issue.title" }