fix: Avoid double tap on iOS and close navigation on click

Signed-off-by: Julius Härtl <jus@bitgrid.net>

cypress/e2e/boardFeatures.js

@@ -35,7 +35,7 @@ describe('Board', function() {
 			.type(board, { force: true })
 
 		// Submit
-		cy.get('.board-create form input[type=submit]')
+		cy.get('.board-create form button[type=submit]')
 			.first().click({ force: true })
 
 		cy.wait('@createBoardRequest').its('response.statusCode').should('equal', 200)

src/App.vue

@@ -6,12 +6,13 @@
 <template>
 	<NcContent app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
 		<AppNavigation />
-		<NcAppContent>
+		<NcAppContent :allow-swipe-navigation="false">
 			<router-view />
 		</NcAppContent>
 
 		<div v-if="$route.params.id || $route.params.cardId">
 			<NcModal v-if="cardDetailsInModal && $route.params.cardId"
+				:name="t('deck', 'Card details')"
 				:clear-view-delay="0"
 				:close-button-contained="true"
 				size="large"
@@ -32,7 +33,7 @@
 import { mapState } from 'vuex'
 import AppNavigation from './components/navigation/AppNavigation.vue'
 import KeyboardShortcuts from './components/KeyboardShortcuts.vue'
-import { NcModal, NcContent, NcAppContent } from '@nextcloud/vue'
+import { NcModal, NcContent, NcAppContent, isMobile } from '@nextcloud/vue'
 import { BoardApi } from './services/BoardApi.js'
 import { emit, subscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
@@ -50,6 +51,7 @@ export default {
 		NcAppContent,
 		KeyboardShortcuts,
 	},
+	mixins: [isMobile],
 	provide() {
 		return {
 			boardApi,
@@ -106,7 +108,7 @@ export default {
 	},
 	mounted() {
 		// Set navigation to initial state and update in case it gets toggled
-		emit('toggle-navigation', { open: this.navShown, _initial: true })
+		emit('toggle-navigation', { open: !this.isMobile && this.navShown, _initial: true })
 		this.$nextTick(() => {
 			subscribe('navigation-toggled', (navState) => {
 				this.$store.dispatch('toggleNav', navState.open)

src/CardSelector.vue

@@ -13,16 +13,16 @@
 				:disabled="loading"
 				label="title"
 				@option:selected="fetchCardsFromBoard">
-				<template slot="singleLabel" slot-scope="props">
+				<template #selected-option="props">
 					<span>
-						<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
-						<span>{{ props.option.title }}</span>
+						<span :style="{ 'backgroundColor': '#' + props.color }" class="board-bullet" />
+						<span>{{ props.title }}</span>
 					</span>
 				</template>
-				<template slot="option" slot-scope="props">
+				<template #option="props">
 					<span>
-						<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
-						<span>{{ props.option.title }}</span>
+						<span :style="{ 'backgroundColor': '#' + props.color }" class="board-bullet" />
+						<span>{{ props.title }}</span>
 					</span>
 				</template>
 			</NcSelect>

src/components/Controls.vue

@@ -544,7 +544,7 @@ export default {
 	.filter--item {
 		input + label {
 			display: block;
-			padding: 6px 0;
+			padding: var(--default-grid-baseline) 0;
 			.avatardiv {
 				vertical-align: middle;
 				margin-bottom: 2px;

src/components/board/Board.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="board-wrapper" :tabindex="-1">
+	<div class="board-wrapper" :tabindex="-1" @touchend="fixActionRestriction">
 		<Controls :board="board" />
 
 		<transition name="fade" mode="out-in">
@@ -22,23 +22,27 @@
 				<template #icon>
 					<DeckIcon />
 				</template>
-				<template #title>
+				<template #name>
 					{{ t('deck', 'No lists available') }}
 				</template>
 				<template v-if="canManage" #action>
 					{{ t('deck', 'Create a new list to add cards to this board') }}
 					<form @submit.prevent="addNewStack()">
-						<input id="new-stack-input-main"
-							v-model="newStackTitle"
-							v-focus
-							type="text"
-							class="no-close"
+						<NcTextField ref="newStackInput"
+							:disable="loading"
+							:value.sync="newStackTitle"
 							:placeholder="t('deck', 'List name')"
-							required>
-						<input title="t('deck', 'Add list')"
-							class="icon-confirm"
-							type="submit"
-							value="">
+							type="text" />
+						<NcButton type="secondary"
+							native-type="submit"
+							:disabled="loading"
+							:title="t('deck', 'Add list')">
+							<template #icon>
+								<CheckIcon v-if="!loading" :size="20" />
+								<NcLoadingIcon v-else :size="20" />
+							</template>
+							{{ t('deck', 'Add list') }}
+						</NcButton>
 					</form>
 				</template>
 			</NcEmptyContent>
@@ -82,8 +86,9 @@ import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls.vue'
 import DeckIcon from '../icons/DeckIcon.vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
 import Stack from './Stack.vue'
-import { NcEmptyContent, NcModal } from '@nextcloud/vue'
+import { NcEmptyContent, NcModal, NcButton, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
 import GlobalSearchResults from '../search/GlobalSearchResults.vue'
 import { showError } from '../../helpers/errors.js'
 import { createSession } from '../../sessions.js'
@@ -99,6 +104,10 @@ export default {
 		Stack,
 		NcEmptyContent,
 		NcModal,
+		NcTextField,
+		NcButton,
+		NcLoadingIcon,
+		CheckIcon,
 		CardSidebar,
 	},
 	inject: [
@@ -131,7 +140,7 @@ export default {
 			'canManage',
 		]),
 		stacksByBoard() {
-			return this.$store.getters.stacksByBoard(this.board.id)
+			return this.board?.id ? this.$store.getters.stacksByBoard(this.board.id) : []
 		},
 		dragHandleSelector() {
 			return this.canEdit ? '.stack__title' : '.no-drag'
@@ -147,6 +156,11 @@ export default {
 		showArchived() {
 			this.fetchData()
 		},
+		isEmpty(newValue) {
+			newValue && this.$nextTick(() => {
+				this.$refs?.newStackInput?.focus()
+			})
+		},
 	},
 	created() {
 		this.session = createSession(this.id)
@@ -217,6 +231,13 @@ export default {
 			window.removeEventListener('mouseup', this.stopMouseDrag)
 			window.removeEventListener('mouseleave', this.stopMouseDrag)
 		},
+
+		fixActionRestriction() {
+			document.body.classList.remove(
+				'smooth-dnd-no-user-select',
+				'smooth-dnd-disable-touch-action',
+			)
+		},
 	},
 }
 </script>
@@ -229,13 +250,16 @@ export default {
 		text-align: center;
 		display: flex;
 		width: 100%;
-		max-width: 200px;
 		margin: auto;
-		margin-top: 20px;
+		margin-top: calc(var(--default-grid-baseline) * 4);
+		gap: var(--default-grid-baseline);
 
-		input[type=text] {
+		input[type="text"] {
 			flex-grow: 1;
 		}
+		button[type="submit"] {
+			flex-shrink: 0;
+		}
 	}
 
 	.board-wrapper {
@@ -278,7 +302,9 @@ export default {
 					flex-grow: 1;
 					display: flex;
 					flex-direction: column;
-					padding: $stack-spacing;
+					// Margin left instead of padidng to avoid jumps on dropping a card
+					margin-left: $stack-spacing;
+					padding-right: $stack-spacing;
 					overflow-x: hidden;
 					overflow-y: auto;
 					padding-top: 15px;

src/components/board/Stack.vue

@@ -88,15 +88,33 @@
 			</div>
 		</NcModal>
 
-		<transition name="slide-top" appear>
-			<div v-if="showAddCard" class="stack__card-add">
+		<Container :get-child-payload="payloadForCard(stack.id)"
+			group-name="stack"
+			data-click-closes-sidebar="true"
+			non-drag-area-selector=".dragDisabled"
+			:drag-handle-selector="dragHandleSelector"
+			data-dragscroll-enabled
+			@should-accept-drop="canEdit"
+			@drag-start="draggingCard = true"
+			@drag-end="draggingCard = false"
+			@drop="($event) => onDropCard(stack.id, $event)">
+			<Draggable v-for="card in cardsByStack" :key="card.id">
+				<transition :appear="animate && !card.animated && (card.animated=true)"
+					:appear-class="'zoom-appear-class'"
+					:appear-active-class="'zoom-appear-active-class'">
+					<CardItem :id="card.id" ref="card" :dragging="draggingCard" />
+				</transition>
+			</Draggable>
+		</Container>
+
+		<transition name="slide-bottom" appear>
+			<div v-show="showAddCard" class="stack__card-add">
 				<form :class="{ 'icon-loading-small': stateCardCreating }"
 					@submit.prevent.stop="clickAddCard()">
 					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
 					<input id="new-stack-input-main"
 						ref="newCardInput"
 						v-model="newCardTitle"
-						v-focus
 						type="text"
 						class="no-close"
 						:disabled="stateCardCreating"
@@ -112,25 +130,6 @@
 				</form>
 			</div>
 		</transition>
-
-		<Container :get-child-payload="payloadForCard(stack.id)"
-			group-name="stack"
-			data-click-closes-sidebar="true"
-			non-drag-area-selector=".dragDisabled"
-			:drag-handle-selector="dragHandleSelector"
-			data-dragscroll-enabled
-			@should-accept-drop="canEdit"
-			@drag-start="draggingCard = true"
-			@drag-end="draggingCard = false"
-			@drop="($event) => onDropCard(stack.id, $event)">
-			<Draggable v-for="card in cardsByStack" :key="card.id">
-				<transition :appear="animate && !card.animated && (card.animated=true)"
-					:appear-class="'zoom-appear-class'"
-					:appear-active-class="'zoom-appear-active-class'">
-					<CardItem :id="card.id" :dragging="draggingCard" />
-				</transition>
-			</Draggable>
-		</Container>
 	</div>
 </template>
 
@@ -221,10 +220,18 @@ export default {
 		showAddCard(newValue) {
 			if (!newValue) {
 				this.$store.dispatch('toggleShortcutLock', false)
+			} else {
+				this.$nextTick(() => {
+					this.$refs.newCardInput.focus()
+				})
 			}
 		},
 	},
 
+	mounted() {
+		this.setupAutoscrollOnDrag()
+	},
+
 	methods: {
 		stopCardCreation(e) {
 			// For some reason the submit event triggers a MouseEvent that is bubbling to the outside
@@ -303,6 +310,7 @@ export default {
 				this.$nextTick(() => {
 					this.$refs.newCardInput.focus()
 					this.animate = false
+					this.$refs.card[(this.$refs.card.length - 1)].scrollIntoView()
 				})
 				if (!this.cardDetailsInModal) {
 					this.$router.push({ name: 'card', params: { cardId: newCard.id } })
@@ -316,6 +324,36 @@ export default {
 		onCreateCardFocus() {
 			this.$store.dispatch('toggleShortcutLock', true)
 		},
+		setupAutoscrollOnDrag() {
+			let timer
+			const autoscroll = (event) => {
+				const viewportX = event.clientX
+				const boardElement = document.querySelector('.board')
+				const viewportWidth = boardElement.clientWidth
+				const offset = viewportWidth - viewportX
+				const scrollMultiplier = 10
+				const scrollBoundary = window.innerWidth * 0.15
+
+				if (offset < 100) {
+					const scrollToX = boardElement.scrollLeft + scrollMultiplier * (1 - offset / scrollBoundary)
+					boardElement.scrollTo(scrollToX, boardElement.scrollTop)
+				}
+
+				if (boardElement.scrollLeft > 0 && viewportX < scrollBoundary) {
+					const scrollToX = boardElement.scrollLeft - scrollMultiplier * (1 - viewportX / scrollBoundary)
+					boardElement.scrollTo(scrollToX, boardElement.scrollTop)
+				}
+			}
+			window.addEventListener('mousemove', (e) => {
+				if (!this.draggingCard) {
+					timer && clearInterval(timer)
+					return
+				}
+
+				clearInterval(timer)
+				timer = window.setInterval(() => autoscroll(e), 25)
+			})
+		},
 	},
 }
 </script>
@@ -338,6 +376,7 @@ export default {
 		padding-left: $card-spacing;
 		padding-right: $card-spacing;
 		margin: 6px;
+		margin-top: 0;
 		cursor: grab;
 		background-color: var(--color-main-background);
 
@@ -359,14 +398,6 @@ export default {
 			}
 		}
 
-		&--add:before {
-			height: 78px;
-			background-image: linear-gradient(180deg, var(--color-main-background) 68px, rgba(255, 255, 255, 0) 100%);
-			body.theme--dark & {
-				background-image: linear-gradient(180deg, var(--color-main-background) 68px, rgba(0, 0, 0, 0) 100%);
-			}
-		}
-
 		& > * {
 			position: relative;
 			z-index: 100;
@@ -422,13 +453,14 @@ export default {
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
-		margin-top: 5px;
+		margin-bottom: 5px;
+		padding-top: var(--default-grid-baseline);
 		background-color: var(--color-main-background);
 
 		form {
 			display: flex;
 			margin-left: $stack-spacing;
-			margin-right: $card-spacing + $stack-spacing + 4px;
+			margin-right: $stack-spacing;
 			width: 100%;
 			border: 2px solid var(--color-border-maxcontrast);
 			border-radius: var(--border-radius-large);
@@ -464,7 +496,16 @@ export default {
 	.slide-top-enter, .slide-top-leave-to {
 		transform: translateY(-10px);
 		opacity: 0;
-		height: 0px;
+	}
+
+	.slide-bottom-enter-active,
+	.slide-bottom-leave-active {
+		transition: all 100ms ease;
+	}
+
+	.slide-bottom-enter, .slide-bottom-leave-to {
+		transform: translateY(20px);
+		opacity: 0;
 	}
 
 	.modal__content {

src/components/card/AttachmentList.vue

@@ -248,6 +248,10 @@ export default {
 
 <style lang="scss" scoped>
 
+	.drop-upload--sidebar {
+		min-height: 100%;
+	}
+
 	.button-group {
 		display: flex;
 		gap: calc(var(--default-grid-baseline) * 3);

src/components/card/CardSidebar.vue

@@ -162,7 +162,9 @@ export default {
 	},
 	methods: {
 		focusHeader() {
-			this.$refs.cardSidebar.$el.querySelector('.app-sidebar-header__mainname').focus()
+			this.$nextTick(() => {
+				this.$refs?.cardSidebar.$el.querySelector('.app-sidebar-header__mainname')?.focus()
+			})
 		},
 		handleUpdateTitleEditable(value) {
 			this.titleEditable = value
@@ -224,6 +226,7 @@ section.app-sidebar__tab--active {
 	left: 0;
 	right: 0;
 	max-width: calc(100% - #{$modal-padding * 2});
+	min-height: calc(100vh - var(--header-height) * 4);
 	padding: 0 14px;
 	height: 97%;
 	overflow: hidden !important;

src/components/cards/CardCover.vue

@@ -66,11 +66,11 @@ export default {
 @import '../../css/variables';
 
 .card-cover {
-	height: 100px;
+	height: 90px;
 	display: flex;
-	margin-top: -8px;
-	margin-left: -8px;
-	margin-right: -8px;
+	margin-top: -4px;
+	margin-left: -4px;
+	margin-right: -4px;
 
 	.image-wrapper {
 		flex: 1;
@@ -79,10 +79,10 @@ export default {
 		background-repeat: no-repeat;
 		background-position: center center;
 		&.rounded-left {
-			border-top-left-radius: 10px;
+			border-top-left-radius: calc(var(--border-radius-large) - 1px);
 		}
 		&.rounded-right {
-			border-top-right-radius: 10px;
+			border-top-right-radius: calc(var(--border-radius-large) - 1px);
 		}
 	}
 }

src/components/cards/CardItem.vue

@@ -6,7 +6,7 @@
 <template>
 	<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
 		<div :ref="`card${card.id}`"
-			:class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'card__editable': canEdit, 'card__archived': card.archived }"
+			:class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
 			tag="div"
 			:tabindex="0"
 			class="card"
@@ -103,6 +103,11 @@ export default {
 			default: false,
 		},
 	},
+	data() {
+		return {
+			highlight: false,
+		}
+	},
 	computed: {
 		...mapState({
 			compactMode: state => state.compactMode,
@@ -270,6 +275,14 @@ export default {
 				},
 			})
 		},
+		scrollIntoView() {
+			this.$el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
+			this.focus()
+			this.highlight = true
+			setTimeout(() => {
+				this.highlight = false
+			}, 2000)
+		},
 	},
 }
 </script>
@@ -290,11 +303,10 @@ export default {
 		background-color: var(--color-main-background);
 		margin-bottom: $card-spacing;
 		padding: var(--default-grid-baseline) $card-padding;
-		border: 2px solid var(--color-border);
+		border: 2px solid var(--color-border-dark);
 		width: 100%;
 		display: flex;
 		flex-direction: column;
-		gap: var(--default-grid-baseline);
 
 		&:deep(*) {
 			cursor: pointer;
@@ -317,7 +329,7 @@ export default {
 			h4 {
 				font-weight: normal;
 				margin: 0;
-				padding: 6px;
+				padding: var(--default-grid-baseline);
 				flex-grow: 1;
 				font-size: 100%;
 				overflow: hidden;
@@ -360,10 +372,28 @@ export default {
 		&.card__archived {
 			background-color: var(--color-background-dark);
 		}
+		@keyframes highlight {
+			0% {
+				border-color: var(--color-border-dark);
+			}
+			20% {
+				border-color: var(--color-primary-element);
+			}
+			70% {
+				border-color: var(--color-primary-element);
+			}
+			100% {
+				border-color: var(--color-border-dark);
+			}
+		}
+		&.card__highlight {
+			animation: highlight 2s;
+		}
 		.card-labels {
 			display: flex;
 			align-items: end;
-			margin-bottom: var(--default-grid-baseline);
+			padding-left: var(--default-grid-baseline);
+			padding-top: var(--default-grid-baseline);
 
 			.labels {
 				flex-wrap: wrap;
@@ -403,7 +433,6 @@ export default {
 			display: flex;
 			height: 32px;
 			width: 32px;
-			margin-top: 6px;
 		}
 		&.has-labels {
 			padding-bottom: $card-padding;

src/components/navigation/AppNavigationAddBoard.vue

@@ -8,19 +8,41 @@
 		icon="icon-add"
 		@click.prevent.stop="startCreateBoard" />
 	<div v-else class="board-create">
-		<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
+		<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper" :disabled="loading">
 			<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
 		</NcColorPicker>
 		<form @submit.prevent.stop="createBoard">
-			<input :placeholder="t('deck', 'Board name')" type="text" required>
-			<input type="submit" value="" class="icon-confirm">
-			<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
+			<NcTextField ref="inputField"
+				:disable="loading"
+				:value.sync="value"
+				:placeholder="t('deck', 'Board name')"
+				type="text"
+				required />
+			<NcButton type="tertiary"
+				:disabled="loading"
+				:title="t('deck', 'Cancel edit')"
+				@click.stop.prevent="cancelEdit">
+				<template #icon>
+					<CloseIcon :size="20" />
+				</template>
+			</NcButton>
+			<NcButton type="tertiary"
+				native-type="submit"
+				:disabled="loading"
+				:title="t('deck', 'Save board')">
+				<template #icon>
+					<CheckIcon v-if="!loading" :size="20" />
+					<NcLoadingIcon v-else :size="20" />
+				</template>
+			</NcButton>
 		</form>
 	</div>
 </template>
 
 <script>
-import { NcColorPicker, NcActionButton, NcActions, NcAppNavigationItem } from '@nextcloud/vue'
+import { NcButton, NcColorPicker, NcAppNavigationItem, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
 
 /**
  *
@@ -35,30 +57,33 @@ function randomColor() {
 
 export default {
 	name: 'AppNavigationAddBoard',
-	components: { NcColorPicker, NcAppNavigationItem, NcActionButton, NcActions },
+	components: { NcButton, NcColorPicker, NcAppNavigationItem, NcLoadingIcon, NcTextField, CheckIcon, CloseIcon },
 	directives: {},
 	props: {},
 	data() {
 		return {
+			value: '',
 			classes: [],
 			editing: false,
 			loading: false,
 			color: randomColor(),
 		}
 	},
-	computed: {},
-	watch: {},
-	mounted() {},
 	methods: {
 		startCreateBoard(e) {
 			this.editing = true
+			this.$nextTick(() => {
+				this.$refs?.inputField.focus()
+			})
 		},
 		async createBoard(e) {
-			const title = e.currentTarget.childNodes[0].value
+			this.loading = true
+			const title = this.value.trim()
 			await this.$store.dispatch('createBoard', {
 				title,
 				color: this.color.substring(1),
 			})
+			this.loading = false
 			this.editing = false
 			this.color = randomColor()
 		},
@@ -89,10 +114,9 @@ export default {
 		width: var(--default-clickable-area);
 		height: var(--default-clickable-area);
 		.color0 {
-			width: 30px !important;
-			margin: 5px;
-			margin-left: 7px;
-			height: 30px;
+			width: 24px !important;
+			margin: var(--default-grid-baseline);
+			height: 24px;
 			border-radius: 50%;
 			background-size: 14px;
 		}

src/components/navigation/AppNavigationBoard.vue

@@ -9,6 +9,8 @@
 		:to="routeTo"
 		:undo="deleted"
 		:menu-placement="'auto'"
+		:force-display-actions="isTouchDevice"
+		@click="onNavigate"
 		@undo="unDelete">
 		<NcAppNavigationIconBullet slot="icon" :color="board.color" />
 
@@ -114,24 +116,47 @@
 			<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
 		</NcColorPicker>
 		<form @submit.prevent.stop="applyEdit">
-			<input v-model="editTitle"
-				v-focus
-				dir="auto"
+			<NcTextField ref="inputField"
+				:disable="loading"
+				:value.sync="editTitle"
+				:placeholder="t('deck', 'Board name')"
 				type="text"
-				required>
-			<input type="submit" value="" class="icon-confirm">
-			<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
+				required />
+			<NcButton type="tertiary"
+				:disabled="loading"
+				native-type="submit"
+				:title="t('deck', 'Cancel edit')"
+				@click.stop.prevent="cancelEdit">
+				<template #icon>
+					<CloseIcon :size="20" />
+				</template>
+			</NcButton>
+			<NcButton type="tertiary"
+				native-type="submit"
+				:disabled="loading"
+				:title="t('deck', 'Save board')">
+				<template #icon>
+					<CheckIcon v-if="!loading" :size="20" />
+					<NcLoadingIcon v-else :size="20" />
+				</template>
+			</NcButton>
 		</form>
 	</div>
 </template>
 
 <script>
-import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
+import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
 import CloneIcon from 'vue-material-design-icons/ContentDuplicate.vue'
 import AccountIcon from 'vue-material-design-icons/Account.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
+
 import { loadState } from '@nextcloud/initial-state'
+import { emit } from '@nextcloud/event-bus'
+
+import isTouchDevice from '../../mixins/isTouchDevice.js'
 
 const canCreateState = loadState('deck', 'canCreate')
 
@@ -141,15 +166,19 @@ export default {
 		NcAppNavigationIconBullet,
 		NcAppNavigationItem,
 		NcColorPicker,
-		NcActions,
+		NcButton,
+		NcTextField,
 		NcActionButton,
 		AccountIcon,
 		ArchiveIcon,
 		CloneIcon,
+		CloseIcon,
+		CheckIcon,
 	},
 	directives: {
 		ClickOutside,
 	},
+	mixins: [isTouchDevice],
 	inject: [
 		'boardApi',
 	],
@@ -313,13 +342,20 @@ export default {
 		actionExport() {
 			this.boardApi.exportBoard(this.board)
 		},
+		onNavigate() {
+			if (this.isTouchDevice) {
+				emit('toggle-navigation', {
+					open: false,
+				})
+			}
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
 	.board-edit {
-		margin-left: var(--default-clickable-area);
+		margin-left: calc(var(--default-clickable-area) / 2);
 		order: 1;
 		display: flex;
 		height: var(--default-clickable-area);
@@ -338,10 +374,9 @@ export default {
 		width: var(--default-clickable-area);
 		height: var(--default-clickable-area);
 		.color0 {
-			width: 30px !important;
-			margin: 5px;
-			margin-left: 7px;
-			height: 30px;
+			width: 24px !important;
+			margin: var(--default-grid-baseline);
+			height: 24px;
 			border-radius: 50%;
 			background-size: 14px;
 		}

src/components/overview/Overview.vue

@@ -168,11 +168,13 @@ export default {
 	.dashboard-column {
 		display: flex;
 		flex-direction: column;
+		min-width: $stack-width;
 		width: $stack-width;
 		margin-left: $stack-spacing;
 		margin-right: $stack-spacing;
 
 		h3 {
+			font-size: var(--default-font-size);
 			margin: -6px;
 			margin-bottom: 12px;
 			padding: 6px 13px;

src/mixins/isTouchDevice.js

@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export default {
+	computed: {
+		isTouchDevice() {
+			return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0)
+		},
+	},
+}

src/views/CreateNewCardCustomPicker.vue

@@ -93,7 +93,7 @@
 				<template #icon>
 					<NcLoadingIcon />
 				</template>
-				<template #title>
+				<template #name>
 					{{ t('deck', 'Creating the new card …') }}
 				</template>
 			</NcEmptyContent>
@@ -101,7 +101,7 @@
 				<template #icon>
 					<CardPlusOutline />
 				</template>
-				<template #title>
+				<template #name>
 					{{ t('deck', 'Card "{card}" was added to "{board}"', { card: card.title, board: selectedBoard.title }) }}
 				</template>
 				<template #action>