From ae5d3ecac5883bd26994fb034254d2e22570c9d3 Mon Sep 17 00:00:00 2001
From: konrad <k@knt.li>
Date: Tue, 16 Nov 2021 21:44:07 +0000
Subject: [PATCH] fix: kanban card spacing (#1005)

Co-authored-by: kolaente <k@knt.li>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1005
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
---
 src/components/tasks/gantt-component.vue       |  1 -
 src/components/tasks/partials/kanban-card.vue  |  2 +-
 src/components/tasks/partials/relatedTasks.vue |  4 ++++
 src/styles/components/tasks.scss               | 15 ---------------
 src/views/list/views/Kanban.vue                |  1 -
 src/views/list/views/List.vue                  |  1 +
 src/views/tasks/ShowTasks.vue                  |  4 ++++
 7 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index 9e56c755c..4b401e90a 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -500,7 +500,6 @@ $gantt-vertical-border-color: $grey-100;
 
 	.tasks {
 		max-width: unset !important;
-		margin: 0;
 		border-top: $gantt-border;
 
 		.row {
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index ae5187103..a3056c9d2 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -1,5 +1,6 @@
 <template>
 	<div
+		class="task loader-container draggable"
 		:class="{
 			'is-loading': loadingInternal || loading,
 			'draggable': !(loadingInternal || loading),
@@ -9,7 +10,6 @@
 		@click.ctrl="() => toggleTaskDone(task)"
 		@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
 		@click.meta="() => toggleTaskDone(task)"
-		class="task loader-container draggable"
 	>
 		<span class="task-id">
 			<Done class="kanban-card__done" :is-done="task.done" variant="small" />
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index beec2bf6a..6e99775fe 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -319,6 +319,10 @@ export default {
 	margin: 0;
 }
 
+.tasks {
+	padding: .5rem;
+}
+
 .task {
 	display: flex;
 	flex-wrap: wrap;
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index ca8aeaf58..e001c3686 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -2,8 +2,6 @@
 // very hard to untangle
 // they have many overwrites at different positions
 .tasks {
-	margin-top: 1rem;
-	padding: 0;
 	text-align: left;
 
 	
@@ -26,19 +24,6 @@
 		margin: 1rem -0.5rem;
 	}
 
-	.task {
-		margin: 0 .5rem;
-	
-		&:first-child {
-			margin-top: .5rem;
-		}
-	
-		&:last-child {
-			margin-bottom: .5rem;
-			border-bottom: none;
-		}
-	}
-
 	.checklist-summary {
 		padding-left: .5rem;
 		font-size: .9rem;
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index ac220296c..b96875682 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -636,7 +636,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		.tasks {
 			max-height: calc(#{$crazy-height-calculation-tasks});
 			overflow: auto;
-			margin-top: 0;
 
 			@media screen and (max-width: $tablet) {
 				max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index ecb2d8d15..9dd4baf14 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -323,6 +323,7 @@ export default {
 
 	.tasks {
 		width: 100%;
+		padding: .5rem;
 
 		.ghost {
 			border-radius: $radius;
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index d2bd27aef..d639d1133 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -271,6 +271,10 @@ h3 {
 	}
 }
 
+.tasks {
+	padding: .5rem;
+}
+
 .llama-cool {
 	margin-top: 2rem;
 }