From 77a3563b892cdcd5e9aa748286712ecd0cad2491 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 23 Aug 2019 09:51:24 +0200
Subject: [PATCH] Fix card design
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/board/DeletedTabSidebar.vue | 41 +++++++++++++---------
 src/components/card/CardSidebar.vue        | 20 +++++------
 src/components/cards/CardBadges.vue        | 18 +++++++---
 src/components/cards/CardItem.vue          | 11 +++---
 4 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/src/components/board/DeletedTabSidebar.vue b/src/components/board/DeletedTabSidebar.vue
index bf19341ed..80d9ec689 100644
--- a/src/components/board/DeletedTabSidebar.vue
+++ b/src/components/board/DeletedTabSidebar.vue
@@ -95,8 +95,16 @@ export default {
 
 <style scoped lang="scss">
 	ul {
-		display: flex;
-		flex-direction: row;
+		display: block;
+
+		li {
+			display: flex;
+			height: 44px;
+		}
+
+		span {
+			display: block;
+		}
 
 		* {
 			flex-basis: 44px;
@@ -104,25 +112,24 @@ export default {
 
 		.title {
 			flex-grow: 2;
+			padding: 13px 0px;
 		}
+
 		.live-relative-timestamp {
 			flex-grow: 1;
 		}
-	}
 
-	li {
-	display: flex;
-	flex-direction: row;
-
-	* {
-		flex-basis: 44px;
+		button {
+			border: none;
+			background-color: transparent;
+			opacity: 0.5;
+		}
+		li {
+			&:hover, &:active, &.focus {
+				button {
+					opacity: 1;
+				}
+			}
+		}
 	}
-
-	.title {
-		flex-grow: 2;
-	}
-	.live-relative-timestamp {
-		flex-grow: 1;
-	}
-}
 </style>
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 79981a210..0af573168 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -30,11 +30,11 @@
 		<AppSidebarTab :order="0" name="Details" icon="icon-home">
 
 			<div class="section-wrapper">
-				<div class="section-label icon-tag" v-tooltip="t('deck', 'Tags')"><span class="hidden-visually">{{ t('deck', 'Tags') }}</span></div>
+				<div v-tooltip="t('deck', 'Tags')" class="section-label icon-tag"><span class="hidden-visually">{{ t('deck', 'Tags') }}</span></div>
 				<div class="section-details">
 					<multiselect v-model="allLabels" :multiple="true" :options="currentBoard.labels"
-								 :taggable="true" label="title"
-								 track-by="id" @select="addLabelToCard" @remove="removeLabelFromCard">
+						:taggable="true" label="title"
+						track-by="id" @select="addLabelToCard" @remove="removeLabelFromCard">
 						<template #option="scope">
 							<span>{{ scope.option.title }}</span>
 						</template>
@@ -43,12 +43,12 @@
 			</div>
 
 			<div class="section-wrapper">
-				<div class="section-label icon-group" v-tooltip="t('deck', 'Assign to users')"><span class="hidden-visually">{{ t('deck', 'Assign to users') }}</span></div>
+				<div v-tooltip="t('deck', 'Assign to users')" class="section-label icon-group"><span class="hidden-visually">{{ t('deck', 'Assign to users') }}</span></div>
 				<div class="section-details">
 					<multiselect v-model="assignedUsers" :multiple="true" :options="assignableUsers"
-								 label="displayname"
-								 track-by="primaryKey"
-								 @select="assignUserToCard" @remove="removeUserFromCard">
+						label="displayname"
+						track-by="primaryKey"
+						@select="assignUserToCard" @remove="removeUserFromCard">
 						<template #option="scope">
 							{{ scope.option.displayname }}
 						</template>
@@ -57,10 +57,10 @@
 			</div>
 
 			<div class="section-wrapper">
-				<div class="section-label icon-calendar-dark" v-tooltip="t('deck', 'Due date')"><span class="hidden-visually">{{ t('deck', 'Due date') }}</span></div>
+				<div v-tooltip="t('deck', 'Due date')" class="section-label icon-calendar-dark"><span class="hidden-visually">{{ t('deck', 'Due date') }}</span></div>
 				<div class="section-details">
 					<DatetimePicker v-model="copiedCard.duedate" type="datetime" lang="en"
-									format="YYYY-MM-DD HH:mm" confirm @change="setDue()" />
+						format="YYYY-MM-DD HH:mm" confirm @change="setDue()" />
 					<Actions>
 						<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">{{ t('deck', 'Remove due date') }}</ActionButton>
 					</Actions>
@@ -284,6 +284,4 @@ export default {
 		}
 	}
 
-
 </style>
-
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index cbc47675b..f65568378 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -24,17 +24,18 @@ cardbadges
 
 <template>
 	<div class="badges">
-		<div v-if="card.attachments" class="card-files icon icon-files-dark" />
-
 		<div v-if="card.description" class="card-comments icon icon-filetype-text" />
 
 		<div v-if="card.duedate" :class="dueIcon">
 			<span>{{ dueTime }}</span>
 		</div>
+
 		<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
 			<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
 		</div>
 
+		<div v-if="card.attachments" class="card-files icon icon-files-dark" />
+
 		<div v-if="card.assignedUsers" class="card-assigned-users">
 			<avatar v-for="user in card.assignedUsers" :key="user.id" :user="user.participant.primaryKey" />
 		</div>
@@ -99,7 +100,7 @@ export default {
 				this.dueIcon = 'icon-calendar-dark due icon now'
 			}
 			if (timeInHours < 0) {
-				this.dueIcon = 'icon-calendar-dark due icon overdue'
+				this.dueIcon = 'icon-calendar due icon overdue'
 			}
 		}
 	}
@@ -110,6 +111,10 @@ export default {
 	.badges {
 		display: flex;
 		flex-grow: 1;
+
+		& > div {
+			margin-right: 10px;
+		}
 		.icon {
 			opacity: 0.5;
 			padding: 12px 3px;
@@ -117,6 +122,9 @@ export default {
 			span {
 				margin-left: 18px;
 			}
+			&.icon-filetype-text {
+				opacity: 1;
+			}
 		}
 		.card-assigned-users {
 			flex-grow: 1;
@@ -131,8 +139,8 @@ export default {
 	.badges .icon.due {
 		background-position: 4px center;
 		border-radius: 3px;
-		margin: 10px 0;
-		margin-right: 3px;
+		margin-top: 10px;
+		margin-bottom: 10px;
 		padding: 4px;
 		font-size: 90%;
 		display: flex;
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index f9dcad94f..653d8d967 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -179,16 +179,17 @@ export default {
 		}
 
 		.labels {
-			display: flex;
 			margin-left: $card-padding;
 			margin-top: -5px;
-			margin-bottom: -5px;
+			overflow: hidden;
 
 			li {
-				padding: 1px 4px;
+				float: left;
+				padding: 1px 3px;
 				border-radius: 3px;
-				font-size: 90%;
-				margin-right: 2px;
+				font-size: 85%;
+				margin-right: 3px;
+				margin-bottom: 3px;
 			}
 		}