Show task progress on task (#354)

Shows the task completion percent as progress bar in task lists and on kanban cards.

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/354
Reviewed-by: konrad <konrad@kola-entertainments.de>
Co-authored-by: azymondrian <azymondrian@protonmail.com>
Co-committed-by: azymondrian <azymondrian@protonmail.com>

src/components/tasks/partials/singleTaskInList.vue

@@ -56,6 +56,12 @@
 				</span>
 			</span>
 		</span>
+		<progress
+			class="progress is-small"
+			v-if="task.percentDone > 0"
+			:value="task.percentDone * 100" max="100">
+			{{ task.percentDone * 100 }}%
+		</progress>
 		<router-link
 			:to="{ name: 'list.list', params: { listId: task.listId } }"
 			class="task-list"

src/styles/components/kanban.scss

@@ -73,6 +73,12 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
           word-break: break-word;
         }
         
+        .progress {
+          margin: 8px 0 0 0;
+          width: 100%;
+          height: 0.5rem;
+        }
+
         .due-date {
           float: right;
           display: flex;

src/styles/components/tasks.scss

@@ -19,6 +19,7 @@
 
   .task {
     display: flex;
+    flex-wrap: wrap;
     padding: 0.5rem 1rem;
     border-bottom: 1px solid darken(#fff, 10%);
     transition: background-color $transition;
@@ -35,7 +36,7 @@
       text-overflow: ellipsis;
       overflow: hidden;
       display: inline-block;
-      width: 100%;
+      flex: 1 0 50%;
 
       .overdue {
         color: $red;
@@ -55,7 +56,7 @@
 
     .color-bubble {
       height: 10px;
-      flex: 1 0 10px;
+      flex: 0 0 10px;
     }
 
     .tag {
@@ -151,6 +152,18 @@
     }
   }
 
+  .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;
   }

src/styles/theme/navigation.scss

@@ -164,7 +164,7 @@
 
         .color-bubble {
           height: 12px;
-          flex: 1 0 12px;
+          flex: 0 0 12px;
         }
 
         .favorite {

src/views/list/views/Kanban.vue

@@ -139,6 +139,12 @@
 								</span>
 							</span>
 								<h3>{{ task.title }}</h3>
+								<progress
+									class="progress is-small"
+									v-if="task.percentDone > 0"
+									:value="task.percentDone * 100" max="100">
+									{{ task.percentDone * 100 }}%
+								</progress>
 								<labels :labels="task.labels"/>
 								<div class="footer">
 									<div class="items">