From d258af625d5cf9569b91d26bd1603c3d66d8f4d5 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 18 Oct 2021 14:33:38 +0200
Subject: [PATCH] fix: move .progress styles together as close as possible

---
 src/styles/components/tasks.scss | 31 ++++++++++++++++---------------
 src/styles/theme/theme.scss      | 16 +++++++++++++++-
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index d629a3cc1..7346ad006 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -3,6 +3,21 @@
 	padding: 0;
 	text-align: left;
 
+	@media screen and (min-width: $tablet) {
+		&.short {
+			max-width: 53vw;
+		}
+	}
+
+	@media screen and (max-width: $tablet) {
+		max-width: 100%;
+	}
+	
+	.progress {
+		// overwrite bulma
+		margin-bottom: 0;
+	}
+
 	&.noborder {
 		margin: 1rem -0.5rem;
 	}
@@ -16,6 +31,7 @@
 	
 		&:last-child {
 			margin-bottom: .5rem;
+			border-bottom: none;
 		}
 	}
 
@@ -24,21 +40,6 @@
 		font-size: .9rem;
 	}
 
-	.progress {
-		width: 50px;
-		margin: 0 0.5rem 0 0;
-		flex: 3 1 auto;
-
-		@media screen and (max-width: $tablet) {
-			margin: 0.5rem 0 0 0;
-			order: 1;
-			width: 100%;
-		}
-	}
-
-	.task:last-child {
-		border-bottom: none;
-	}
 }
 
 .is-menu-enabled .tasks .task {
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 42a481570..6f2deea4b 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -42,12 +42,26 @@ h6 {
   }
 }
 
+// FIXME: create <ProgressBar> component. used in
+// - attachments.vue
+// - kanban-card.vue
+// - singleTaskInList.vue
 .progress {
   border-radius: $radius-large;
+	width: 50px;
+	margin: 0 0.5rem 0 0;
+	flex: 3 1 auto;
 
-	&::-moz-progress-bar, &::-webkit-progress-value {
+	&::-moz-progress-bar,
+	&::-webkit-progress-value {
 	  background: $grey-500;
 	}
+
+	@media screen and (max-width: $tablet) {
+		margin: 0.5rem 0 0 0;
+		order: 1;
+		width: 100%;
+	}
 }
 
 .has-no-border {