From bd9fe49ec4dc7f5cfa459088f56e4e7ce8901872 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 24 Aug 2020 16:36:08 +0200
Subject: [PATCH 1/7] 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 <jus@bitgrid.net>
---
 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
 	 */

From 7efd702b24076516e50b6c8d86a9db731fda678a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 13 Oct 2020 10:43:34 +0200
Subject: [PATCH 2/7] Fix new card input positioning
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/board/Board.vue |  2 +-
 src/components/board/Stack.vue | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index a254f94b6..57edc5517 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -211,7 +211,7 @@ export default {
 					margin-top: 3px;
 					padding: $stack-spacing;
 					overflow-x: hidden;
-					overflow-y: scroll;
+					overflow-y: auto;
 				}
 
 				.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 8a2d24845..67eeac213 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -309,17 +309,15 @@ export default {
 		height: 52px;
 		z-index: 100;
 		display: flex;
+		margin-left: 12px;
+		margin-right: 12px;
 		background-color: var(--color-main-background);
-		margin-left: -10px;
-		margin-right: -10px;
-		padding-top: 3px;
 
 		form {
 			display: flex;
 			width: 100%;
-			margin: 10px;
-			margin-top: 0;
-			margin-bottom: 10px;
+			margin: 0;
+			margin-right: 6px;
 			box-shadow: 0 0 3px var(--color-box-shadow);
 			border-radius: var(--border-radius-large);
 			overflow: hidden;

From c1423cde5a881895c566f630cd41ee49fe9227aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 13 Oct 2020 10:48:37 +0200
Subject: [PATCH 3/7] Fix card hover/active states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/board/Stack.vue    | 1 -
 src/components/cards/CardItem.vue | 9 ++++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 67eeac213..17ff8aa0a 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -282,7 +282,6 @@ export default {
 		margin-right: -10px;
 		margin-top: 0;
 		margin-bottom: 3px;
-		background-color: var(--color-main-background-translucent);
 		cursor: grab;
 
 		h3, form {
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 2ca8bb36b..92f3aa762 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -160,10 +160,6 @@ export default {
 	@import './../../css/animations';
 	@import './../../css/variables';
 
-	.card:hover {
-		box-shadow: 0 0 5px 1px var(--color-box-shadow);
-	}
-
 	.card {
 		transition: box-shadow 0.1s ease-in-out;
 		box-shadow: 0 0 2px 0 var(--color-box-shadow);
@@ -180,9 +176,12 @@ export default {
 			border: 2px solid var(--color-border);
 		}
 
-		&.current-card {
+		&:hover {
 			box-shadow: 0 0 5px 0 var(--color-box-shadow);
 		}
+		&.current-card {
+			box-shadow: 0 0 5px 1px var(--color-box-shadow);
+		}
 
 		.card-upper {
 			display: flex;

From d0147cb03e9f353893e5a936808697de46e5df07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 13 Oct 2020 10:48:48 +0200
Subject: [PATCH 4/7] Revert "Do not scroll cards into view"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit abf67138e7c97ef4e61defc4504e0baf7fa6311a.

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/cards/CardItem.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 92f3aa762..f2aaabacc 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -131,6 +131,13 @@ export default {
 			return [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
 		},
 	},
+	watch: {
+		currentCard(newValue) {
+			if (newValue) {
+				this.$nextTick(() => this.$el.scrollIntoView())
+			}
+		},
+	},
 	methods: {
 		openCard() {
 			const boardId = this.card && this.card.boardId ? this.card.boardId : this.$route.params.id

From 8ae580fd57dfab7766e533d29cd244237a70aeb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 13 Oct 2020 11:37:33 +0200
Subject: [PATCH 5/7] Implement fading out the cards when scrolling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/board/Board.vue |  4 +++-
 src/components/board/Stack.vue | 36 ++++++++++++++++++++++++++--------
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 57edc5517..7a3d49efb 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -203,15 +203,17 @@ export default {
 			.stack {
 				display: flex;
 				flex-direction: column;
+				position: relative;
 
 				.smooth-dnd-container.vertical {
 					flex-grow: 1;
 					display: flex;
 					flex-direction: column;
-					margin-top: 3px;
 					padding: $stack-spacing;
 					overflow-x: hidden;
 					overflow-y: auto;
+					padding-top: 15px;
+					margin-top: -10px;
 				}
 
 				.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 17ff8aa0a..4bd9b749d 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -23,7 +23,7 @@
 
 <template>
 	<div class="stack">
-		<div v-click-outside="stopCardCreation" class="stack--header">
+		<div v-click-outside="stopCardCreation" class="stack--header" :class="{'stack--header--add': showAddCard }">
 			<transition name="fade" mode="out-in">
 				<h3 v-if="!canManage || isArchived">
 					{{ stack.title }}
@@ -277,13 +277,33 @@ export default {
 		position: sticky;
 		top: 0;
 		z-index: 100;
-		padding: 3px;
-		margin: 3px -3px;
-		margin-right: -10px;
-		margin-top: 0;
-		margin-bottom: 3px;
+		padding-left: $card-spacing;
 		cursor: grab;
 
+		// Smooth fade out of the cards at the top
+		&:before {
+			content: ' ';
+			display: block;
+			position: absolute;
+			background-image: linear-gradient(180deg, var(--color-main-background) 3px, transparent 100%);
+			width: 100%;
+			height: 25px;
+			top: 35px;
+			right: 6px;
+			z-index: 99;
+			transition: top var(--animation-slow);
+		}
+
+		&--add:before {
+			height: 80px;
+			background-image: linear-gradient(180deg, var(--color-main-background) 68px, transparent 100%);
+		}
+
+		& > * {
+			position: relative;
+			z-index: 100;
+		}
+
 		h3, form {
 			flex-grow: 1;
 			display: flex;
@@ -303,13 +323,13 @@ export default {
 	}
 
 	.stack--card-add {
-		position: sticky;
-		top: 52px;
 		height: 52px;
 		z-index: 100;
 		display: flex;
 		margin-left: 12px;
 		margin-right: 12px;
+		margin-top: 5px;
+		margin-bottom: 20px;
 		background-color: var(--color-main-background);
 
 		form {

From 4b8c811429b2cac18928a148690225e1867a74e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 14 Oct 2020 17:42:29 +0200
Subject: [PATCH 6/7] Use smooth scrolling to the center
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/cards/CardItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index f2aaabacc..c88e25841 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -134,7 +134,7 @@ export default {
 	watch: {
 		currentCard(newValue) {
 			if (newValue) {
-				this.$nextTick(() => this.$el.scrollIntoView())
+				this.$nextTick(() => this.$el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }))
 			}
 		},
 	},

From 78299b3466dfa84b416d219e4e9e35e64724ff5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 5 Nov 2020 17:29:27 +0100
Subject: [PATCH 7/7] Apply proper BEM syntax
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/board/Stack.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 4bd9b749d..4e7d945ac 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -23,14 +23,14 @@
 
 <template>
 	<div class="stack">
-		<div v-click-outside="stopCardCreation" class="stack--header" :class="{'stack--header--add': showAddCard }">
+		<div v-click-outside="stopCardCreation" class="stack__header" :class="{'stack__header--add': showAddCard }">
 			<transition name="fade" mode="out-in">
 				<h3 v-if="!canManage || isArchived">
 					{{ stack.title }}
 				</h3>
 				<h3 v-else-if="!editing"
 					v-tooltip="stack.title"
-					class="stack--title"
+					class="stack__title"
 					@click="startEditing(stack)">
 					{{ stack.title }}
 				</h3>
@@ -71,7 +71,7 @@
 		</Modal>
 
 		<transition name="slide-top" appear>
-			<div v-if="showAddCard" class="stack--card-add">
+			<div v-if="showAddCard" class="stack__card-add">
 				<form :class="{ 'icon-loading-small': stateCardCreating }"
 					@submit.prevent.stop="clickAddCard()">
 					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
@@ -272,7 +272,7 @@ export default {
 		margin-right: $stack-spacing/2;
 	}
 
-	.stack--header {
+	.stack__header {
 		display: flex;
 		position: sticky;
 		top: 0;
@@ -315,14 +315,14 @@ export default {
 		}
 	}
 
-	.stack--title {
+	.stack__title {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		max-width: calc($stack-width - 60px);
 	}
 
-	.stack--card-add {
+	.stack__card-add {
 		height: 52px;
 		z-index: 100;
 		display: flex;