From fba402fcd056ee397ce54f97ed4fec98845c7933 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sat, 12 Nov 2022 16:45:46 +0100
Subject: [PATCH] feat: reduce TaskDetailView selector specificity

---
 src/views/tasks/TaskDetailView.vue | 362 ++++++++++++++---------------
 1 file changed, 174 insertions(+), 188 deletions(-)

diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 6b7a71918d..61f99266e7 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -2,8 +2,7 @@
 	<div
 		class="loader-container task-view-container"
 		:class="{
-			'is-loading': taskService.loading,
-			'visible': visible,
+			'is-loading': taskService.loading || !visible,
 			'is-modal': isModal,
 		}"
 	>
@@ -801,213 +800,200 @@ async function setPercentDone(percentDone: number) {
 <style lang="scss" scoped>
 $flash-background-duration: 750ms;
 
-.task-view {
-  padding: 1rem;
-  background-color: var(--site-background);
-
-  @media screen and (max-width: $desktop) {
-    padding-bottom: 0;
+.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));
+	padding-bottom: 0;
+	
+  @media screen and (min-width: $desktop) {
+		padding-bottom: 1rem;
   }
 }
 
-  .subtitle {
-    color: var(--grey-500);
-    margin-bottom: 1rem;
-
-    a {
-      color: var(--grey-800);
-    }
+.task-view {
+	padding: 1rem;
+	padding-bottom: 0;
+  background-color: var(--site-background);
+	
+  @media screen and (min-width: $desktop) {
+		padding: 1rem;
   }
+}
 
-  h3 .button {
-    vertical-align: middle;
-  }
+.task-view * {
+	transition: opacity 50ms ease;
+}
 
-  .icon.is-grey {
-    color: var(--grey-400);
-  }
+.is-loading .task-view * {
+	opacity: 0;
+}
 
 
+.subtitle {
+	color: var(--grey-500);
+	margin-bottom: 1rem;
 
-  .date-input {
-    display: flex;
-    align-items: center;
-  }
+	a {
+		color: var(--grey-800);
+	}
+}
 
-  .remove {
-	color: var(--danger);
+h3 .button {
 	vertical-align: middle;
-	padding-left: .5rem;
-	line-height: 1;
-  }
+}
 
-  :deep(.datepicker) {
-    width: 100%;
+.icon.is-grey {
+	color: var(--grey-400);
+}
+.date-input {
+	display: flex;
+	align-items: center;
+}
 
-    .show {
-      color: var(--text);
-      padding: .25rem .5rem;
-      transition: background-color $transition;
-      border-radius: $radius;
-      display: block;
-      margin: .1rem 0;
-      width: 100%;
-      text-align: left;
+.remove {
+color: var(--danger);
+vertical-align: middle;
+padding-left: .5rem;
+line-height: 1;
+}
 
-      &:hover {
-        background: var(--white);
-      }
-    }
+:deep(.datepicker) {
+	width: 100%;
 
-    &.disabled .show:hover {
-      background: transparent;
-    }
-  }
+	.show {
+		color: var(--text);
+		padding: .25rem .5rem;
+		transition: background-color $transition;
+		border-radius: $radius;
+		display: block;
+		margin: .1rem 0;
+		width: 100%;
+		text-align: left;
 
-  .details {
-    padding-bottom: 0.75rem;
-    flex-flow: row wrap;
-    margin-bottom: 0;
-
-    .detail-title {
-      display: block;
-      color: var(--grey-400);
-    }
-
-    .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
-    }
-
-    &.labels-list,
-    .assignees {
-      :deep(.multiselect) {
-        .input-wrapper {
-          &:not(:focus-within):not(:hover) {
-            background: transparent;
-            border-color: transparent;
-          }
-        }
-      }
-    }
-  }
-
-  :deep(.details),
-  :deep(.heading) {
-    .input:not(.has-defaults),
-    .textarea,
-    .select:not(.has-defaults) select {
-      cursor: pointer;
-      transition: all $transition-duration;
-
-      &::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;
-        }
-
-        &:hover,
-        &:active {
-          cursor: text;
-          border-color: var(--link)
-        }
-      }
-    }
-
-    .select:not(.has-defaults):after {
-      opacity: 0;
-    }
-
-    .select:not(.has-defaults):hover:after {
-      opacity: 1;
-    }
-  }
-
-  .attachments {
-    margin-bottom: 0;
-
-    table tr:last-child td {
-      border-bottom: none;
-    }
-  }
-
-  .action-buttons {
-    @media screen and (min-width: $tablet) {
-      position: sticky;
-      top: $navbar-height + 1.5rem;
-      align-self: flex-start;
-    }
-		
-    .button {
-      width: 100%;
-      margin-bottom: .5rem;
-      justify-content: left; 
-
-      &.has-light-text {
-		color: var(--white);
-      }
-    }
-  }
-
-	.is-modal .action-buttons {
-		// we need same top margin for the modal close button 
-		@media screen and (min-width: $tablet) {
-			top: 6.5rem;
-		}
-		// this is the moment when the fixed close button is outside the modal
-		// => we can fill up the space again
-		@media screen and (min-width: calc(#{$desktop} + 84px)) {
-			top: 0;
+		&:hover {
+			background: var(--white);
 		}
 	}
 
-  .checklist-summary {
-    padding-left: .25rem;
-  }
-
-
-.task-view-container {
-  padding-bottom: 1rem;
-
-  @media screen and (max-width: $desktop) {
-    padding-bottom: 0;
-  }
-
-  .task-view * {
-    opacity: 0;
-    transition: opacity 50ms ease;
-  }
-
-  &.is-loading {
-    opacity: 1;
-
-    .task-view * {
-      opacity: 0;
-    }
-  }
-
-  &.visible:not(.is-loading) .task-view * {
-    opacity: 1;
-  }
+	&.disabled .show:hover {
+		background: transparent;
+	}
 }
 
-.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));
+.details {
+	padding-bottom: 0.75rem;
+	flex-flow: row wrap;
+	margin-bottom: 0;
+
+	.detail-title {
+		display: block;
+		color: var(--grey-400);
+	}
+
+	.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
+	}
+
+}
+
+.details.labels-list,
+.assignees {
+	:deep(.multiselect) {
+		.input-wrapper {
+			&:not(:focus-within):not(:hover) {
+				background: transparent;
+				border-color: transparent;
+			}
+		}
+	}
+}
+
+:deep(.details),
+:deep(.heading) {
+	.input:not(.has-defaults),
+	.textarea,
+	.select:not(.has-defaults) select {
+		cursor: pointer;
+		transition: all $transition-duration;
+
+		&::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;
+			}
+
+			&:hover,
+			&:active {
+				cursor: text;
+				border-color: var(--link)
+			}
+		}
+	}
+
+	.select:not(.has-defaults):after {
+		opacity: 0;
+	}
+
+	.select:not(.has-defaults):hover:after {
+		opacity: 1;
+	}
+}
+
+.attachments {
+	margin-bottom: 0;
+
+	table tr:last-child td {
+		border-bottom: none;
+	}
+}
+
+.action-buttons {
+	@media screen and (min-width: $tablet) {
+		position: sticky;
+		top: $navbar-height + 1.5rem;
+		align-self: flex-start;
+	}
+	
+	.button {
+		width: 100%;
+		margin-bottom: .5rem;
+		justify-content: left; 
+
+		&.has-light-text {
+			color: var(--white);
+		}
+	}
+}
+
+.is-modal .action-buttons {
+	// we need same top margin for the modal close button 
+	@media screen and (min-width: $tablet) {
+		top: 6.5rem;
+	}
+	// this is the moment when the fixed close button is outside the modal
+	// => we can fill up the space again
+	@media screen and (min-width: calc(#{$desktop} + 84px)) {
+		top: 0;
+	}
+}
+
+.checklist-summary {
+	padding-left: .25rem;
 }
 
 .flash-background-enter-from,