Fix Can't Scroll on All Boards on mobile phone. Added drag handles.

Thanks to xet7 !

Fixes #3096

3 files changed, 26 insertions, 0 deletions

diff --git a/client/components/boards/boardsList.jade b/client/components/boards/boardsList.jade
index bbce1d6f..7fd7c2ba 100644
--- a/client/components/boards/boardsList.jade
+++ b/client/components/boards/boardsList.jade
@@ -31,6 +31,10 @@ template(name="boardList")
                   i.fa.js-has-spenttime-cards(
                     class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
                     title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
+                if isMiniScreen
+                  i.fa.board-handle(
+                      class="fa-arrows"
+                      title="{{_ 'Drag board'}}")
                 unless isMiniScreen
                   if isSandstorm
                     i.fa.js-clone-board(
diff --git a/client/components/boards/boardsList.js b/client/components/boards/boardsList.js
index b99c0c31..ddc10324 100644
--- a/client/components/boards/boardsList.js
+++ b/client/components/boards/boardsList.js
@@ -72,6 +72,12 @@ BlazeComponent.extendComponent({
 
     // Disable drag-dropping if the current user is not a board member or is comment only
     this.autorun(() => {
+     if (Utils.isMiniScreen()) {
+        $boards.sortable({
+          handle: '.board-handle',
+        });
+      }
+
       $boards.sortable('option', 'disabled', !userIsAllowedToMove());
     });
   },
diff --git a/client/components/boards/boardsList.styl b/client/components/boards/boardsList.styl
index 97d4f195..0cadbf84 100644
--- a/client/components/boards/boardsList.styl
+++ b/client/components/boards/boardsList.styl
@@ -208,6 +208,22 @@ $spaceBetweenTiles = 16px
       top: -100px
       left: -100px
 
+    .board-handle
+      position: absolute
+      padding: 7px
+      top: 50%
+      transform: translateY(-50%)
+      right: 10px
+      font-size: 24px
+
 @media screen and (max-width: 360px)
     li
       width: 100%
+
+    .board-handle
+      position: absolute
+      padding: 7px
+      top: 50%
+      transform: translateY(-50%)
+      right: 10px
+      font-size: 24px