fix: Align card details better to take less space

Signed-off-by: Julius Härtl <[email protected]>
nextcloud · Nov 10, 2023 · af9611b · af9611b
1 parent 41d1749
commit af9611b
Show file tree

Hide file tree

Showing 11 changed files with 204 additions and 166 deletions.
diff --git a/src/components/board/Board.vue b/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;

diff --git a/src/components/board/Stack.vue b/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;

diff --git a/src/components/cards/AvatarList.vue b/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;
-			height: 36px;
+			width: 32px;
+			height: 32px;
 			box-sizing: content-box !important;
 			margin-right: -$avatar-offset;
 			transition: margin-right 0.2s ease-in-out;
-
-			&.icon-more {
-				width: 32px;
-				height: 32px;
-				opacity: .5;
-				background-color: var(--color-background-dark) !important;
-				cursor: pointer;
-			}
+			border: 2px solid var(--color-main-background);
 		}
-		&:hover div:nth-child(n+2) :deep(.avatardiv) {
-			margin-right: 1px;
+
+		.more-avatars {
+			width: 32px;
+			height: 32px;
+			background-color: var(--color-background-dark) !important;
+			cursor: pointer;
+			color: var(--color-text-maxcontrast);
 		}
+
 	}
 
 	.popovermenu {

diff --git a/src/components/cards/CardBadges.vue b/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 v-if="card.commentsCount > 0"
-			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 class="badge-left">
+			<DueDate v-if="card.duedate || card.done" :card="card" />
+
+			<div class="inline-badges">
+				<CardId v-if="idBadge" class="icon-badge" :card="card" />
+
+				<div v-if="card.commentsCount > 0"
+					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">
-			<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
-			<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
-		</div>
-
-		<TextIcon v-else-if="card.description && card.description.trim() && checkListCount == 0" :size="16" decorative />
+		<div class="badge-right">
+			<NcAvatarList :users="card.assignedUsers" :size="32" />
 
-		<div v-if="card.attachmentCount > 0" class="icon-badge">
-			<AttachmentIcon :size="16" />
-			<span>{{ card.attachmentCount }}</span>
+			<slot />
 		</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,6 +122,8 @@ export default {
 		display: flex;
 		width: 100%;
 		flex-grow: 1;
+		flex-direction: row;
+		gap: 3px;
 
 		.icon-badge {
 			opacity: .7;
@@ -110,16 +132,21 @@ export default {
 
 			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;
-		margin-top: 10px;
-		margin-bottom: 10px;
+		border-radius: var(--border-radius);
 		padding: 4px;
 		font-size: 90%;
 		display: flex;
@@ -153,6 +180,30 @@ export default {
 		}
 	}
 
+	.badge-left, .badge-right {
+		display: flex;
+	}
+
+	.badge-left {
+		align-self: center;
+		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 +217,5 @@ export default {
 			align-items: flex-start;
 			max-height: none !important;
 		}
-
-		.card-menu {
-			display: none;
-		}
 	}
 </style>
diff --git a/src/components/cards/CardCover.vue b/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;