Fix card design

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/board/DeletedTabSidebar.vue

@@ -95,24 +95,16 @@ export default {
 
 <style scoped lang="scss">
 	ul {
-		display: flex;
-		flex-direction: row;
-
-		* {
-			flex-basis: 44px;
-		}
-
-		.title {
-			flex-grow: 2;
-		}
-		.live-relative-timestamp {
-			flex-grow: 1;
-		}
-	}
+		display: block;
 
 		li {
 			display: flex;
-	flex-direction: row;
+			height: 44px;
+		}
+
+		span {
+			display: block;
+		}
 
 		* {
 			flex-basis: 44px;
@@ -120,9 +112,24 @@ export default {
 
 		.title {
 			flex-grow: 2;
+			padding: 13px 0px;
 		}
+
 		.live-relative-timestamp {
 			flex-grow: 1;
 		}
+
+		button {
+			border: none;
+			background-color: transparent;
+			opacity: 0.5;
+		}
+		li {
+			&:hover, &:active, &.focus {
+				button {
+					opacity: 1;
+				}
+			}
+		}
 	}
 </style>

src/components/card/CardSidebar.vue

@@ -30,7 +30,7 @@
 		<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"
@@ -43,7 +43,7 @@
 			</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"
@@ -57,7 +57,7 @@
 			</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()" />
@@ -284,6 +284,4 @@ export default {
 		}
 	}
 
-
 </style>
-

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;

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;
 			}
 		}