From bd9fe49ec4dc7f5cfa459088f56e4e7ce8901872 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Mon, 24 Aug 2020 16:36:08 +0200 Subject: [PATCH] Implement scrolling per stack MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- src/components/board/Board.vue | 16 ++++++---------- src/components/board/Stack.vue | 10 +++------- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue index eaed07710..a254f94b6 100644 --- a/src/components/board/Board.vue +++ b/src/components/board/Board.vue @@ -194,6 +194,8 @@ export default { .smooth-dnd-container.horizontal { display: flex; align-items: stretch; + height: 100%; + .smooth-dnd-draggable-wrapper::v-deep { display: flex; height: auto; @@ -206,16 +208,10 @@ export default { flex-grow: 1; display: flex; flex-direction: column; - padding: 0; - /** - * Use this to scroll each stack individually - * This currenly has the issue that the popover menu will be cut off - */ - /* - overflow-x: scroll; - height: calc(100vh - 50px - 44px * 2 - 30px); - max-height: calc(100vh - 50px - 44px * 2 - 30px); - */ + margin-top: 3px; + padding: $stack-spacing; + overflow-x: hidden; + overflow-y: scroll; } .smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper { diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue index c04eba3cb..8a2d24845 100644 --- a/src/components/board/Stack.vue +++ b/src/components/board/Stack.vue @@ -267,9 +267,9 @@ export default { @import './../../css/variables'; .stack { - width: $stack-width; - margin-left: $stack-spacing; - margin-right: $stack-spacing; + width: $stack-width + $stack-spacing*3; + margin-left: $stack-spacing/2; + margin-right: $stack-spacing/2; } .stack--header { @@ -339,10 +339,6 @@ export default { } } - .stack .smooth-dnd-container.vertical { - margin-top: 3px; - } - /** * Rules to handle scrolling behaviour are inherited from Board.vue */