From 3e7edd84faed15b335fcd072a07ee3dad7cf946f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 2 Nov 2021 22:59:32 +0100
Subject: [PATCH] chore: simplify task title markup

---
 .../tasks/partials/relatedTasks.vue           | 78 +++++++++----------
 1 file changed, 35 insertions(+), 43 deletions(-)

diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 28b5b4253..fadfd802d 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -83,25 +83,23 @@
 			<span class="title">{{ rts.title }}</span>
 			<div class="tasks noborder">
 				<div :key="t.id" class="task" v-for="t in rts.tasks">
-					<router-link :to="{ name: $route.name, params: { id: t.id } }">
-						<span :class="{ 'done': t.done}" class="tasktext">
+					<router-link :to="{ name: $route.name, params: { id: t.id } }" :class="{ 'done': t.done}">
+						<span
+							class="different-list"
+							v-if="t.listId !== listId"
+						>
 							<span
-								class="different-list"
-								v-if="t.listId !== listId"
-							>
-								<span
-									v-if="t.differentNamespace !== null"
-									v-tooltip="$t('task.relation.differentNamespace')">
-									{{ t.differentNamespace }} >
-								</span>
-								<span
-									v-if="t.differentList !== null"
-									v-tooltip="$t('task.relation.differentList')">
-									{{ t.differentList }} >
-								</span>
+								v-if="t.differentNamespace !== null"
+								v-tooltip="$t('task.relation.differentNamespace')">
+								{{ t.differentNamespace }} >
+							</span>
+							<span
+								v-if="t.differentList !== null"
+								v-tooltip="$t('task.relation.differentList')">
+								{{ t.differentList }} >
 							</span>
-							{{ t.title }}
 						</span>
+						{{ t.title }}
 					</router-link>
 					<a
 						@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
@@ -345,37 +343,31 @@ $remove-icon-width: 24px;
 				width: calc(100% - #{$remove-icon-width});
 			}
 
-			.task .tasktext {
-				width: calc(100% - .25rem); // Magic .25rem extra space
-			}
-
-			.remove {
-				width: $remove-icon-width;
-				text-align: center;
-			}
-		}
-
-		.task {
-			display: flex;
-			flex-wrap: wrap;
-			padding: .4rem;
-			transition: background-color $transition;
-			align-items: center;
-			cursor: pointer;
-			border-radius: $radius;
-			border: 2px solid transparent;
-
-			a {
-				color: $text;
-				transition: color ease $transition-duration;
+			.task {
+				display: flex;
+				flex-wrap: wrap;
+				padding: .75rem;
+				transition: background-color $transition;
+				border-radius: $radius;
 
 				&:hover {
-					color: $grey-900;
+					background-color: $grey-200;
 				}
-			}
 
-			.remove {
-				color: $red;
+				a {
+					color: $text;
+					transition: color ease $transition-duration;
+
+					&:hover {
+						color: $grey-900;
+					}
+				}
+
+				.remove {
+					width: $remove-icon-width;
+					text-align: center;
+					color: $red;
+				}
 			}
 		}
 	}