From aebb047d18ee402341d3bfe63ffba827aa31e81f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 7 Feb 2024 11:24:20 +0100
Subject: [PATCH] fix(progress): move customizations into progress bar
 component

---
 src/components/misc/ProgressBar.vue             | 17 +++++++++++++----
 src/components/tasks/partials/kanban-card.vue   | 12 +++++++-----
 .../tasks/partials/singleTaskInlineReadonly.vue |  4 ----
 src/styles/components/tasks.scss                |  5 -----
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/misc/ProgressBar.vue b/src/components/misc/ProgressBar.vue
index d379540f2..8b6b9fcf0 100644
--- a/src/components/misc/ProgressBar.vue
+++ b/src/components/misc/ProgressBar.vue
@@ -35,7 +35,7 @@ defineProps({
 .progress-bar {
 	--progress-height: var(--size-normal, #{$size-normal});
 	--progress-bar-background-color: var(--border-light, #{$border-light});
-	--progress-value-background-color: var(--text, #{$text});
+	--progress-value-background-color: var(--grey-500, #{$text});
 	--progress-border-radius: var(--radius-rounded, #{$radius-rounded});
 	--progress-indeterminate-duration: 1.5s;
 
@@ -46,11 +46,10 @@ defineProps({
 	appearance: none;
 	border: none;
 	border-radius: var(--progress-border-radius);
-	display: block;
 	height: var(--progress-height);
 	overflow: hidden;
 	padding: 0;
-	width: 100%;
+	margin-bottom: 0;
 
 	&::-webkit-progress-bar {
 		background-color: var(--progress-bar-background-color);
@@ -153,7 +152,17 @@ defineProps({
 
 	&::-moz-progress-bar,
 	&::-webkit-progress-value {
-		background: var(--grey-500);
+		background: var(--progress-value-background-color);
+	}
+
+	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%;
 	}
 }
 
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index fab96ca60..d1fff239c 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -43,6 +43,7 @@
 			<h3>{{ task.title }}</h3>
 
 			<ProgressBar
+				class="task-progress"
 				v-if="task.percentDone > 0"
 				:value="task.percentDone * 100"
 				is-small
@@ -189,11 +190,6 @@ $task-background: var(--white);
 		word-break: break-word;
 	}
 
-	.progress {
-		margin: 8px 0 0 0;
-		width: 100%;
-		height: 0.5rem;
-	}
 
 	.due-date {
 		float: right;
@@ -333,4 +329,10 @@ $task-background: var(--white);
 .kanban-card__done {
 	margin-right: .25rem;
 }
+
+.task-progress {
+	margin: 8px 0 0 0;
+	width: 100%;
+	height: 0.5rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/singleTaskInlineReadonly.vue b/src/components/tasks/partials/singleTaskInlineReadonly.vue
index 86325076c..1a201f496 100644
--- a/src/components/tasks/partials/singleTaskInlineReadonly.vue
+++ b/src/components/tasks/partials/singleTaskInlineReadonly.vue
@@ -182,9 +182,5 @@ const project = computed(() => projectStore.projects[task.projectId])
 		color: var(--grey-500);
 		width: auto;
 	}
-
-	.progress {
-		margin-bottom: 0;
-	}
 }
 </style>
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index c4c314653..25be50e23 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -15,11 +15,6 @@
 		}
 	}
 
-	.progress {
-		// overwrite bulma
-		margin-bottom: 0;
-	}
-
 	&.noborder {
 		margin: 1rem -0.5rem;
 	}