diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 657eb9725..eed4ec04c 100644
--- 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
index 17138e97c..3b8e531b9 100644
--- a/src/components/cards/AvatarList.vue
+++ b/src/components/cards/AvatarList.vue
@@ -151,7 +151,6 @@ export default {
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index c6c007efd..445217a8c 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -64,24 +64,26 @@
-
-
-
-
+
-
-
- {{ label.title }}
-
-
+
+
+
+ {{ label.title }}
+
+
+
+
-
+
+
+
@@ -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;
+ }
}
diff --git a/src/components/cards/CardMenu.vue b/src/components/cards/CardMenu.vue
index 91acc65bd..c1d355095 100644
--- a/src/components/cards/CardMenu.vue
+++ b/src/components/cards/CardMenu.vue
@@ -21,7 +21,7 @@
-->
-
+