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] 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 {