From 8ba693a44620295d52701bd0b88f97dc4cc6aa50 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 30 Dec 2021 17:51:06 +0100
Subject: [PATCH 1/5] fix: related tasks add button and task dates in read only
 view

---
 .../tasks/partials/createdUpdated.vue         |  39 ++
 .../tasks/partials/relatedTasks.vue           |   2 +-
 src/views/tasks/TaskDetailView.vue            | 420 ++++++++----------
 3 files changed, 234 insertions(+), 227 deletions(-)
 create mode 100644 src/components/tasks/partials/createdUpdated.vue

diff --git a/src/components/tasks/partials/createdUpdated.vue b/src/components/tasks/partials/createdUpdated.vue
new file mode 100644
index 000000000..c9145f372
--- /dev/null
+++ b/src/components/tasks/partials/createdUpdated.vue
@@ -0,0 +1,39 @@
+<template>
+	<p class="created">
+		<i18n-t keypath="task.detail.created">
+			<span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span>
+			{{ task.createdBy.getDisplayName() }}
+		</i18n-t>
+		<template v-if="+new Date(task.created) !== +new Date(task.updated)">
+			<br/>
+			<!-- Computed properties to show the actual date every time it gets updated -->
+			<i18n-t keypath="task.detail.updated">
+				<span v-tooltip="updatedFormatted">{{ updatedSince }}</span>
+			</i18n-t>
+		</template>
+		<template v-if="task.done">
+			<br/>
+			<i18n-t keypath="task.detail.doneAt">
+				<span v-tooltip="doneFormatted">{{ doneSince }}</span>
+			</i18n-t>
+		</template>
+	</p>
+</template>
+
+<script lang="ts" setup>
+import {computed, defineProps} from 'vue'
+import TaskModel from '@/models/task'
+import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+
+const {task} = defineProps({
+	task: {
+		type: TaskModel,
+		required: true,
+	}
+})
+
+const updatedSince = computed(() => formatDateSince(task.updated))
+const updatedFormatted = computed(() => formatDateLong(task.updated))
+const doneSince = computed(() => formatDateSince(task.doneAt))
+const doneFormatted = computed(() => formatDateLong(task.doneAt))
+</script>
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 80c04e044..68dc20995 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="task-relations">
 		<x-button
-			v-if="Object.keys(relatedTasks).length > 0"
+			v-if="editEnabled && Object.keys(relatedTasks).length > 0"
 			@click="showNewRelationForm = !showNewRelationForm"
 			class="is-pulled-right add-task-relation-button"
 			:class="{'is-active': showNewRelationForm}"
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index ed1c0eb28..50a1a1f01 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -246,8 +246,8 @@
 					<!-- Comments -->
 					<comments :can-write="canWrite" :task-id="taskId"/>
 				</div>
-				<div class="column is-one-third action-buttons">
-					<a @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4" v-if="shouldShowClosePopup">
+				<div class="column is-one-third action-buttons" v-if="canWrite || shouldShowClosePopup">
+					<a @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4">
 						<icon icon="arrow-left"/>
 						{{ $t('task.detail.closePopup') }}
 					</a>
@@ -386,33 +386,11 @@
 					</template>
 
 					<!-- Created / Updated [by] -->
-					<p class="created">
-						<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
-							<i18n-t keypath="task.detail.created">
-								<span>{{ formatDateSince(task.created) }}</span>
-								{{ task.createdBy.getDisplayName() }}
-							</i18n-t>
-						</time>
-						<template v-if="+new Date(task.created) !== +new Date(task.updated)">
-							<br/>
-							<!-- Computed properties to show the actual date every time it gets updated -->
-							<time :datetime="formatISO(task.updated)" v-tooltip="updatedFormatted">
-								<i18n-t keypath="task.detail.updated">
-									<span>{{ updatedSince }}</span>
-								</i18n-t>
-							</time>
-						</template>
-						<template v-if="task.done">
-							<br/>
-							<time :datetime="formatISO(task.doneAt)" v-tooltip="doneFormatted">
-								<i18n-t keypath="task.detail.doneAt">
-									<span>{{ doneSince }}</span>
-								</i18n-t>
-							</time>
-						</template>
-					</p>
+					<created-updated :task="task"/>
 				</div>
 			</div>
+			<!-- Created / Updated [by] -->
+			<created-updated :task="task" v-if="!canWrite && !shouldShowClosePopup"/>
 		</div>
 
 		<transition name="modal">
@@ -459,12 +437,14 @@ import {CURRENT_LIST} from '@/store/mutation-types'
 
 import {uploadFile} from '@/helpers/attachments'
 import ChecklistSummary from '../../components/tasks/partials/checklist-summary'
+import CreatedUpdated from '@/components/tasks/partials/createdUpdated'
 
 
 export default {
 	name: 'TaskDetailView',
 	compatConfig: { ATTR_FALSE_VALUE: false },
 	components: {
+		CreatedUpdated,
 		ChecklistSummary,
 		TaskSubscription,
 		Datepicker,
@@ -560,18 +540,6 @@ export default {
 		canWrite() {
 			return typeof this.task !== 'undefined' && typeof this.task.maxRight !== 'undefined' && this.task.maxRight > rights.READ
 		},
-		updatedSince() {
-			return this.formatDateSince(this.task.updated)
-		},
-		updatedFormatted() {
-			return this.formatDate(this.task.updated)
-		},
-		doneSince() {
-			return this.formatDateSince(this.task.doneAt)
-		},
-		doneFormatted() {
-			return this.formatDate(this.task.doneAt)
-		},
 		hasAttachments() {
 			return this.$store.state.attachments.attachments.length > 0
 		},
@@ -712,240 +680,240 @@ export default {
 $flash-background-duration: 750ms;
 
 .task-view {
-  // This is a workaround to hide the llama background from the top on the task detail page
-  margin-top: -1.5rem;
-  padding: 1rem;
-  background-color: var(--site-background);
+	// This is a workaround to hide the llama background from the top on the task detail page
+	margin-top: -1.5rem;
+	padding: 1rem;
+	background-color: var(--site-background);
 
-  @media screen and (max-width: $desktop) {
-    padding-bottom: 0;
-  }
-
-  .subtitle {
-    color: var(--grey-500);
-	margin-bottom: 1rem;
-
-    a {
-      color: var(--grey-800);
-    }
-  }
-
-  h3 .button {
-    vertical-align: middle;
-  }
-
-  .icon.is-grey {
-    color: var(--grey-400);
-  }
-
-  :deep(.heading) {
-    display: flex;
-    justify-content: space-between;
-    text-transform: none;
-    align-items: center;
-
-    @media screen and (max-width: $tablet) {
-      flex-direction: column;
-      align-items: start;
-    }
-
-    .title {
-      margin-bottom: 0;
+	@media screen and (max-width: $desktop) {
+		padding-bottom: 0;
 	}
 
-   .title.input {
-		// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
-		min-height: calc(1.8rem * 1.125 + .6rem + 2px);
+	.subtitle {
+		color: var(--grey-500);
+		margin-bottom: 1rem;
+
+		a {
+			color: var(--grey-800);
+		}
+	}
+
+	h3 .button {
+		vertical-align: middle;
+	}
+
+	.icon.is-grey {
+		color: var(--grey-400);
+	}
+
+	:deep(.heading) {
+		display: flex;
+		justify-content: space-between;
+		text-transform: none;
+		align-items: center;
 
 		@media screen and (max-width: $tablet) {
-			margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
+			flex-direction: column;
+			align-items: start;
 		}
-    }
 
-    .title.task-id {
-      color: var(--grey-400);
-      white-space: nowrap;
-    }
+		.title {
+			margin-bottom: 0;
+		}
 
-  }
+		.title.input {
+			// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
+			min-height: calc(1.8rem * 1.125 + .6rem + 2px);
 
-  .date-input {
-    display: flex;
-    align-items: center;
+			@media screen and (max-width: $tablet) {
+				margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
+			}
+		}
 
-    a.remove {
-      color: var(--danger);
-      vertical-align: middle;
-      padding-left: .5rem;
-      line-height: 1;
-    }
-  }
+		.title.task-id {
+			color: var(--grey-400);
+			white-space: nowrap;
+		}
 
-  :deep(.datepicker) {
-    width: 100%;
+	}
 
-    a.show {
-      color: var(--text);
-      padding: .25rem .5rem;
-      transition: background-color $transition;
-      border-radius: $radius;
-      display: block;
-      margin: .1rem 0;
+	.date-input {
+		display: flex;
+		align-items: center;
 
-      &:hover {
-        background: var(--white);
-      }
-    }
+		a.remove {
+			color: var(--danger);
+			vertical-align: middle;
+			padding-left: .5rem;
+			line-height: 1;
+		}
+	}
 
-    &.disabled a.show:hover {
-      background: transparent;
-    }
-  }
+	:deep(.datepicker) {
+		width: 100%;
 
-  .details {
-    padding-bottom: 0.75rem;
-    flex-flow: row wrap;
-    margin-bottom: 0;
+		a.show {
+			color: var(--text);
+			padding: .25rem .5rem;
+			transition: background-color $transition;
+			border-radius: $radius;
+			display: block;
+			margin: .1rem 0;
 
-    .detail-title {
-      display: block;
-      color: var(--grey-400);
-    }
+			&:hover {
+				background: var(--white);
+			}
+		}
 
-    .none {
-      font-style: italic;
-    }
+		&.disabled a.show:hover {
+			background: transparent;
+		}
+	}
 
-    // Break after the 2nd element
-    .column:nth-child(2n) {
-      page-break-after: always; // CSS 2.1 syntax
-      break-after: always; // New syntax
-    }
+	.details {
+		padding-bottom: 0.75rem;
+		flex-flow: row wrap;
+		margin-bottom: 0;
 
-    &.labels-list,
-	.assignees {
-      :deep(.multiselect) {
-        .input-wrapper {
-          &:not(:focus-within):not(:hover) {
-            background: transparent !important;
-            border-color: transparent !important;
-          }
-        }
-      }
-    }
-  }
+		.detail-title {
+			display: block;
+			color: var(--grey-400);
+		}
 
-  :deep(.details),
-  :deep(.heading) {
-    .input:not(.has-defaults),
-    .textarea,
-    .select:not(.has-defaults) select {
-      border-color: transparent;
-      background: transparent;
-      cursor: pointer;
-      transition: all $transition-duration;
+		.none {
+			font-style: italic;
+		}
 
-      &::placeholder {
-        color: var(--text-light);
-        opacity: 1;
-        font-style: italic;
-      }
+		// Break after the 2nd element
+		.column:nth-child(2n) {
+			page-break-after: always; // CSS 2.1 syntax
+			break-after: always; // New syntax
+		}
 
-      &:not(:disabled) {
-        &:hover,
-        &:active,
-        &:focus {
-          background: var(--scheme-main);
-          border-color: var(--border);
-          cursor: text;
-        }
+		&.labels-list,
+		.assignees {
+			:deep(.multiselect) {
+				.input-wrapper {
+					&:not(:focus-within):not(:hover) {
+						background: transparent !important;
+						border-color: transparent !important;
+					}
+				}
+			}
+		}
+	}
 
-        &:hover,
-        &:active {
-          cursor: text;
-          border-color: var(--link)
-        }
-      }
-    }
+	:deep(.details),
+	:deep(.heading) {
+		.input:not(.has-defaults),
+		.textarea,
+		.select:not(.has-defaults) select {
+			border-color: transparent;
+			background: transparent;
+			cursor: pointer;
+			transition: all $transition-duration;
 
-    .select:not(.has-defaults):after {
-      opacity: 0;
-    }
+			&::placeholder {
+				color: var(--text-light);
+				opacity: 1;
+				font-style: italic;
+			}
 
-    .select:not(.has-defaults):hover:after {
-      opacity: 1;
-    }
-  }
+			&:not(:disabled) {
+				&:hover,
+				&:active,
+				&:focus {
+					background: var(--scheme-main);
+					border-color: var(--border);
+					cursor: text;
+				}
 
-  .attachments {
-    margin-bottom: 0;
+				&:hover,
+				&:active {
+					cursor: text;
+					border-color: var(--link)
+				}
+			}
+		}
 
-    table tr:last-child td {
-      border-bottom: none;
-    }
-  }
+		.select:not(.has-defaults):after {
+			opacity: 0;
+		}
 
-  .action-buttons {
-    .button {
-      width: 100%;
-      margin-bottom: .5rem;
-      justify-content: left;
-    }
-  }
+		.select:not(.has-defaults):hover:after {
+			opacity: 1;
+		}
+	}
 
-  .created {
-    font-size: .75rem;
-    color: var(--grey-500);
-    text-align: right;
-  }
+	.attachments {
+		margin-bottom: 0;
 
-  .checklist-summary {
-    margin-left: .25rem;
-  }
+		table tr:last-child td {
+			border-bottom: none;
+		}
+	}
+
+	.action-buttons {
+		.button {
+			width: 100%;
+			margin-bottom: .5rem;
+			justify-content: left;
+		}
+	}
+
+	.created {
+		font-size: .75rem;
+		color: var(--grey-500);
+		text-align: right;
+	}
+
+	.checklist-summary {
+		margin-left: .25rem;
+	}
 }
 
 .task-view-container {
-  padding-bottom: 1rem;
+	padding-bottom: 1rem;
 
-  @media screen and (max-width: $desktop) {
-	padding-bottom: 0;
-  }
+	@media screen and (max-width: $desktop) {
+		padding-bottom: 0;
+	}
 
-  .task-view * {
-    opacity: 0;
-    transition: opacity 50ms ease;
-  }
+	.task-view * {
+		opacity: 0;
+		transition: opacity 50ms ease;
+	}
 
-  &.is-loading {
-    opacity: 1;
+	&.is-loading {
+		opacity: 1;
 
-    .task-view * {
-      opacity: 0;
-    }
-  }
+		.task-view * {
+			opacity: 0;
+		}
+	}
 
-  &.visible:not(.is-loading) .task-view * {
-    opacity: 1;
-  }
+	&.visible:not(.is-loading) .task-view * {
+		opacity: 1;
+	}
 }
 
 .task-view-container {
-  // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
-  --primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
+	// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
+	--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
 }
 
 .flash-background-enter-from,
-.flash-background-enter-active  {
-  animation: flash-background $flash-background-duration ease 1;
+.flash-background-enter-active {
+	animation: flash-background $flash-background-duration ease 1;
 }
 
 @keyframes flash-background {
-  0% {
-    background: var(--primary-light);
-  }
-  100% {
-    background: transparent;
-  }
+	0% {
+		background: var(--primary-light);
+	}
+	100% {
+		background: transparent;
+	}
 }
 
 @media (prefers-reduced-motion: reduce) {
-- 
2.40.1


From b93ad15c1065cc296e94db8f8f15c832eb9d1c35 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 8 Jan 2022 12:41:26 +0100
Subject: [PATCH 2/5] fix: reactivity for prop

---
 src/components/tasks/partials/createdUpdated.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/tasks/partials/createdUpdated.vue b/src/components/tasks/partials/createdUpdated.vue
index c9145f372..7a9246160 100644
--- a/src/components/tasks/partials/createdUpdated.vue
+++ b/src/components/tasks/partials/createdUpdated.vue
@@ -21,19 +21,21 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, defineProps} from 'vue'
+import {computed, toRefs} from 'vue'
 import TaskModel from '@/models/task'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 
-const {task} = defineProps({
+const props = defineProps({
 	task: {
 		type: TaskModel,
 		required: true,
-	}
+	},
 })
 
-const updatedSince = computed(() => formatDateSince(task.updated))
-const updatedFormatted = computed(() => formatDateLong(task.updated))
-const doneSince = computed(() => formatDateSince(task.doneAt))
-const doneFormatted = computed(() => formatDateLong(task.doneAt))
+const {task} = toRefs(props)
+
+const updatedSince = computed(() => formatDateSince(task.value.updated))
+const updatedFormatted = computed(() => formatDateLong(task.value.updated))
+const doneSince = computed(() => formatDateSince(task.value.doneAt))
+const doneFormatted = computed(() => formatDateLong(task.value.doneAt))
 </script>
-- 
2.40.1


From 448afd8df23b914ac6da20f2ecc7387ddc571025 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 8 Jan 2022 12:45:41 +0100
Subject: [PATCH 3/5] chore: use BaseButton

---
 src/views/tasks/TaskDetailView.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 50a1a1f01..c06f1961d 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -247,10 +247,10 @@
 					<comments :can-write="canWrite" :task-id="taskId"/>
 				</div>
 				<div class="column is-one-third action-buttons" v-if="canWrite || shouldShowClosePopup">
-					<a @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4">
+					<BaseButton @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4 has-text-primary" v-if="shouldShowClosePopup">
 						<icon icon="arrow-left"/>
 						{{ $t('task.detail.closePopup') }}
-					</a>
+					</BaseButton>
 					<template v-if="canWrite">
 						<x-button
 							:class="{'is-success': !task.done}"
@@ -431,6 +431,7 @@ import description from '@/components/tasks/partials/description.vue'
 import ColorPicker from '../../components/input/colorPicker'
 import heading from '@/components/tasks/partials/heading.vue'
 import Datepicker from '@/components/input/datepicker.vue'
+import BaseButton from '@/components/base/BaseButton'
 import {playPop} from '@/helpers/playPop'
 import TaskSubscription from '@/components/misc/subscription.vue'
 import {CURRENT_LIST} from '@/store/mutation-types'
@@ -444,6 +445,7 @@ export default {
 	name: 'TaskDetailView',
 	compatConfig: { ATTR_FALSE_VALUE: false },
 	components: {
+		BaseButton,
 		CreatedUpdated,
 		ChecklistSummary,
 		TaskSubscription,
-- 
2.40.1


From c5e869c7ad9b150f7ebfd0af7c11231eb2cc6956 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 8 Jan 2022 12:48:43 +0100
Subject: [PATCH 4/5] chore: re-add spaces instead of tabs

---
 src/views/tasks/TaskDetailView.vue | 364 ++++++++++++++---------------
 1 file changed, 182 insertions(+), 182 deletions(-)

diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index c06f1961d..67fb22384 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -682,240 +682,240 @@ export default {
 $flash-background-duration: 750ms;
 
 .task-view {
-	// This is a workaround to hide the llama background from the top on the task detail page
-	margin-top: -1.5rem;
-	padding: 1rem;
-	background-color: var(--site-background);
+  // This is a workaround to hide the llama background from the top on the task detail page
+  margin-top: -1.5rem;
+  padding: 1rem;
+  background-color: var(--site-background);
 
-	@media screen and (max-width: $desktop) {
-		padding-bottom: 0;
-	}
+  @media screen and (max-width: $desktop) {
+    padding-bottom: 0;
+  }
 
-	.subtitle {
-		color: var(--grey-500);
-		margin-bottom: 1rem;
+  .subtitle {
+    color: var(--grey-500);
+    margin-bottom: 1rem;
 
-		a {
-			color: var(--grey-800);
-		}
-	}
+    a {
+      color: var(--grey-800);
+    }
+  }
 
-	h3 .button {
-		vertical-align: middle;
-	}
+  h3 .button {
+    vertical-align: middle;
+  }
 
-	.icon.is-grey {
-		color: var(--grey-400);
-	}
+  .icon.is-grey {
+    color: var(--grey-400);
+  }
 
-	:deep(.heading) {
-		display: flex;
-		justify-content: space-between;
-		text-transform: none;
-		align-items: center;
+  :deep(.heading) {
+    display: flex;
+    justify-content: space-between;
+    text-transform: none;
+    align-items: center;
 
-		@media screen and (max-width: $tablet) {
-			flex-direction: column;
-			align-items: start;
-		}
+    @media screen and (max-width: $tablet) {
+      flex-direction: column;
+      align-items: start;
+    }
 
-		.title {
-			margin-bottom: 0;
-		}
+    .title {
+      margin-bottom: 0;
+    }
 
-		.title.input {
-			// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
-			min-height: calc(1.8rem * 1.125 + .6rem + 2px);
+    .title.input {
+      // 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
+      min-height: calc(1.8rem * 1.125 + .6rem + 2px);
 
-			@media screen and (max-width: $tablet) {
-				margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
-			}
-		}
+      @media screen and (max-width: $tablet) {
+        margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
+      }
+    }
 
-		.title.task-id {
-			color: var(--grey-400);
-			white-space: nowrap;
-		}
+    .title.task-id {
+      color: var(--grey-400);
+      white-space: nowrap;
+    }
 
-	}
+  }
 
-	.date-input {
-		display: flex;
-		align-items: center;
+  .date-input {
+    display: flex;
+    align-items: center;
 
-		a.remove {
-			color: var(--danger);
-			vertical-align: middle;
-			padding-left: .5rem;
-			line-height: 1;
-		}
-	}
+    a.remove {
+      color: var(--danger);
+      vertical-align: middle;
+      padding-left: .5rem;
+      line-height: 1;
+    }
+  }
 
-	:deep(.datepicker) {
-		width: 100%;
+  :deep(.datepicker) {
+    width: 100%;
 
-		a.show {
-			color: var(--text);
-			padding: .25rem .5rem;
-			transition: background-color $transition;
-			border-radius: $radius;
-			display: block;
-			margin: .1rem 0;
+    a.show {
+      color: var(--text);
+      padding: .25rem .5rem;
+      transition: background-color $transition;
+      border-radius: $radius;
+      display: block;
+      margin: .1rem 0;
 
-			&:hover {
-				background: var(--white);
-			}
-		}
+      &:hover {
+        background: var(--white);
+      }
+    }
 
-		&.disabled a.show:hover {
-			background: transparent;
-		}
-	}
+    &.disabled a.show:hover {
+      background: transparent;
+    }
+  }
 
-	.details {
-		padding-bottom: 0.75rem;
-		flex-flow: row wrap;
-		margin-bottom: 0;
+  .details {
+    padding-bottom: 0.75rem;
+    flex-flow: row wrap;
+    margin-bottom: 0;
 
-		.detail-title {
-			display: block;
-			color: var(--grey-400);
-		}
+    .detail-title {
+      display: block;
+      color: var(--grey-400);
+    }
 
-		.none {
-			font-style: italic;
-		}
+    .none {
+      font-style: italic;
+    }
 
-		// Break after the 2nd element
-		.column:nth-child(2n) {
-			page-break-after: always; // CSS 2.1 syntax
-			break-after: always; // New syntax
-		}
+    // Break after the 2nd element
+    .column:nth-child(2n) {
+      page-break-after: always; // CSS 2.1 syntax
+      break-after: always; // New syntax
+    }
 
-		&.labels-list,
-		.assignees {
-			:deep(.multiselect) {
-				.input-wrapper {
-					&:not(:focus-within):not(:hover) {
-						background: transparent !important;
-						border-color: transparent !important;
-					}
-				}
-			}
-		}
-	}
+    &.labels-list,
+    .assignees {
+      :deep(.multiselect) {
+        .input-wrapper {
+          &:not(:focus-within):not(:hover) {
+            background: transparent !important;
+            border-color: transparent !important;
+          }
+        }
+      }
+    }
+  }
 
-	:deep(.details),
-	:deep(.heading) {
-		.input:not(.has-defaults),
-		.textarea,
-		.select:not(.has-defaults) select {
-			border-color: transparent;
-			background: transparent;
-			cursor: pointer;
-			transition: all $transition-duration;
+  :deep(.details),
+  :deep(.heading) {
+    .input:not(.has-defaults),
+    .textarea,
+    .select:not(.has-defaults) select {
+      border-color: transparent;
+      background: transparent;
+      cursor: pointer;
+      transition: all $transition-duration;
 
-			&::placeholder {
-				color: var(--text-light);
-				opacity: 1;
-				font-style: italic;
-			}
+      &::placeholder {
+        color: var(--text-light);
+        opacity: 1;
+        font-style: italic;
+      }
 
-			&:not(:disabled) {
-				&:hover,
-				&:active,
-				&:focus {
-					background: var(--scheme-main);
-					border-color: var(--border);
-					cursor: text;
-				}
+      &:not(:disabled) {
+        &:hover,
+        &:active,
+        &:focus {
+          background: var(--scheme-main);
+          border-color: var(--border);
+          cursor: text;
+        }
 
-				&:hover,
-				&:active {
-					cursor: text;
-					border-color: var(--link)
-				}
-			}
-		}
+        &:hover,
+        &:active {
+          cursor: text;
+          border-color: var(--link)
+        }
+      }
+    }
 
-		.select:not(.has-defaults):after {
-			opacity: 0;
-		}
+    .select:not(.has-defaults):after {
+      opacity: 0;
+    }
 
-		.select:not(.has-defaults):hover:after {
-			opacity: 1;
-		}
-	}
+    .select:not(.has-defaults):hover:after {
+      opacity: 1;
+    }
+  }
 
-	.attachments {
-		margin-bottom: 0;
+  .attachments {
+    margin-bottom: 0;
 
-		table tr:last-child td {
-			border-bottom: none;
-		}
-	}
+    table tr:last-child td {
+      border-bottom: none;
+    }
+  }
 
-	.action-buttons {
-		.button {
-			width: 100%;
-			margin-bottom: .5rem;
-			justify-content: left;
-		}
-	}
+  .action-buttons {
+    .button {
+      width: 100%;
+      margin-bottom: .5rem;
+      justify-content: left;
+    }
+  }
 
-	.created {
-		font-size: .75rem;
-		color: var(--grey-500);
-		text-align: right;
-	}
+  .created {
+    font-size: .75rem;
+    color: var(--grey-500);
+    text-align: right;
+  }
 
-	.checklist-summary {
-		margin-left: .25rem;
-	}
+  .checklist-summary {
+    margin-left: .25rem;
+  }
 }
 
 .task-view-container {
-	padding-bottom: 1rem;
+  padding-bottom: 1rem;
 
-	@media screen and (max-width: $desktop) {
-		padding-bottom: 0;
-	}
+  @media screen and (max-width: $desktop) {
+    padding-bottom: 0;
+  }
 
-	.task-view * {
-		opacity: 0;
-		transition: opacity 50ms ease;
-	}
+  .task-view * {
+    opacity: 0;
+    transition: opacity 50ms ease;
+  }
 
-	&.is-loading {
-		opacity: 1;
+  &.is-loading {
+    opacity: 1;
 
-		.task-view * {
-			opacity: 0;
-		}
-	}
+    .task-view * {
+      opacity: 0;
+    }
+  }
 
-	&.visible:not(.is-loading) .task-view * {
-		opacity: 1;
-	}
+  &.visible:not(.is-loading) .task-view * {
+    opacity: 1;
+  }
 }
 
 .task-view-container {
-	// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
-	--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
+  // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
+  --primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
 }
 
 .flash-background-enter-from,
 .flash-background-enter-active {
-	animation: flash-background $flash-background-duration ease 1;
+  animation: flash-background $flash-background-duration ease 1;
 }
 
 @keyframes flash-background {
-	0% {
-		background: var(--primary-light);
-	}
-	100% {
-		background: transparent;
-	}
+  0% {
+    background: var(--primary-light);
+  }
+  100% {
+    background: transparent;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-- 
2.40.1


From 551ec184bf7ecfb9f5b26e1fcffc0c7beb11a64e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 6 Feb 2022 16:44:17 +0100
Subject: [PATCH 5/5] chore: add <time> html attribute

---
 .../tasks/partials/createdUpdated.vue         | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/tasks/partials/createdUpdated.vue b/src/components/tasks/partials/createdUpdated.vue
index 7a9246160..51ef1d31e 100644
--- a/src/components/tasks/partials/createdUpdated.vue
+++ b/src/components/tasks/partials/createdUpdated.vue
@@ -1,21 +1,27 @@
 <template>
 	<p class="created">
-		<i18n-t keypath="task.detail.created">
-			<span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span>
-			{{ task.createdBy.getDisplayName() }}
-		</i18n-t>
+		<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
+			<i18n-t keypath="task.detail.created">
+				<span>{{ formatDateSince(task.created) }}</span>
+				{{ task.createdBy.getDisplayName() }}
+			</i18n-t>
+		</time>
 		<template v-if="+new Date(task.created) !== +new Date(task.updated)">
 			<br/>
 			<!-- Computed properties to show the actual date every time it gets updated -->
-			<i18n-t keypath="task.detail.updated">
-				<span v-tooltip="updatedFormatted">{{ updatedSince }}</span>
-			</i18n-t>
+			<time :datetime="formatISO(task.updated)" v-tooltip="updatedFormatted">
+				<i18n-t keypath="task.detail.updated">
+					<span>{{ updatedSince }}</span>
+				</i18n-t>
+			</time>
 		</template>
 		<template v-if="task.done">
 			<br/>
-			<i18n-t keypath="task.detail.doneAt">
-				<span v-tooltip="doneFormatted">{{ doneSince }}</span>
-			</i18n-t>
+			<time :datetime="formatISO(task.doneAt)" v-tooltip="doneFormatted">
+				<i18n-t keypath="task.detail.doneAt">
+					<span>{{ doneSince }}</span>
+				</i18n-t>
+			</time>
 		</template>
 	</p>
 </template>
-- 
2.40.1