Merge pull request #6640 from ludij/feature/3331-dynamic-column-width

Feature/3331 dynamic column width

Author: luka-nextcloud

css/deck.css

@@ -14,6 +14,7 @@
 
 input[type=submit].icon-confirm {
 	border-color: var(--color-border-maxcontrast) !important;
+	border-style: solid;
 	border-left: none;
 }
 

src/components/board/Board.vue

@@ -276,18 +276,15 @@ export default {
 		position: relative;
 		width: 100%;
 		height: 100%;
-		max-height: calc(100vh - 50px);
 		display: flex;
 		flex-direction: column;
 	}
 
 	.board {
-		padding-left: $board-spacing;
 		position: relative;
-		max-height: calc(100% - var(--default-clickable-area));
-		overflow: hidden;
 		overflow-x: auto;
 		flex-grow: 1;
+		scrollbar-gutter: stable;
 	}
 
 	/**
@@ -297,28 +294,29 @@ export default {
 	.smooth-dnd-container.horizontal {
 		display: flex;
 		align-items: stretch;
+		gap: $board-gap;
+		padding: 0 $board-gap;
 		height: 100%;
 
 		&:deep(.stack-draggable-wrapper.smooth-dnd-draggable-wrapper) {
 			display: flex;
 			height: auto;
+			flex: 0 1 $card-max-width;
+			min-width: $card-min-width;
 
 			.stack {
 				display: flex;
 				flex-direction: column;
 				position: relative;
 
 				.smooth-dnd-container.vertical {
-					flex-grow: 1;
+					$margin-x: calc($stack-gap * -1);
 					display: flex;
 					flex-direction: column;
-					// Margin left instead of padidng to avoid jumps on dropping a card
-					margin-left: $stack-spacing;
-					padding-right: $stack-spacing;
-					overflow-x: hidden;
+					gap: $stack-gap;
+					padding: $stack-gap;
+					margin: 0 $margin-x;
 					overflow-y: auto;
-					padding-top: 15px;
-					margin-top: -10px;
 					scrollbar-gutter: stable;
 				}
 

src/components/board/Stack.vue

@@ -14,10 +14,10 @@
 					{{ stack.title }}
 				</h3>
 				<h3 v-else-if="!editing"
-					title="stack.title"
 					dir="auto"
 					tabindex="0"
 					:aria-label="stack.title"
+					:title="stack.title"
 					class="stack__title"
 					@click="startEditing(stack)"
 					@keydown.enter="startEditing(stack)">
@@ -108,7 +108,7 @@
 		</Container>
 
 		<transition name="slide-bottom" appear>
-			<div v-show="showAddCard" class="stack__card-add">
+			<div v-if="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>
@@ -365,37 +365,31 @@ export default {
 	@import './../../css/variables';
 
 	.stack {
-		width: $stack-width + $stack-spacing * 3;
+		width: 100%;
 	}
 
 	.stack__header {
 		display: flex;
 		position: sticky;
 		top: 0;
+		height: var(--default-clickable-area);
 		z-index: 100;
-		padding-left: $card-spacing;
-		padding-right: $card-spacing;
-		margin: 6px;
 		margin-top: 0;
 		cursor: grab;
 		background-color: var(--color-main-background);
 
 		// Smooth fade out of the cards at the top
 		&:before {
-			content: ' ';
+			content: '';
 			display: block;
 			position: absolute;
-			width: calc(100% - 16px);
-			height: 20px;
-			top: 30px;
-			left: 0px;
+			width: 100%;
+			height: $stack-gap;
+			bottom: 0;
 			z-index: 99;
 			transition: top var(--animation-slow);
-
-			background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(255, 255, 255, 0) 100%);
-			body.theme--dark & {
-				background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(0, 0, 0, 0) 100%);
-			}
+			background-image: linear-gradient(180deg, var(--color-main-background) 0%, transparent 100%);
+			transform: translateY(100%);
 		}
 
 		& > * {
@@ -404,8 +398,10 @@ export default {
 		}
 
 		h3, form {
-			flex-grow: 1;
+			flex: 1 1 auto;
+			min-width: 0;
 			display: flex;
+			align-items: center;
 			cursor: inherit;
 			margin: 0;
 
@@ -418,9 +414,8 @@ export default {
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			max-width: calc($stack-width - 60px);
 			border-radius: 3px;
-			padding: 4px 4px;
+			padding: $card-padding;
 			font-size: var(--default-font-size);
 
 			&:focus-visible {
@@ -430,7 +425,6 @@ export default {
 		}
 
 		form {
-			margin: -4px;
 			input {
 				font-weight: bold;
 				padding: 0 6px;
@@ -453,14 +447,25 @@ export default {
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
-		margin-bottom: 5px;
-		padding-top: var(--default-grid-baseline);
+		padding-bottom: $stack-gap;
 		background-color: var(--color-main-background);
+		position: relative;
+
+		// Smooth fade out of the cards at the top
+		&:before {
+			content: '';
+			display: block;
+			position: absolute;
+			width: 100%;
+			height: $stack-gap;
+			z-index: 99;
+			transition: bottom var(--animation-slow);
+			background-image: linear-gradient(0deg, var(--color-main-background) 0%, transparent 100%);
+			transform: translateY(-100%);
+		}
 
 		form {
 			display: flex;
-			margin-left: $stack-spacing;
-			margin-right: $stack-spacing;
 			width: 100%;
 			border: 2px solid var(--color-border-maxcontrast);
 			border-radius: var(--border-radius-large);
@@ -481,7 +486,6 @@ export default {
 		input {
 			border: none;
 			margin: 0;
-			padding: 4px;
 		}
 	}
 

src/components/cards/CardBadges.vue

@@ -101,6 +101,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+	@import './../../css/variables';
+
 	.badges {
 		display: flex;
 		width: 100%;
@@ -111,6 +113,7 @@ export default {
 		.icon-badge {
 			color: var(--color-text-maxcontrast);
 			display: flex;
+			align-items: center;
 			margin-right: 2px;
 
 			span,
@@ -125,6 +128,7 @@ export default {
 		flex-direction: row;
 		flex-wrap: wrap;
 		gap: 3px;
+		height: var(--default-clickable-area);
 	}
 
 	.badges .icon.due {

src/components/cards/CardCover.vue

@@ -4,13 +4,10 @@
 -->
 
 <template>
-	<div v-if="referencePreview" class="card-cover">
-		<div class="image-wrapper rounded-left rounded-right" :style="{ backgroundImage: `url(${referencePreview})`}" />
-	</div>
-	<div v-else-if="cardId && ( attachments.length > 0 )" class="card-cover">
-		<div v-for="(attachment, index) in attachments"
+	<div v-if="cardId && ( attachments.length > 0 )" class="card-cover">
+		<div v-for="attachment in attachments"
 			:key="attachment.id"
-			:class="['image-wrapper', { 'rounded-left': index === 0 }, { 'rounded-right': index === attachments.length - 1 }]"
+			class="image-wrapper"
 			:style="{ backgroundImage: `url(${attachmentPreview(attachment)})` }" />
 	</div>
 </template>
@@ -77,22 +74,14 @@ export default {
 .card-cover {
 	height: 90px;
 	display: flex;
-	margin-top: -4px;
-	margin-left: -4px;
-	margin-right: -4px;
+	margin: $card-image-margin $card-image-margin 0;
 
 	.image-wrapper {
 		flex: 1;
 		position: relative;
 		background-size: cover;
 		background-repeat: no-repeat;
 		background-position: center center;
-		&.rounded-left {
-			border-top-left-radius: calc(var(--border-radius-large) - 1px);
-		}
-		&.rounded-right {
-			border-top-right-radius: calc(var(--border-radius-large) - 1px);
-		}
 	}
 }
 </style>

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, 'card__highlight': highlight}"
+			:class="{'compact': compactMode, 'current-card': currentCard, 'no-labels': !hasLabels, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
 			tag="div"
 			:tabindex="0"
 			class="card"
@@ -331,12 +331,13 @@ export default {
 		border-radius: var(--border-radius-large);
 		font-size: 100%;
 		background-color: var(--color-main-background);
-		margin-bottom: $card-spacing;
-		padding: var(--default-grid-baseline) $card-padding;
+		padding: $card-padding;
 		border: 2px solid var(--color-border-dark);
 		width: 100%;
 		display: flex;
 		flex-direction: column;
+		gap: $card-gap;
+		overflow: hidden;
 
 		&:deep(*) {
 			cursor: pointer;
@@ -359,12 +360,10 @@ export default {
 			h4 {
 				font-weight: normal;
 				margin: 0;
-				padding: var(--default-grid-baseline);
 				flex-grow: 1;
 				font-size: 100%;
 				overflow: hidden;
 				word-wrap: break-word;
-				padding-left: 4px;
 				align-self: center;
 
 				:deep(a) {
@@ -374,9 +373,6 @@ export default {
 				&.editable {
 					span {
 						cursor: text;
-						padding-right: 8px;
-						padding-top: 3px;
-						padding-bottom: 3px;
 
 						&:focus, &:focus-visible {
 							outline: none;
@@ -385,6 +381,7 @@ export default {
 
 					&:focus-within {
 						outline: 2px solid var(--color-border-dark);
+						outline-offset: 4px;
 						border-radius: 3px;
 					}
 				}
@@ -427,8 +424,6 @@ export default {
 		.card-labels {
 			display: flex;
 			align-items: end;
-			padding-left: var(--default-grid-baseline);
-			padding-top: var(--default-grid-baseline);
 
 			.labels {
 				flex-wrap: wrap;
@@ -444,7 +439,7 @@ export default {
 
 	.card-related {
 		display: flex;
-		padding: 12px;
+		padding: 4px;
 		padding-bottom: 0px;
 		color: var(--color-text-maxcontrast);
 
@@ -469,8 +464,8 @@ export default {
 			height: 32px;
 			width: 32px;
 		}
-		&.has-labels {
-			padding-bottom: $card-padding;
+		&.no-labels {
+			padding-bottom: var(--default-grid-baseline);
 		}
 		.labels {
 			height: 6px;