feature(3331): aligned stack children spacing and fixed linting issues

Signed-off-by: Luutzen Dijkstra <[email protected]>

Author: ludij

src/components/board/Board.vue

@@ -310,11 +310,12 @@ export default {
 				position: relative;
 
 				.smooth-dnd-container.vertical {
+					$margin-x: calc($stack-gap * -1);
 					display: flex;
 					flex-direction: column;
 					gap: $stack-gap;
-					padding: 5px calc(#{$stack-gap / 2}) $stack-gap;
-					margin: 0 calc(#{$stack-gap / -2});
+					padding: $stack-gap;
+					margin: 0 $margin-x;
 					overflow-y: auto;
 					scrollbar-gutter: stable;
 				}

src/components/board/Stack.vue

@@ -108,7 +108,7 @@
 		</Container>
 
 		<transition name="slide-bottom" appear>
-			<div v-show="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>
@@ -384,16 +384,12 @@ export default {
 			display: block;
 			position: absolute;
 			width: 100%;
-			height: 20px;
-			top: 30px;
-			left: 0px;
+			height: $stack-gap;
+			bottom: 0;
 			z-index: 99;
 			transition: top var(--animation-slow);
-			background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(255, 255, 255, 0) 100%);
-
-			body.theme--dark & {
-				background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(0, 0, 0, 0) 100%);
-			}
+			background-image: linear-gradient(180deg, var(--color-main-background) 0%, transparent 100%);
+			transform: translateY(100%);
 		}
 
 		& > * {
@@ -451,9 +447,22 @@ export default {
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
-		margin-bottom: 5px;
-		padding-top: var(--default-grid-baseline);
+		padding-bottom: $stack-gap;
 		background-color: var(--color-main-background);
+		position: relative;
+
+		// Smooth fade out of the cards at the top
+		&:before {
+			content: '';
+			display: block;
+			position: absolute;
+			width: 100%;
+			height: $stack-gap;
+			z-index: 99;
+			transition: bottom var(--animation-slow);
+			background-image: linear-gradient(0deg, var(--color-main-background) 0%, transparent 100%);
+			transform: translateY(-100%);
+		}
 
 		form {
 			display: flex;

src/components/overview/Overview.vue

@@ -14,19 +14,23 @@
 		</div>
 
 		<div v-else-if="isValidFilter" class="overview">
-			<div v-for="columnProps in columnPropsList" class="dashboard-column" :key="columnProps.title">
+			<div v-for="columnProps in columnPropsList" :key="columnProps.title" class="dashboard-column">
 				<div class="dashboard-column__header">
 					<h3 class="dashboard-column__header-title"
 						:title="columnProps.title"
-						:aria-label="columnProps.title"
-					>{{ t('deck', columnProps.title) }}</h3>
+						:aria-label="columnProps.title">
+						{{ t('deck', columnProps.title) }}
+					</h3>
 				</div>
 				<div class="dashboard-column__list">
 					<template v-if="columnProps.sort === false">
-						<CardItem :id="card.id" v-for="card in filterCards(columnProps.filter)" :key="card.id" />
+						<CardItem v-for="card in filterCards(columnProps.filter)"
+							:id="card.id"
+							:key="card.id" />
 					</template>
 					<template v-else>
-						<CardItem :id="card.id" v-for="card in sortCards(filterCards(columnProps.filter))"
+						<CardItem v-for="card in sortCards(filterCards(columnProps.filter))"
+							:id="card.id"
 							:key="card.id" />
 					</template>
 				</div>
@@ -131,7 +135,7 @@ export default {
 			this.loading = false
 		},
 		filterCards(when) {
-			return this.assignedCardsDashboard[when];
+			return this.assignedCardsDashboard[when]
 		},
 		sortCards(cards) {
 			if (!cards) {
@@ -217,11 +221,12 @@ export default {
 		}
 
 		.dashboard-column__list {
+			$margin-x: calc($stack-gap * -1);
 			display: flex;
 			flex-direction: column;
 			gap: $stack-gap;
-			padding: 5px calc(#{$stack-gap / 2}) $stack-gap;
-			margin: 0 calc(#{$stack-gap / -2});
+			padding: $stack-gap;
+			margin: 0 $margin-x;
 			overflow-y: auto;
 			scrollbar-gutter: stable;
 		}

src/components/search/GlobalSearchResults.vue

@@ -7,8 +7,7 @@
 	<section v-if="searchQuery!==''" class="global-search">
 		<header class="search-header">
 			<h2>
-				<NcRichText
-					:text="$route.params.id ? t('deck', 'Search for {searchQuery} in other boards') : t('deck', 'Search for {searchQuery} in all boards')"
+				<NcRichText :text="$route.params.id ? t('deck', 'Search for {searchQuery} in other boards') : t('deck', 'Search for {searchQuery} in all boards')"
 					:arguments="queryStringArgs" />
 				<span v-if="loading" class="icon-loading-small" />
 			</h2>
@@ -18,7 +17,10 @@
 		</header>
 		<div class="search-wrapper">
 			<template v-if="loading || filteredResults.length > 0">
-				<CardItem v-for="card in filteredResults" :id="card.id" :key="card.id" :standalone="true" />
+				<CardItem v-for="card in filteredResults"
+					:id="card.id"
+					:key="card.id"
+					:standalone="true" />
 				<Placeholder v-if="loading" />
 				<InfiniteLoading :identifier="searchQuery" @infinite="infiniteHandler">
 					<div slot="spinner" />