From 424bc0e7c5fc0b94c8b52fbfe6ce43e2777acf24 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Fri, 28 Jan 2022 15:56:52 +0100 Subject: [PATCH 1/3] Swimlanes scrolls right/left while sorting the list column at the screen end --- client/components/swimlanes/swimlanes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index b8a94cbff..5490b8e92 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -54,6 +54,7 @@ function initSortable(boardComponent, $listsDom) { }; $listsDom.sortable({ + connectWith: '.board-canvas', tolerance: 'pointer', helper: 'clone', items: '.js-list:not(.js-list-composer)', From a48e537b2d911972645d6ffdd2ffd8de69ccce34 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sat, 29 Jan 2022 14:31:13 +0100 Subject: [PATCH 2/3] List sorting show's now the drag/drop placeholder --- client/components/swimlanes/swimlanes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index 5490b8e92..2f704a567 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -62,6 +62,7 @@ function initSortable(boardComponent, $listsDom) { distance: 7, start(evt, ui) { ui.placeholder.height(ui.helper.height()); + ui.placeholder.css("min-width", ui.helper.width()); EscapeActions.executeUpTo('popup-close'); boardComponent.setIsDragging(true); }, From 32af18b33dd03dbf69aab39ea61c06252eb34fd0 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sat, 29 Jan 2022 14:56:06 +0100 Subject: [PATCH 3/3] Lists now moveable when swimlane requires scrolling Fixes: #4322 --- client/components/lists/list.styl | 3 ++- client/components/swimlanes/swimlanes.js | 2 +- client/components/swimlanes/swimlanes.styl | 5 +++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index a80879ebf..ca394b9bb 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -4,7 +4,6 @@ box-sizing: border-box display: flex flex-direction: column - flex: 0 0 270px position: relative // Even if this background color is the same as the body we can't leave it // transparent, because that won't work during a list drag. @@ -12,6 +11,8 @@ border-left: 1px solid darken(white, 20%) padding: 0 float: left + min-width: 270px + max-width: 270px &:first-child margin-left: 5px diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index 2f704a567..59d3c231c 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -62,7 +62,7 @@ function initSortable(boardComponent, $listsDom) { distance: 7, start(evt, ui) { ui.placeholder.height(ui.helper.height()); - ui.placeholder.css("min-width", ui.helper.width()); + ui.placeholder.width(ui.helper.width()); EscapeActions.executeUpTo('popup-close'); boardComponent.setIsDragging(true); }, diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl index 48fc57940..c57e0ec41 100644 --- a/client/components/swimlanes/swimlanes.styl +++ b/client/components/swimlanes/swimlanes.styl @@ -36,6 +36,11 @@ // Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp */ +@media screen and (min-width: 801px) + .swimlane.ui-sortable + // swimlane must have max width, otherwise lists are not sortable if there are too much lists and the swimlane "scrollable" + width: max-content + [class=swimlane] position: sticky left: 0