From 12037679e5138f5c20f8a492c07eb9cf10343fc4 Mon Sep 17 00:00:00 2001
From: Jakob <jakob.roehrl@web.de>
Date: Wed, 4 Sep 2019 07:42:40 +0200
Subject: [PATCH 1/3] tags are now in one line

Signed-off-by: Jakob <jakob.roehrl@web.de>
---
 src/components/cards/CardItem.vue | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 913203233..8bbc61e90 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -41,9 +41,9 @@
 
 			</transition>
 		</div>
-		<ul class="labels" @click="openCard">
-			<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li>
-		</ul>
+		<div class="labels" @click="openCard">
+			<div v-for="label in card.labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></div>
+		</div>
 		<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
 			<card-badges :id="id" />
 		</div>
@@ -183,17 +183,35 @@ export default {
 		}
 
 		.labels {
+			flex-grow: 1;
+			flex-shrink: 1;
+			min-width: 0;
+			display: flex;
+			flex-direction: row;
 			margin-left: $card-padding;
 			margin-top: -5px;
-			overflow: hidden;
 
-			li {
-				float: left;
+			div {
+				flex-basis: 5em;
+				flex-grow: 0;
+				flex-shrink: 1;
+				display: flex;
+				flex-direction: row;
+				overflow: hidden;
 				padding: 1px 3px;
 				border-radius: 3px;
 				font-size: 85%;
 				margin-right: 3px;
 				margin-bottom: 3px;
+
+				span {
+					flex-grow: 0;
+					flex-shrink: 1;
+					min-width: 0;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
 			}
 		}
 

From 1db20878a93f4619d4e9d32fc825675583c4f11d Mon Sep 17 00:00:00 2001
From: Jakob <jakob.roehrl@web.de>
Date: Wed, 4 Sep 2019 11:12:38 +0200
Subject: [PATCH 2/3] changed back to ul,li

Signed-off-by: Jakob <jakob.roehrl@web.de>
---
 src/components/cards/CardItem.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 8bbc61e90..c00db438f 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -41,9 +41,9 @@
 
 			</transition>
 		</div>
-		<div class="labels" @click="openCard">
-			<div v-for="label in card.labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></div>
-		</div>
+		<ul class="labels" @click="openCard">
+			<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li>
+		</ul>
 		<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
 			<card-badges :id="id" />
 		</div>
@@ -191,7 +191,7 @@ export default {
 			margin-left: $card-padding;
 			margin-top: -5px;
 
-			div {
+			li {
 				flex-basis: 5em;
 				flex-grow: 0;
 				flex-shrink: 1;

From 6c8ac1ed473f12ff97bd14a9dd09e388a9157161 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 4 Sep 2019 18:33:43 +0200
Subject: [PATCH 3/3] Fix tag style in card sidebar and remove flex basis on
 card labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/card/CardSidebar.vue | 19 ++++++++++++++++++-
 src/components/cards/CardItem.vue   |  6 +++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 68f4e6d34..e32dde4c1 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -36,7 +36,10 @@
 						:taggable="true" label="title"
 						track-by="id" @select="addLabelToCard" @remove="removeLabelFromCard">
 						<template #option="scope">
-							<div :style="{ color: '#' + scope.option.color}">{{ scope.option.title }}</div>
+							<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">{{ scope.option.title }}</div>
+						</template>
+						<template #tag="scope">
+							<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">{{ scope.option.title }}</div>
 						</template>
 					</multiselect>
 				</div>
@@ -93,6 +96,7 @@ import VueEasymde from 'vue-easymde'
 import { Actions } from 'nextcloud-vue/dist/Components/Actions'
 import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
 import ActivityEntry from '../ActivityEntry'
+import Color from '../../mixins/color'
 
 export default {
 	name: 'CardSidebar',
@@ -107,6 +111,9 @@ export default {
 		ActionButton,
 		Avatar
 	},
+	mixins: [
+		Color
+	],
 	props: {
 		id: {
 			type: Number,
@@ -319,6 +326,16 @@ export default {
 		}
 	}
 
+	.tag {
+		flex-grow: 0;
+		flex-shrink: 1;
+		overflow: hidden;
+		padding: 1px 3px;
+		border-radius: 3px;
+		font-size: 85%;
+		margin-right: 3px;
+	}
+
 	.avatarLabel {
 		padding: 6px
 	}
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index c00db438f..8012b1901 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -189,10 +189,10 @@ export default {
 			display: flex;
 			flex-direction: row;
 			margin-left: $card-padding;
+			margin-right: $card-padding;
 			margin-top: -5px;
 
 			li {
-				flex-basis: 5em;
 				flex-grow: 0;
 				flex-shrink: 1;
 				display: flex;
@@ -204,6 +204,10 @@ export default {
 				margin-right: 3px;
 				margin-bottom: 3px;
 
+				&:hover {
+					overflow: unset;
+				}
+
 				span {
 					flex-grow: 0;
 					flex-shrink: 1;