From 2b852de06f26aa5d7b4b4312a316080a89a17a39 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 15 Jan 2021 21:04:48 +0100
Subject: [PATCH] Make full task in task list clickable

Fixes #362
---
 .../tasks/partials/singleTaskInList.vue       | 13 ++++++-----
 src/styles/components/tasks.scss              | 22 ++++++++++---------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 325a9184..29ad04ef 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -6,8 +6,11 @@
 			class="color-bubble"
 			v-if="listColor !== ''">
 		</span>
-		<span :class="{ 'done': task.done}" class="tasktext">
-			<router-link :to="{ name: taskDetailRoute, params: { id: task.id } }">
+		<router-link
+			:to="{ name: taskDetailRoute, params: { id: task.id } }"
+			:class="{ 'done': task.done}"
+			class="tasktext">
+			<span>
 				<router-link
 					:to="{ name: 'list.list', params: { listId: task.listId } }"
 					class="task-list"
@@ -16,7 +19,7 @@
 					{{ $store.getters['lists/getListById'](task.listId).title }}
 				</router-link>
 
-				<!-- Show any parent tasks to make it clear this task is a sub task of something -->
+					<!-- Show any parent tasks to make it clear this task is a sub task of something -->
 				<span class="parent-tasks" v-if="typeof task.relatedTasks.parenttask !== 'undefined'">
 					<template v-for="(pt, i) in task.relatedTasks.parenttask">
 						{{ pt.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
@@ -24,7 +27,7 @@
 					>
 				</span>
 				{{ task.title }}
-			</router-link>
+			</span>
 
 			<labels :labels="task.labels"/>
 			<user
@@ -55,7 +58,7 @@
 					<icon icon="align-left"/>
 				</span>
 			</span>
-		</span>
+		</router-link>
 		<progress
 			class="progress is-small"
 			v-if="task.percentDone > 0"
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index 637f7fa5..78267fed 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -169,17 +169,19 @@
   }
 }
 
-.is-menu-enabled .tasks .task span:not(.tag) {
-  .tasktext, &.tasktext {
-    @media screen and (max-width: $desktop) {
-      max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
-    }
+.is-menu-enabled .tasks .task {
+  span:not(.tag), a {
+    .tasktext, &.tasktext {
+	  @media screen and (max-width: $desktop) {
+	    max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
+      }
 
-    // Duplicated rule to have it work properly in at least some browsers
-    // This should be fine as the ui doesn't work in rare edge cases to begin with
-    @media screen and (max-width: calc(#{$desktop} + #{$navbar-width})) {
-      max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
-    }
+	  // Duplicated rule to have it work properly in at least some browsers
+	  // This should be fine as the ui doesn't work in rare edge cases to begin with
+	  @media screen and (max-width: calc(#{$desktop} + #{$navbar-width})) {
+	    max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
+      }
+	}
   }
 }