From 293402b6fdfc699661c7f287ff1759a9ce5bea17 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Sat, 12 Nov 2022 10:52:16 +0000
Subject: [PATCH] fix: move heading styles to component (#2686)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2686
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 src/components/tasks/partials/heading.vue | 30 +++++++++++++++++++++++
 src/views/tasks/TaskDetailView.vue        | 29 ----------------------
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue
index e2215ddabd..73758a9fd6 100644
--- a/src/components/tasks/partials/heading.vue
+++ b/src/components/tasks/partials/heading.vue
@@ -110,6 +110,36 @@ async function save(title: string) {
 </script>
 
 <style lang="scss" scoped>
+.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;
+}
+
+.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
+	}
+}
+
+.title.task-id {
+	color: var(--grey-400);
+	white-space: nowrap;
+}
+
 .heading__done {
 	margin-left: .5rem;
 }
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index e959fa5e9b..f337a18af5 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -818,36 +818,7 @@ $flash-background-duration: 750ms;
     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;
-    }
-
-    .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
-      }
-    }
-
-    .title.task-id {
-      color: var(--grey-400);
-      white-space: nowrap;
-    }
-
-  }
 
   .date-input {
     display: flex;