fix: Align card details better to take less space

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

src/components/board/Board.vue

@@ -249,7 +249,6 @@ export default {
 					padding: $stack-spacing;
 					overflow-x: hidden;
 					overflow-y: auto;
-					scrollbar-gutter: stable;
 					padding-top: 15px;
 					margin-top: -10px;
 					scrollbar-gutter: stable;

src/components/board/Stack.vue

@@ -346,7 +346,7 @@ export default {
 			content: ' ';
 			display: block;
 			position: absolute;
-			width: 100%;
+			width: calc(100% - 16px);
 			height: 20px;
 			top: 30px;
 			left: 0px;

src/components/cards/AvatarList.vue

@@ -24,7 +24,7 @@
 	<div class="avatars">
 		<div class="avatar-list" @click.stop="togglePopover">
 			<div v-if="popover.length > 0">
-				<div class="avatardiv icon-more" />
+				<AccountMultiple class="avatardiv more-avatars" :size="24" />
 			</div>
 			<div v-for="user in firstUsers" :key="user.id">
 				<NcAvatar v-if="user.type === 0"
@@ -72,12 +72,14 @@
 <script>
 import { NcAvatar, NcPopoverMenu, Tooltip } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
+import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 
 export default {
 	name: 'AvatarList',
 	components: {
 		NcAvatar,
 		NcPopoverMenu,
+		AccountMultiple,
 	},
 	directives: {
 		tooltip: Tooltip,
@@ -151,7 +153,6 @@ export default {
 
 <style scoped lang="scss">
 	.avatars {
-		margin-top: 5px;
 		position: relative;
 		flex-grow: 1;
 		:deep(.popovermenu) {
@@ -173,25 +174,29 @@ export default {
 		display: inline-flex;
 		padding-right: $avatar-offset;
 		flex-direction: row-reverse;
+
+		& > div {
+			height: 32px;
+		}
+
 		.avatardiv,
 		:deep(.avatardiv) {
-			width: 36px;
+			width: 32px;
-			height: 36px;
+			height: 32px;
 			box-sizing: content-box !important;
 			margin-right: -$avatar-offset;
 			transition: margin-right 0.2s ease-in-out;
+			border: 2px solid var(--color-main-background);
+		}
 
-			&.icon-more {
+		.more-avatars {
-				width: 32px;
+			width: 32px;
-				height: 32px;
+			height: 32px;
-				opacity: .5;
+			background-color: var(--color-background-dark) !important;
-				background-color: var(--color-background-dark) !important;
+			cursor: pointer;
-				cursor: pointer;
+			color: var(--color-text-maxcontrast);
-			}
-		}
-		&:hover div:nth-child(n+2) :deep(.avatardiv) {
-			margin-right: 1px;
 		}
+
 	}
 
 	.popovermenu {

src/components/cards/CardBadges.vue

@@ -22,46 +22,66 @@
 
 <template>
 	<div v-if="card" class="badges">
-		<CardId v-if="idBadge" class="icon-badge" :card="card" />
+		<div class="badge-left">
-		<div v-if="card.commentsCount > 0"
+			<DueDate v-if="card.duedate || card.done" :card="card" />
-			v-tooltip="commentsHint"
+
-			class="icon-badge"
+			<div class="inline-badges">
-			@click.stop="openComments">
+				<CardId v-if="idBadge" class="icon-badge" :card="card" />
-			<CommentUnreadIcon v-if="card.commentsUnread > 0" :size="16" />
+
-			<CommentIcon v-else :size="16" />
+				<div v-if="card.commentsCount > 0"
-			<span>{{ card.commentsCount }}</span>
+					v-tooltip="commentsHint"
+					class="icon-badge"
+					@click.stop="openComments">
+					<CommentUnreadIcon v-if="card.commentsUnread > 0" :size="16" />
+					<CommentIcon v-else :size="16" />
+					<span>{{ card.commentsCount }}</span>
+				</div>
+
+				<div v-if="card.description && checkListCount > 0" class="icon-badge">
+					<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
+					<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
+				</div>
+
+				<div v-else-if="card.description && card.description.trim() && checkListCount == 0" class="icon-badge">
+					<TextIcon :size="16" decorative />
+				</div>
+
+				<div v-if="card.attachmentCount > 0" class="icon-badge">
+					<AttachmentIcon :size="16" />
+					<span>{{ card.attachmentCount }}</span>
+				</div>
+			</div>
 		</div>
 
-		<div v-if="card.description && checkListCount > 0" class="icon-badge">
+		<div class="badge-right">
-			<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
+			<NcAvatarList :users="card.assignedUsers" :size="32" />
-			<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
+
+			<slot />
 		</div>
-
-		<TextIcon v-else-if="card.description && card.description.trim() && checkListCount == 0" :size="16" decorative />
-
-		<div v-if="card.attachmentCount > 0" class="icon-badge">
-			<AttachmentIcon :size="16" />
-			<span>{{ card.attachmentCount }}</span>
-		</div>
-
-		<NcAvatarList :users="card.assignedUsers" />
-
-		<CardMenu class="card-menu" :card="card" />
 	</div>
 </template>
 <script>
 import NcAvatarList from './AvatarList.vue'
 import CardId from './badges/CardId.vue'
-import CardMenu from './CardMenu.vue'
 import TextIcon from 'vue-material-design-icons/Text.vue'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
 import CheckmarkIcon from 'vue-material-design-icons/CheckboxMarked.vue'
 import CommentIcon from 'vue-material-design-icons/Comment.vue'
 import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'
+import DueDate from './badges/DueDate.vue'
 
 export default {
 	name: 'CardBadges',
-	components: { NcAvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon, CardId },
+	components: {
+		DueDate,
+		NcAvatarList,
+		TextIcon,
+		AttachmentIcon,
+		CheckmarkIcon,
+		CommentIcon,
+		CommentUnreadIcon,
+		CardId,
+	},
 	props: {
 		card: {
 			type: Object,
@@ -102,26 +122,33 @@ export default {
 		display: flex;
 		width: 100%;
 		flex-grow: 1;
+		flex-direction: row;
+		gap: 3px;
 
 		.icon-badge {
-			opacity: .7;
+			color: var(--color-text-maxcontrast);
 			display: flex;
 			margin-right: 2px;
 
 			span,
 			&:deep(span) {
-				padding: 10px 2px;
+				padding: 2px;
 			}
 		}
 	}
 
+	.inline-badges {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 3px;
+	}
+
 	.badges .icon.due {
 		background-position: 4px center;
-		border-radius: 3px;
+		border-radius: var(--border-radius);
-		margin-top: 10px;
-		margin-bottom: 10px;
 		padding: 4px;
-		font-size: 90%;
+		font-size: 13px;
 		display: flex;
 		align-items: center;
 		opacity: .5;
@@ -153,6 +180,31 @@ export default {
 		}
 	}
 
+	.badge-left, .badge-right {
+		display: flex;
+	}
+
+	.badge-left {
+		align-self: end;
+		margin-bottom: 8px;
+		flex-basis: auto;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-wrap: wrap;
+		align-content: flex-end;
+		gap: 3px;
+	}
+
+	.badge-right {
+		align-items: center;
+		align-self: flex-end;
+		display: flex;
+		justify-items: center;
+		max-width: 165px;
+		flex-grow: 0;
+		flex-shrink: 0;
+	}
+
 	.fade-enter-active, .fade-leave-active {
 		transition: opacity .125s;
 	}
@@ -166,9 +218,5 @@ export default {
 			align-items: flex-start;
 			max-height: none !important;
 		}
-
-		.card-menu {
-			display: none;
-		}
 	}
 </style>

src/components/cards/CardCover.vue

@@ -85,6 +85,10 @@ export default {
 .card-cover {
 	height: 100px;
 	display: flex;
+	margin-top: -8px;
+	margin-left: -8px;
+	margin-right: -8px;
+
 	.image-wrapper {
 		flex: 1;
 		position: relative;

src/components/cards/CardItem.vue

@@ -64,24 +64,29 @@
 					<input type="submit" value="" class="icon-confirm">
 				</form>
 
-				<DueDate v-if="!editing && !card.done" :card="card" />
+				<CardMenu v-if="showMenuAtTitle" :card="card" class="right card-menu" />
-				<Done v-else-if="!editing && card.done" :card="card" />
-
-				<CardMenu v-if="!editing && compactMode" :card="card" class="right" />
 			</div>
 
-			<transition-group v-if="card.labels && card.labels.length"
+			<div v-if="hasLabels" class="card-labels">
-				name="zoom"
+				<transition-group v-if="card.labels && card.labels.length"
-				tag="ul"
+					name="zoom"
-				class="labels"
+					tag="ul"
-				@click.stop="openCard">
+					class="labels"
-				<li v-for="label in labelsSorted" :key="label.id" :style="labelStyle(label)">
+					@click.stop="openCard">
-					<span @click.stop="applyLabelFilter(label)">{{ label.title }}</span>
+					<li v-for="label in labelsSorted" :key="label.id" :style="labelStyle(label)">
-				</li>
+						<span @click.stop="applyLabelFilter(label)">{{ label.title }}</span>
-			</transition-group>
+					</li>
+				</transition-group>
+				<CardMenu v-if="showMenuAtLabels" :card="card" class="right" />
+			</div>
 
-			<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
+			<div v-if="hasBadges"
-				<CardBadges :card="card" />
+				v-show="!compactMode"
+				class="card-controls compact-item"
+				@click="openCard">
+				<CardBadges :card="card">
+					<CardMenu v-if="showMenuAtBadges" :card="card" class="right" />
+				</CardBadges>
 			</div>
 		</div>
 	</AttachmentDragAndDrop>
@@ -95,13 +100,11 @@ import Color from '../../mixins/color.js'
 import labelStyle from '../../mixins/labelStyle.js'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
 import CardMenu from './CardMenu.vue'
-import Done from './badges/Done.vue'
-import DueDate from './badges/DueDate.vue'
 import CardCover from './CardCover.vue'
 
 export default {
 	name: 'CardItem',
-	components: { CardBadges, AttachmentDragAndDrop, CardMenu, DueDate, CardCover, Done },
+	components: { CardBadges, AttachmentDragAndDrop, CardMenu, CardCover },
 	directives: {
 		ClickOutside,
 	},
@@ -165,6 +168,39 @@ export default {
 		labelsSorted() {
 			return [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
 		},
+		hasLabels() {
+			return this.card.labels.length > 0
+		},
+		hasBadges() {
+			return this.card.done
+				|| this.card.duedate
+				|| this.idBadge
+				|| this.card.commentsCount > 0
+				|| this.card.description
+				|| this.card.attachmentCount > 0
+				|| this.card.assignedUsers.length > 0
+		},
+		idBadge() {
+			return this.$store.getters.config('cardIdBadge')
+		},
+		showMenuAtTitle() {
+			if (this.editing) {
+				return false
+			}
+			return this.compactMode || (!this.compactMode && !this.hasBadges && !this.hasLabels)
+		},
+		showMenuAtLabels() {
+			if (this.compactMode) {
+				return false
+			}
+			return !this.hasBadges && this.hasLabels
+		},
+		showMenuAtBadges() {
+			if (this.compactMode) {
+				return false
+			}
+			return this.hasBadges
+		},
 	},
 	watch: {
 		currentCard(newValue) {
@@ -219,8 +255,12 @@ export default {
 		font-size: 100%;
 		background-color: var(--color-main-background);
 		margin-bottom: $card-spacing;
+		padding: var(--default-grid-baseline) $card-padding;
 		border: 2px solid var(--color-border);
 		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
 
 		&:deep(*) {
 			cursor: pointer;
@@ -240,7 +280,6 @@ export default {
 
 		.card-upper {
 			display: flex;
-			min-height: 44px;
 			form {
 				display: flex;
 				padding: 3px 5px;
@@ -251,13 +290,14 @@ export default {
 
 			}
 			h3 {
-				margin: 5px $card-padding;
+				margin: 0;
 				padding: 6px;
 				flex-grow: 1;
 				font-size: 100%;
 				overflow: hidden;
 				word-wrap: break-word;
 				padding-left: 4px;
+				align-self: center;
 				&.editable {
 					cursor: text;
 
@@ -270,6 +310,10 @@ export default {
 			input[type=text] {
 				font-size: 100%;
 			}
+			.card-menu {
+				height: 44px;
+				align-self: end;
+			}
 		}
 
 		/* stylelint-disable-next-line no-invalid-position-at-import-rule */
@@ -277,13 +321,6 @@ export default {
 
 		.card-controls {
 			display: flex;
-			margin-left: $card-padding;
-			margin-right: $card-padding;
-
-			& > div {
-				display: flex;
-				max-height: 44px;
-			}
 		}
 		&.card__editable .card-controls {
 			margin-right: 0;
@@ -291,10 +328,16 @@ export default {
 		&.card__archived {
 			background-color: var(--color-background-dark);
 		}
-	}
+		.card-labels {
+			display: flex;
+			align-items: end;
+			margin-bottom: var(--default-grid-baseline);
 
-	.duedate {
+			.labels {
-		margin-right: 9px;
+				flex-wrap: wrap;
+				align-self: flex-start;
+			}
+		}
 	}
 
 	.right {
@@ -346,6 +389,11 @@ export default {
 		.card {
 			@include dark-card;
 		}
+	}
 
+	@media print {
+		.card-menu {
+			display: none;
+		}
 	}
 </style>

src/components/cards/CardMenu.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div v-if="card">
+	<div v-if="card" class="card-menu">
 		<div @click.stop.prevent>
 			<NcActions>
 				<NcActionButton v-if="showArchived === false && !isCurrentUserAssigned"

src/components/cards/badges/Done.vue

@@ -1,72 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2022 Thanos Kamber <thanos.kamber@gmail.com>
-  -
-  - @author Thanos Kamber <thanos.kamber@gmail.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template>
-	<div v-if="card" class="done">
-		<transition name="zoom">
-			<div class="icon-check-circle">
-				<CheckCircle :size="20" :title="formatReadableDate(card.done)" />
-			</div>
-		</transition>
-	</div>
-</template>
-
-<script>
-import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
-import readableDate from '../../../mixins/readableDate.js'
-
-export default {
-	name: 'Done',
-	components: {
-		CheckCircle,
-	},
-	mixins: [
-		readableDate,
-	],
-	props: {
-		card: {
-			type: Object,
-			default: null,
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-	.icon-check-circle {
-		color: var(--color-success);
-		margin: 14px;
-	}
-
-	@media print {
-		.icon-check-circle {
-			span {
-				display: none;
-			}
-
-			&::before {
-				color: var(--color-text-lighter);
-				content: 'Done';
-			}
-		}
-	}
-</style>

src/components/cards/badges/DueDate.vue

@@ -23,8 +23,9 @@
 <template>
 	<div v-if="card" class="duedate" :data-due-state="dueState">
 		<transition name="zoom">
-			<div v-if="card.duedate" class="due" :title="absoluteDate">
+			<div v-if="card.duedate || card.done" class="due" :title="absoluteDate">
-				<Clock v-if="overdue" :size="16" />
+				<CheckCircle v-if="card.done" :size="16" />
+				<Clock v-else-if="overdue" :size="16" />
 				<ClockOutline v-else :size="16" />
 				<span v-if="!compactMode" class="due--label">{{ relativeDate }}</span>
 			</div>
@@ -37,8 +38,10 @@ import { mapState } from 'vuex'
 import moment from '@nextcloud/moment'
 import Clock from 'vue-material-design-icons/Clock.vue'
 import ClockOutline from 'vue-material-design-icons/ClockOutline.vue'
+import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
 
 const DueState = {
+	Done: 'Done',
 	Future: 'Future',
 	Next: 'Next',
 	Now: 'Now',
@@ -47,6 +50,7 @@ const DueState = {
 export default {
 	name: 'DueDate',
 	components: {
+		CheckCircle,
 		Clock,
 		ClockOutline,
 	},
@@ -61,6 +65,9 @@ export default {
 			compactMode: state => state.compactMode,
 		}),
 		dueState() {
+			if (this.card.done) {
+				return DueState.Done
+			}
 			const days = Math.floor(moment(this.card.duedate).diff(this.$root.time, 'seconds') / 60 / 60 / 24)
 			if (days < 0) {
 				return DueState.Overdue
@@ -78,14 +85,16 @@ export default {
 			return this.dueState === DueState.Overdue
 		},
 		relativeDate() {
-			const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
+			const date = this.card.done ? this.card.done : this.card.duedate
+			const diff = moment(this.$root.time).diff(date, 'seconds')
 			if (diff >= 0 && diff < 45) {
 				return t('core', 'seconds ago')
 			}
-			return moment(this.card.duedate).fromNow()
+			return moment(date).fromNow()
 		},
 		absoluteDate() {
-			return moment(this.card.duedate).format('LLLL')
+			const date = this.card.done ? this.card.done : this.card.duedate
+			return moment(date).format('LLLL')
 		},
 	},
 }
@@ -94,10 +103,8 @@ export default {
 <style lang="scss" scoped>
 	.due {
 		background-position: 4px center;
-		border-radius: var(--border-radius-large);
+		border-radius: var(--border-radius-pill);
-		margin-top: 9px;
+		padding: 1px 8px;
-		margin-bottom: 9px;
-		padding: 2px 8px;
 		font-size: 90%;
 		display: flex;
 		align-items: center;
@@ -105,22 +112,24 @@ export default {
 		z-index: 2;
 
 		[data-due-state='Overdue'] & {
-			color: var(--color-main-background);
+			color: var(--color-error-text);
-			background-color: var(--color-error-text);
+			background-color: rgba(var(--color-error-rgb), .1);
 		}
 		[data-due-state='Now'] & {
-			color: var(--color-main-background);
+			color: var(--color-warning-text);
-			background-color: var(--color-warning);
+			background-color: rgba(var(--color-warning-rgb), .1);
 		}
-
+		[data-due-state='Done'] & {
-		span {
+			color: var(--color-success-text);
-			white-space: nowrap;
+			background-color: rgba(var(--color-success-rgb), .1);
-			text-overflow: ellipsis;
-			overflow: hidden;
 		}
 
 		.due--label {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
 			margin-left: 4px;
+			font-size: 13px;
 		}
 	}
 

src/css/labels.scss

@@ -7,9 +7,7 @@ $card-padding: 10px;
 	min-width: 0;
 	display: flex;
 	flex-direction: row;
-	margin-left: $card-padding;
+	gap: 3px;
-	margin-right: $card-padding;
-	margin-top: -5px;
 
 	li {
 		flex-grow: 0;
@@ -17,11 +15,9 @@ $card-padding: 10px;
 		display: flex;
 		flex-direction: row;
 		overflow: hidden;
-		padding: 0px 5px;
+		padding: 1px 8px;
 		border-radius: 15px;
-		font-size: 85%;
+		font-size: 13px;
-		margin-right: 3px;
-		margin-bottom: 3px;
 
 		&:hover {
 			overflow: unset;

src/css/variables.scss

@@ -1,5 +1,5 @@
 $card-spacing: 16px;
 $card-padding: 8px;
 $stack-spacing: 12px;
-$stack-width: 260px;
+$stack-width: 280px;
 $board-spacing: 16px;