Merge pull request #2230 from nextcloud/enh/scroll-stacks

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;
@@ -201,21 +203,17 @@ export default {
 			.stack {
 				display: flex;
 				flex-direction: column;
+				position: relative;
 
 				.smooth-dnd-container.vertical {
 					flex-grow: 1;
 					display: flex;
 					flex-direction: column;
-					padding: 0;
+					padding: $stack-spacing;
-					/**
+					overflow-x: hidden;
-					 * Use this to scroll each stack individually
+					overflow-y: auto;
-					 * This currenly has the issue that the popover menu will be cut off
+					padding-top: 15px;
-					 */
+					margin-top: -10px;
-					/*
-					overflow-x: scroll;
-					height: calc(100vh - 50px - 44px * 2 - 30px);
-					max-height: calc(100vh - 50px - 44px * 2 - 30px);
-					*/
 				}
 
 				.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {

src/components/board/Stack.vue

@@ -23,14 +23,14 @@
 
 <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 }}
 				</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>
@@ -267,24 +267,43 @@ export default {
 	@import './../../css/variables';
 
 	.stack {
-		width: $stack-width;
+		width: $stack-width + $stack-spacing*3;
-		margin-left: $stack-spacing;
+		margin-left: $stack-spacing/2;
-		margin-right: $stack-spacing;
+		margin-right: $stack-spacing/2;
 	}
 
-	.stack--header {
+	.stack__header {
 		display: flex;
 		position: sticky;
 		top: 0;
 		z-index: 100;
-		padding: 3px;
+		padding-left: $card-spacing;
-		margin: 3px -3px;
-		margin-right: -10px;
-		margin-top: 0;
-		margin-bottom: 3px;
-		background-color: var(--color-main-background-translucent);
 		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;
@@ -296,30 +315,28 @@ 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 {
-		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);
-		margin-left: -10px;
-		margin-right: -10px;
-		padding-top: 3px;
 
 		form {
 			display: flex;
 			width: 100%;
-			margin: 10px;
+			margin: 0;
-			margin-top: 0;
+			margin-right: 6px;
-			margin-bottom: 10px;
 			box-shadow: 0 0 3px var(--color-box-shadow);
 			border-radius: var(--border-radius-large);
 			overflow: hidden;
@@ -339,10 +356,6 @@ export default {
 		}
 	}
 
-	.stack .smooth-dnd-container.vertical {
-		margin-top: 3px;
-	}
-
 	/**
 	 * Rules to handle scrolling behaviour are inherited from Board.vue
 	 */

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({ behavior: 'smooth', block: 'center', inline: 'center' }))
+			}
+		},
+	},
 	methods: {
 		openCard() {
 			const boardId = this.card && this.card.boardId ? this.card.boardId : this.$route.params.id
@@ -160,10 +167,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 +183,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;