Fix task icons on kanban if there were multiple different ones

src/components/tasks/partials/priorityLabel.vue

@@ -1,16 +1,19 @@
 <template>
 	<span
 		:class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}"
+		class="priority-label"
 		v-if="showAll || priority >= priorities.HIGH">
 		<span class="icon" v-if="priority >= priorities.HIGH">
 			<icon icon="exclamation"/>
 		</span>
+		<span>
 			<template v-if="priority === priorities.UNSET">Unset</template>
 			<template v-if="priority === priorities.LOW">Low</template>
 			<template v-if="priority === priorities.MEDIUM">Medium</template>
 			<template v-if="priority === priorities.HIGH">High</template>
 			<template v-if="priority === priorities.URGENT">Urgent</template>
 			<template v-if="priority === priorities.DO_NOW">DO NOW</template>
+		</span>
 		<span class="icon" v-if="priority === priorities.DO_NOW">
 			<icon icon="exclamation"/>
 		</span>
@@ -40,9 +43,14 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '../../../styles/theme/variables';
 
+.priority-label {
+	display: flex;
+	align-items: center;
+}
+
 span.high-priority {
 	color: $red;
 	width: auto !important; // To override the width set in tasks

src/styles/components/kanban.scss

@@ -85,8 +85,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
           align-items: center;
 
           .icon {
-            margin-right: 2px;
+            margin-right: .25rem;
-            margin-left: 5px;
           }
 
           &.overdue {
@@ -102,16 +101,12 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
           background: transparent;
           padding: 0;
           display: flex;
-          justify-content: space-between;
+          flex-wrap: wrap;
-          margin-top: 8px;
-
-          .items {
-            display: flex;
           align-items: center;
 
-            > :not(:last-child) {
+          .tag, .assignees, .icon, .priority-label {
-              margin-right: .5em;
+            margin-top: .25rem;
-            }
+            margin-right: .25rem;
           }
 
           .assignees {
@@ -119,36 +114,26 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
 
             .user {
               display: inline;
-              margin: 0 -12px 0 0;
+              margin: 0;
 
               img {
-                margin-right: 0;
-              }
-            }
-          }
-
-          .icons-container {
-            display: flex;
-            align-items: flex-end;
-            .icon {
-              padding: 0px .4rem;
-              &:not(:first-child) {
-                margin-left: 4px;
-              }
-              svg {
                 margin: 0;
               }
             }
           }
 
-          .icon {
+          .tag {
-            svg {
+            margin-left: 0;
-              margin: 4px 0 4px 4px;
-              fill: $dark;
-
-              &:not(.svg-inline--fa) {
-                width: 16px;
           }
+
+          .priority-label {
+            font-size: .75rem;
+            height: 2em;
+
+            .icon {
+              height: 1rem;
+              padding: 0 .25rem;
+              margin-top: 0;
             }
           }
         }
@@ -158,12 +143,11 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
         .priority-label {
           background: darken($task-background, 5%);
           border-radius: $radius;
-          padding-right: 5px;
+          padding: 0 .5rem;
         }
 
-        .priority-label {
+        .due-date {
-          margin: .5em 0;
+          padding: 0 .25rem;
-          display: inline-block;
         }
 
         .task-id {

src/views/list/views/Kanban.vue

@@ -145,10 +145,15 @@
 									:value="task.percentDone * 100" max="100">
 									{{ task.percentDone * 100 }}%
 								</progress>
-								<labels :labels="task.labels"/>
 								<div class="footer">
-									<div class="items">
+									<span
-										<priority-label :priority="task.priority" class="priority-label"/>
+										:key="label.id"
+										:style="{'background': label.hexColor, 'color': label.textColor}"
+										class="tag"
+										v-for="label in task.labels">
+										<span>{{ label.title }}</span>
+									</span>
+									<priority-label :priority="task.priority"/>
 									<div class="assignees" v-if="task.assignees.length > 0">
 										<user
 											:avatar-size="24"
@@ -158,8 +163,6 @@
 											v-for="u in task.assignees"
 										/>
 									</div>
-									</div>
-									<div class="icons-container">
 									<span class="icon" v-if="task.attachments.length > 0">
 										<icon icon="paperclip"/>	
 									</span>
@@ -168,7 +171,6 @@
 									</span>
 								</div>
 							</div>
-							</div>
 						</component>
 					</component>
 				</div>