nextcloud · juliusknorr · Mar 27, 2025 · Jul 15, 2024
diff --git a/css/deck.css b/css/deck.css
@@ -7,3 +7,13 @@
 	background-image: url(../img/deck.svg);
 	filter: var(--background-invert-if-dark);
 }
+
+input[type=submit].icon-confirm {
+	border-color: var(--color-border-maxcontrast) !important;
+	border-left: none;
+}
+
+input[type=text]:focus+input[type=submit].icon-confirm,
+input[type=text]:hover+input[type=submit].icon-confirm {
+	border-color: var(--color-main-text) !important;
+}
diff --git a/src/components/ActivityEntry.vue b/src/components/ActivityEntry.vue
@@ -30,7 +30,7 @@
 			</div>
 		</div>
 		<!-- FIXME ins/del tags do no longer work with activity so we should get rid of that -->
 		<p v-if="activity.message" class="activity--message" v-html="sanitizedMessage" />
 	</div>
 </template>

@@ -137,7 +137,7 @@
 			margin-left: 10px;
 		}
 		.activity--message {
-			margin-left: 44px;
+			margin-left: var(--default-clickable-area);
 			color: var(--color-text-light);
 			margin-bottom: 10px;
 		}

diff --git a/src/components/Controls.vue b/src/components/Controls.vue
@@ -493,8 +493,8 @@ export default {
 	.controls {
 		display: flex;
 		margin: 5px;
-		height: 44px;
-		padding-left: 44px;
+		height: var(--default-clickable-area);
+		padding-left: var(--default-clickable-area);
 
 		.board-title {
 			display: flex;
@@ -524,8 +524,8 @@ export default {
 
 	#app-navigation-toggle-custom {
 		position: static;
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		cursor: pointer;
 		opacity: 1;
 		display: inline-block !important;
@@ -584,8 +584,8 @@ export default {
 	.filter-button {
 		padding: 0;
 		border-radius: 50%;
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 
 		&[data-popper-shown] {
 			background-color: var(--color-background-hover);

diff --git a/src/components/SessionList.vue b/src/components/SessionList.vue
@@ -72,7 +72,7 @@ export default {
 <style scoped lang="scss">
 
 .avatar-list {
-	min-height: 44px;
+	min-height: var(--default-clickable-area);
 	align-items: center;
 	padding-right: 0.5em;
 	border: none;

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
@@ -277,7 +277,7 @@ export default {
 	.board {
 		padding-left: $board-spacing;
 		position: relative;
-		max-height: calc(100% - 44px);
+		max-height: calc(100% - var(--default-clickable-area));
 		overflow: hidden;
 		overflow-x: auto;
 		flex-grow: 1;

diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
@@ -117,3 +117,12 @@ export default {
 	},
 }
 </script>
+
+<style scoped lang="scss">
+:deep {
+	.app-sidebar-tabs__tab-caption,
+	.app-sidebar-tabs__nav .checkbox-content__text {
+		white-space: normal !important;
+	}
+}
+</style>
diff --git a/src/components/board/DeletedTabSidebar.vue b/src/components/board/DeletedTabSidebar.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h3>{{ t('deck', 'Deleted lists') }}</h3>
+		<h5>{{ t('deck', 'Deleted lists') }}</h5>
 		<ul>
 			<li v-for="deletedStack in deletedStacks" :key="deletedStack.id">
 				<span class="icon icon-deck" />
@@ -14,7 +14,7 @@
 			</li>
 		</ul>
 
-		<h3>{{ t('deck', 'Deleted cards') }}</h3>
+		<h5>{{ t('deck', 'Deleted cards') }}</h5>
 		<ul>
 			<li v-for="deletedCard in deletedCards" :key="deletedCard.id">
 				<div class="icon icon-deck" />
@@ -98,7 +98,7 @@ export default {
 		}
 
 		* {
-			flex-basis: 44px;
+			flex-basis: var(--default-clickable-area);
 		}
 
 		.title {

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
@@ -287,7 +287,7 @@ export default {
 		},
 		startEditing(stack) {
 			if (this.dragging) {
-			  return
+				return
 			}
 
 			this.copiedStack = Object.assign({}, stack)
@@ -351,7 +351,7 @@ export default {
 		padding-left: $card-spacing;
 		padding-right: $card-spacing;
 		cursor: grab;
-		min-height: 44px;
+		min-height: var(--default-clickable-area);
 
 		// Smooth fade out of the cards at the top
 		&:before {
@@ -403,6 +403,7 @@ export default {
 			border-radius: 3px;
 			margin: 6px;
 			padding: 4px 4px;
+			font-size: 120%;
 
 			&:focus-visible {
 				outline: 2px solid var(--color-border-dark);
@@ -413,10 +414,17 @@ export default {
 		form {
 			margin: 2px 0;
 		}
+
+		:deep {
+			.action-item,
+			.v-popper--theme-dropdown {
+				display: flex;
+			}
+		}
 	}
 
 	.stack__card-add {
-		height: 44px;
+		height: var(--default-clickable-area);
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;

diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue
@@ -169,7 +169,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-	$clickable-area: 44px;
+	$clickable-area: var(--default-clickable-area);
 
 	.labels li {
 		display: flex;

diff --git a/src/components/boards/Boards.vue b/src/components/boards/Boards.vue
@@ -79,7 +79,7 @@ export default {
 
 <style lang="scss">
 	.board-list {
-		margin-top: -44px;
+		margin-top: - var(--default-clickable-area); //@TODO
 
 		.board-list-row {
 			align-items: center;
@@ -94,7 +94,7 @@ export default {
 
 		.board-list-header-row {
 			color: var(--color-text-lighter);
-			height: 44px;
+			height: var(--default-clickable-area);
 		}
 
 		.board-list-bullet-cell,

diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
@@ -280,10 +280,10 @@ export default {
 		gap: calc(var(--default-grid-baseline) * 3);
 
 		.icon-upload, .icon-folder {
-			padding-left: 44px;
+			padding-left: var(--default-clickable-area);
 			background-position: 16px center;
 			flex-grow: 1;
-			height: 44px;
+			height: var(--default-clickable-area);
 			margin-bottom: 12px;
 			text-align: left;
 		}
@@ -318,7 +318,7 @@ export default {
 		li.attachment {
 			display: flex;
 			padding: 3px;
-			min-height: 44px;
+			min-height: var(--default-clickable-area);
 
 			&.deleted {
 				opacity: .5;
@@ -366,7 +366,7 @@ export default {
 				}
 			}
 			button.icon-history {
-				width: 44px;
+				width: var(--default-clickable-area);
 			}
 			progress {
 				margin-top: 3px;

diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
@@ -229,7 +229,7 @@ section.app-sidebar__tab--active {
 	right: 0;
 	max-width: calc(100% - #{$modal-padding * 2});
 	padding: 0 14px;
-	height: 100%;
+	height: 97%;
 	overflow: initial;
 	user-select: text;
 	-webkit-user-select: text;

diff --git a/src/components/card/CommentItem.vue b/src/components/card/CommentItem.vue
@@ -209,7 +209,7 @@ export default {
 	@import '../../css/comments';
 
 	.reply {
-		margin: 0 0 0 44px;
+		margin: 0 0 0 var(--default-clickable-area);
 
 		&.reply--preview {
 			margin: 4px 0;

diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
@@ -57,7 +57,7 @@
 				id="description-preview"
 				dir="auto"
 				@click="clickedPreview"
 				v-html="renderedDescription" />
 			<p v-else-if="!descriptionEditing" class="placeholder" @click="showEditor()">
 				{{ t('deck', 'Write a description …') }}
 			</p>
@@ -387,7 +387,7 @@
 }
 
 .description__text :deep(.ProseMirror) {
-	padding-bottom: 44px;
+	padding-bottom: var(--default-clickable-area);
 }
 
 </style>

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
@@ -363,7 +363,7 @@ export default {
 				}
 			}
 			.card-menu {
-				height: 44px;
+				height: var(--default-clickable-area);
 				align-self: end;
 			}
 		}
@@ -416,7 +416,7 @@ export default {
 	}
 
 	.compact {
-		min-height: 44px;
+		min-height: var(--default-clickable-area);
 
 		.duedate {
 			margin-right: 0;

diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
@@ -90,7 +90,7 @@ export default {
 	.board-create {
 		order: 1;
 		display: flex;
-		height: 44px;
+		height: var(--default-clickable-area);
 
 		form {
 			display: flex;
@@ -103,8 +103,8 @@ export default {
 	}
 
 	.app-navigation-entry-bullet-wrapper {
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		.color0 {
 			width: 30px !important;
 			margin: 5px;

diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
@@ -336,10 +336,10 @@ export default {
 
 <style lang="scss" scoped>
 	.board-edit {
-		margin-left: 44px;
+		margin-left: var(--default-clickable-area);
 		order: 1;
 		display: flex;
-		height: 44px;
+		height: var(--default-clickable-area);
 
 		form {
 			display: flex;
@@ -352,8 +352,8 @@ export default {
 	}
 
 	.app-navigation-entry-bullet-wrapper {
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		.color0 {
 			width: 30px !important;
 			margin: 5px;

diff --git a/src/components/overview/Overview.vue b/src/components/overview/Overview.vue
@@ -175,7 +175,7 @@ export default {
 
 .overview {
 	position: relative;
-	height: calc(100% - 44px);
+	height: calc(100% - var(--default-clickable-area));
 	overflow-x: scroll;
 	display: flex;
 	align-items: stretch;

diff --git a/src/components/search/Placeholder.vue b/src/components/search/Placeholder.vue
@@ -55,7 +55,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../css/variables';
-$clickable-area: 44px;
+$clickable-area: var(--default-clickable-area);
 
 .card--placeholder {
 	width: $stack-width;

diff --git a/src/css/comments.scss b/src/css/comments.scss
@@ -5,16 +5,16 @@
 
 	.editor__content:deep {
 		flex-grow: 1;
-		margin-left: 44px;
+		margin-left: var(--default-clickable-area);
 
 		.ProseMirror {
 			width: 100%;
 		}
 	}
 
 	input[type='submit'] {
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		margin: 0;
 		padding: 13px;
 		background-color: transparent;
@@ -47,6 +47,6 @@
 }
 
 .comment--content {
-	margin-left: 44px;
+	margin-left: var(--default-clickable-area);
 	word-break: break-word;
 }