fix: Align card details better to take less space

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

Hide file tree

Showing 7 changed files with 104 additions and 47 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/cards/AvatarList.vue b/src/components/cards/AvatarList.vue
@@ -151,7 +151,6 @@ export default {
 
 <style scoped lang="scss">
 	.avatars {
-		margin-top: 5px;
 		position: relative;
 		flex-grow: 1;
 		:deep(.popovermenu) {
@@ -175,8 +174,8 @@ export default {
 		flex-direction: row-reverse;
 		.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;

diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
@@ -23,6 +23,10 @@
 <template>
 	<div v-if="card" class="badges">
 		<CardId v-if="idBadge" class="icon-badge" :card="card" />
+
+		<DueDate v-if="!editing && !card.done" :card="card" />
+		<Done v-else-if="!editing && card.done" :card="card" />
+
 		<div v-if="card.commentsCount > 0"
 			v-tooltip="commentsHint"
 			class="icon-badge"
@@ -44,24 +48,35 @@
 			<span>{{ card.attachmentCount }}</span>
 		</div>
 
-		<NcAvatarList :users="card.assignedUsers" />
+		<NcAvatarList :users="card.assignedUsers" :size="32" />
 
-		<CardMenu class="card-menu" :card="card" />
+		<slot />
 	</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'
+import Done from './badges/Done.vue'
 
 export default {
 	name: 'CardBadges',
-	components: { NcAvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon, CardId },
+	components: {
+		Done,
+		DueDate,
+		NcAvatarList,
+		TextIcon,
+		AttachmentIcon,
+		CheckmarkIcon,
+		CommentIcon,
+		CommentUnreadIcon,
+		CardId,
+	},
 	props: {
 		card: {
 			type: Object,
@@ -102,6 +117,7 @@ export default {
 		display: flex;
 		width: 100%;
 		flex-grow: 1;
+		gap: 3px;
 
 		.icon-badge {
 			opacity: .7;
@@ -110,16 +126,14 @@ export default {
 
 			span,
 			&:deep(span) {
-				padding: 10px 2px;
+				padding: 2px;
 			}
 		}
 	}
 
 	.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;
@@ -166,9 +180,5 @@ export default {
 			align-items: flex-start;
 			max-height: none !important;
 		}
-
-		.card-menu {
-			display: none;
-		}
 	}
 </style>
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
@@ -64,24 +64,26 @@
 					<input type="submit" value="" class="icon-confirm">
 				</form>
 
-				<DueDate v-if="!editing && !card.done" :card="card" />
-				<Done v-else-if="!editing && card.done" :card="card" />
-
-				<CardMenu v-if="!editing && compactMode" :card="card" class="right" />
+				<CardMenu v-if="showMenuAtTitle" :card="card" class="right card-menu" />
 			</div>
 
-			<transition-group v-if="card.labels && card.labels.length"
-				name="zoom"
-				tag="ul"
-				class="labels"
-				@click.stop="openCard">
-				<li v-for="label in labelsSorted" :key="label.id" :style="labelStyle(label)">
-					<span @click.stop="applyLabelFilter(label)">{{ label.title }}</span>
-				</li>
-			</transition-group>
+			<div class="card-labels">
+				<transition-group v-if="card.labels && card.labels.length"
+					name="zoom"
+					tag="ul"
+					class="labels"
+					@click.stop="openCard">
+					<li v-for="label in labelsSorted" :key="label.id" :style="labelStyle(label)">
+						<span @click.stop="applyLabelFilter(label)">{{ label.title }}</span>
+					</li>
+				</transition-group>
+				<CardMenu v-if="showMenuAtLabels" :card="card" class="right" />
+			</div>
 
 			<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
-				<CardBadges :card="card" />
+				<CardBadges :card="card">
+					<CardMenu v-if="showMenuAtBadges" :card="card" class="right" />
+				</CardBadges>
 			</div>
 		</div>
 	</AttachmentDragAndDrop>
@@ -95,13 +97,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 +165,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) {
@@ -221,6 +254,9 @@ export default {
 		margin-bottom: $card-spacing;
 		border: 2px solid var(--color-border);
 		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 3px;
 
 		&:deep(*) {
 			cursor: pointer;
@@ -251,7 +287,7 @@ export default {
 
 			}
 			h3 {
-				margin: 5px $card-padding;
+				margin: 6px $card-padding;
 				padding: 6px;
 				flex-grow: 1;
 				font-size: 100%;
@@ -270,6 +306,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 */
@@ -282,7 +322,8 @@ export default {
 
 			& > div {
 				display: flex;
-				max-height: 44px;
+				flex-wrap: wrap;
+				align-items: center;
 			}
 		}
 		&.card__editable .card-controls {
@@ -291,10 +332,15 @@ export default {
 		&.card__archived {
 			background-color: var(--color-background-dark);
 		}
-	}
+		.card-labels {
+			display: flex;
+			align-items: end;
 
-	.duedate {
-		margin-right: 9px;
+			.labels {
+				flex-wrap: wrap;
+				align-self: flex-start;
+			}
+		}
 	}
 
 	.right {
@@ -346,6 +392,11 @@ export default {
 		.card {
 			@include dark-card;
 		}
+	}
 
+	@media print {
+		.card-menu {
+			display: none;
+		}
 	}
 </style>
diff --git a/src/components/cards/CardMenu.vue b/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"

diff --git a/src/components/cards/badges/Done.vue b/src/components/cards/badges/Done.vue
@@ -54,7 +54,7 @@ export default {
 <style lang="scss" scoped>
 	.icon-check-circle {
 		color: var(--color-success);
-		margin: 14px;
+		margin: 12px 0;
 	}
 
 	@media print {

diff --git a/src/components/cards/badges/DueDate.vue b/src/components/cards/badges/DueDate.vue
@@ -94,22 +94,20 @@ export default {
 <style lang="scss" scoped>
 	.due {
 		background-position: 4px center;
-		border-radius: var(--border-radius-large);
-		margin-top: 9px;
-		margin-bottom: 9px;
-		padding: 2px 8px;
+		border-radius: var(--border-radius-pill);
+		padding: 1px 8px;
 		font-size: 90%;
 		display: flex;
 		align-items: center;
 		flex-shrink: 1;
 		z-index: 2;
 
 		[data-due-state='Overdue'] & {
-			color: var(--color-main-background);
-			background-color: var(--color-error-text);
+			color: #fff;
+			background-color: var(--color-error);
 		}
 		[data-due-state='Now'] & {
-			color: var(--color-main-background);
+			color: #fff;
 			background-color: var(--color-warning);
 		}