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>
-		<template v-if="priority === priorities.UNSET">Unset</template>
+		<span>
-		<template v-if="priority === priorities.LOW">Low</template>
+			<template v-if="priority === priorities.UNSET">Unset</template>
-		<template v-if="priority === priorities.MEDIUM">Medium</template>
+			<template v-if="priority === priorities.LOW">Low</template>
-		<template v-if="priority === priorities.HIGH">High</template>
+			<template v-if="priority === priorities.MEDIUM">Medium</template>
-		<template v-if="priority === priorities.URGENT">Urgent</template>
+			<template v-if="priority === priorities.HIGH">High</template>
-		<template v-if="priority === priorities.DO_NOW">DO NOW</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;
+          align-items: center;
 
-          .items {
+          .tag, .assignees, .icon, .priority-label {
-            display: flex;
+            margin-top: .25rem;
-            align-items: center;
+            margin-right: .25rem;
-
-            > :not(:last-child) {
-              margin-right: .5em;
-            }
           }
 
           .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) {
+          .priority-label {
-                width: 16px;
+            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

@@ -131,13 +131,13 @@
 									class="due-date"
 									v-if="task.dueDate > 0"
 									v-tooltip="formatDate(task.dueDate)">
-								<span class="icon">
+									<span class="icon">
-									<icon :icon="['far', 'calendar-alt']"/>
+										<icon :icon="['far', 'calendar-alt']"/>
+									</span>
+									<span>
+										{{ formatDateSince(task.dueDate) }}
+									</span>
 								</span>
-								<span>
-									{{ formatDateSince(task.dueDate) }}
-								</span>
-							</span>
 								<h3>{{ task.title }}</h3>
 								<progress
 									class="progress is-small"
@@ -145,28 +145,30 @@
 									: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"
-										<div class="assignees" v-if="task.assignees.length > 0">
+										:style="{'background': label.hexColor, 'color': label.textColor}"
-											<user
+										class="tag"
-												:avatar-size="24"
+										v-for="label in task.labels">
-												:key="task.id + 'assignee' + u.id"
+										<span>{{ label.title }}</span>
-												:show-username="false"
+									</span>
-												:user="u"
+									<priority-label :priority="task.priority"/>
-												v-for="u in task.assignees"
+									<div class="assignees" v-if="task.assignees.length > 0">
-											/>
+										<user
-										</div>
+											:avatar-size="24"
-									</div>
+											:key="task.id + 'assignee' + u.id"
-									<div class="icons-container">
+											:show-username="false"
-										<span class="icon" v-if="task.attachments.length > 0">
+											:user="u"
-											<icon icon="paperclip"/>	
+											v-for="u in task.assignees"
-										</span>
+										/>
-										<span v-if="task.description" class="icon">
-											<icon icon="align-left"/>
-										</span>
 									</div>
+									<span class="icon" v-if="task.attachments.length > 0">
+										<icon icon="paperclip"/>	
+									</span>
+									<span v-if="task.description" class="icon">
+										<icon icon="align-left"/>
+									</span>
 								</div>
 							</div>
 						</component>