From 98e255ccece1b7bf76119c26b1c5f834cf99c940 Mon Sep 17 00:00:00 2001 From: Lauri Ojansivu Date: Sat, 16 May 2020 03:08:05 +0300 Subject: Fix Can't Scroll on All Boards on mobile phone. Added drag handles. Thanks to xet7 ! Fixes #3096 --- client/components/boards/boardsList.jade | 4 ++++ client/components/boards/boardsList.js | 6 ++++++ client/components/boards/boardsList.styl | 16 ++++++++++++++++ 3 files changed, 26 insertions(+) (limited to 'client/components/boards') 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 -- cgit v1.2.3-1-g7c22