Various smaller styling fixes

src/components/Controls.vue

@@ -170,18 +170,22 @@
 					</template>
 				</Popover>
 
-				<Actions :style="archivedOpacity" :title="t('deck', 'Show archived cards')">
+				<Actions :style="archivedOpacity">
 					<ActionButton
 						icon="icon-archive"
-						@click="toggleShowArchived" />
-				</Actions>
-				<Actions :title="t('deck', 'Toggle compact mode')">
+						@click="toggleShowArchived">
+						{{ showArchived ? t('deck', 'Hide archived cards') : t('deck', 'Show archived cards') }}
+					</ActionButton>
 					<ActionButton v-if="compactMode"
 						icon="icon-toggle-compact-collapsed"
-						@click="toggleCompactMode" />
+						@click="toggleCompactMode">
+						{{ t('deck', 'Toggle compact mode') }}
+					</ActionButton>
 					<ActionButton v-else
 						icon="icon-toggle-compact-expanded"
-						@click="toggleCompactMode" />
+						@click="toggleCompactMode">
+						{{ t('deck', 'Toggle compact mode') }}
+					</ActionButton>
 				</Actions>
 				<!-- FIXME: ActionRouter currently doesn't work as an inline action -->
 				<Actions :title="t('deck', 'Details')">

src/components/board/Stack.vue

@@ -310,7 +310,8 @@ export default {
 			margin-top: 0;
 			margin-bottom: 10px;
 			box-shadow: 0 0 3px var(--color-box-shadow);
-			border-radius: 3px;
+			border-radius: var(--border-radius-large);
+			overflow: hidden;
 		}
 
 		&.icon-loading-small:after,

src/components/card/CardSidebar.vue

@@ -24,6 +24,8 @@
 	<AppSidebar v-if="currentBoard && currentCard && copiedCard"
 		:title="currentCard.title"
 		:subtitle="subtitle"
+		:title-editable.sync="titleEditable"
+		@update:title="updateTitle"
 		@close="closeSidebar">
 		<template #secondary-actions />
 		<AppSidebarTab id="details"
@@ -253,6 +255,7 @@ export default {
 
 			saving: false,
 			markdownIt: null,
+			titleEditable: false,
 			descriptionEditing: false,
 			mdeConfig: {
 				autoDownloadFontAwesome: false,
@@ -434,6 +437,12 @@ export default {
 			delete this.copiedCard.descriptionLastEdit
 			this.descriptionSaving = false
 		},
+		updateTitle(newTitle) {
+			this.$set(this.copiedCard, 'title', newTitle)
+			this.$store.dispatch('updateCardTitle', this.copiedCard).then(() => {
+				this.titleEditable = false
+			})
+		},
 		updateDescription() {
 			this.copiedCard.descriptionLastEdit = Date.now()
 			clearTimeout(this.descriptionSaveTimeout)

src/components/cards/CardBadges.vue

@@ -121,6 +121,10 @@ export default {
 		}
 	}
 
+	.card:not(.card__editable) .avatars {
+		margin-right: 10px;
+	}
+
 	.fade-enter-active, .fade-leave-active {
 		transition: opacity .125s;
 	}

src/components/cards/CardItem.vue

@@ -26,7 +26,7 @@
 
 <template>
 	<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
-		<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'is-editing': editing}"
+		<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'is-editing': editing, 'card__editable': canEdit}"
 			tag="div"
 			class="card"
 			@click="openCard">
@@ -43,7 +43,7 @@
 					class="dragDisabled"
 					@keyup.esc="cancelEdit"
 					@submit.prevent="finishedEdit(card)">
-					<input v-model="copiedCard.title" type="text" autofocus>
+					<input v-model="copiedCard.title" v-focus type="text">
 					<input type="button" class="icon-confirm" @click="finishedEdit(card)">
 				</form>
 
@@ -175,7 +175,7 @@ export default {
 			min-height: 44px;
 			form {
 				display: flex;
-				padding: 5px 7px;
+				padding: 3px 5px;
 				width: 100%;
 				input[type=text] {
 					flex-grow: 1;
@@ -188,10 +188,14 @@ export default {
 				font-size: 100%;
 				overflow-x: hidden;
 				word-wrap: break-word;
+				padding-left: 4px;
 				span {
 					cursor: text;
 				}
 			}
+			input[type=text] {
+				font-size: 100%;
+			}
 		}
 
 		@import './../../css/labels';

src/components/navigation/AppNavigation.vue

@@ -25,7 +25,8 @@
 		<template #list>
 			<AppNavigationItem
 				:title="t('deck', 'Upcoming cards')"
-				icon="icon-desktop"
+				icon="icon-calendar-dark"
+				:exact="true"
 				to="/" />
 			<AppNavigationBoardCategory
 				id="deck-navigation-all"

src/components/navigation/AppNavigationBoardCategory.vue

@@ -24,6 +24,7 @@
 		:title="text"
 		:icon="icon"
 		:to="to"
+		:exact="true"
 		:allow-collapse="collapsible"
 		:open="opened">
 		<AppNavigationBoard v-for="board in boardsSorted" :key="board.id" :board="board" />