Merge pull request #1944 from nextcloud/refactor/navigation

src/components/cards/CardItem.vue

@@ -31,7 +31,7 @@
 			class="card"
 			@click="openCard">
 			<div class="card-upper">
-				<h3 v-if="showArchived || !canEdit">
+				<h3 v-if="isArchived || showArchived || !canEdit">
 					{{ card.title }}
 				</h3>
 				<h3 v-else-if="!editing">
@@ -47,7 +47,7 @@
 					<input type="button" class="icon-confirm" @click="finishedEdit(card)">
 				</form>
 
-				<div v-if="!editing" class="right">
+				<div v-if="!editing" class="duedate right">
 					<transition name="zoom">
 						<div v-if="card.duedate" :class="dueIcon">
 							<span>{{ relativeDate }}</span>
@@ -57,7 +57,8 @@
 
 				<CardMenu v-if="!editing && compactMode" :id="id" class="right" />
 			</div>
-			<transition-group name="zoom"
+			<transition-group v-if="card.labels.length"
+				name="zoom"
 				tag="ul"
 				class="labels"
 				@click="openCard">
@@ -109,6 +110,7 @@ export default {
 		}),
 		...mapGetters([
 			'canEdit',
+			'isArchived',
 		]),
 		card() {
 			return this.$store.getters.cardById(this.id)
@@ -189,7 +191,7 @@ export default {
 
 		.card-upper {
 			display: flex;
-			min-height: 50px;
+			min-height: 44px;
 			form {
 				display: flex;
 				padding: 5px 7px;
@@ -200,7 +202,7 @@ export default {
 
 			}
 			h3 {
-				margin: 14px $card-padding;
+				margin: 12px $card-padding;
 				flex-grow: 1;
 				font-size: 100%;
 				overflow-x: hidden;
@@ -257,10 +259,12 @@ export default {
 			}
 		}
 	}
+	.duedate {
+		margin-right: 9px;
+	}
 	.right {
 		display: flex;
 		align-items: flex-start;
-		margin-right: 9px;
 	}
 
 	.icon.due {
@@ -269,6 +273,7 @@ export default {
 		margin-top: 9px;
 		margin-bottom: 9px;
 		padding: 3px 4px;
+		padding-right: 0;
 		font-size: 90%;
 		display: flex;
 		align-items: center;
@@ -284,14 +289,17 @@ export default {
 			background-color: var(--color-error);
 			color: var(--color-primary-text);
 			opacity: .7;
+			padding: 3px 4px;
 		}
 		&.now {
 			background-color: var(--color-warning);
 			opacity: .7;
+			padding: 3px 4px;
 		}
 		&.next {
 			background-color: var(--color-background-dark);
 			opacity: .7;
+			padding: 3px 4px;
 		}
 
 		span {
@@ -303,8 +311,11 @@ export default {
 	}
 
 	.compact {
-		min-height: 50px;
+		min-height: 44px;
 
+		.duedate {
+			margin-right: 0;
+		}
 		&.has-labels {
 			padding-bottom: $card-padding;
 		}

src/components/cards/CardMenu.vue

@@ -23,7 +23,7 @@
 <template>
 	<div>
 		<div @click.stop.prevent>
-			<Actions v-if="canEdit">
+			<Actions v-if="canEdit && !isArchived">
 				<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">
 					{{ t('deck', 'Assign to me') }}
 				</ActionButton>
@@ -93,6 +93,7 @@ export default {
 	computed: {
 		...mapGetters([
 			'canEdit',
+			'isArchived',
 		]),
 		...mapState({
 			showArchived: state => state.showArchived,