From c79360182af0f4c827518033073870027068450b Mon Sep 17 00:00:00 2001 From: Luutzen Dijkstra Date: Wed, 1 Jan 2025 13:51:38 +0100 Subject: [PATCH 01/10] feature(3331): made board, overview, stack and search result cards width behave more dynamic Signed-off-by: Luutzen Dijkstra --- src/components/board/Board.vue | 22 +-- src/components/board/Stack.vue | 23 ++- src/components/cards/CardBadges.vue | 4 + src/components/cards/CardCover.vue | 4 +- src/components/cards/CardItem.vue | 20 +-- src/components/overview/Overview.vue | 149 +++++++++++------- src/components/search/GlobalSearchResults.vue | 70 ++++---- src/components/search/Placeholder.vue | 5 +- src/css/variables.scss | 12 +- 9 files changed, 170 insertions(+), 139 deletions(-) diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue index 3f25d99dd..f99870b0e 100644 --- a/src/components/board/Board.vue +++ b/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; + overflow: auto; flex-grow: 1; + scrollbar-gutter: stable; } /** @@ -297,11 +294,14 @@ export default { .smooth-dnd-container.horizontal { display: flex; align-items: stretch; - height: 100%; + gap: $board-gap; + padding: 0 $board-gap; &: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; @@ -309,16 +309,10 @@ export default { position: relative; .smooth-dnd-container.vertical { - flex-grow: 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; - overflow-y: auto; - padding-top: 15px; - margin-top: -10px; + gap: $stack-gap; + padding: 5px 0 $stack-gap; scrollbar-gutter: stable; } diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue index 92d7c0b5c..afaced99c 100644 --- a/src/components/board/Stack.vue +++ b/src/components/board/Stack.vue @@ -365,34 +365,32 @@ 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); + width: 100%; height: 20px; top: 30px; left: 0px; 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%); } @@ -404,8 +402,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 +418,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 +429,6 @@ export default { } form { - margin: -4px; input { font-weight: bold; padding: 0 6px; @@ -459,8 +457,6 @@ export default { 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 +477,6 @@ export default { input { border: none; margin: 0; - padding: 4px; } } diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue index 36b25459b..329032169 100644 --- a/src/components/cards/CardBadges.vue +++ b/src/components/cards/CardBadges.vue @@ -101,6 +101,8 @@ export default { diff --git a/src/components/search/Placeholder.vue b/src/components/search/Placeholder.vue index 0921891fd..be6041cde 100644 --- a/src/components/search/Placeholder.vue +++ b/src/components/search/Placeholder.vue @@ -62,14 +62,13 @@ export default { $clickable-area: var(--default-clickable-area); .card--placeholder { - width: $stack-width; - margin-right: $stack-spacing; + min-width: $card-min-width; + max-width: $card-min-width; padding: $card-padding; transition: box-shadow 0.1s ease-in-out; box-shadow: 0 0 2px 0 var(--color-box-shadow); border-radius: var(--border-radius-large); font-size: 100%; - margin-bottom: $card-spacing; height: 100px; } diff --git a/src/css/variables.scss b/src/css/variables.scss index 6d6714934..884675d4e 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -2,8 +2,10 @@ * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */ - $card-spacing: 8px; - $card-padding: 4px; - $stack-spacing: 12px; - $stack-width: 280px; - $board-spacing: 16px; + $card-min-width: 216px; + $card-max-width: 300px; + $card-padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 2) var(--default-grid-baseline); + $card-gap: calc(var(--default-grid-baseline) * 3); + $card-image-margin: calc(var(--default-grid-baseline) * -1); + $stack-gap: calc(var(--default-grid-baseline) * 3); + $board-gap: calc(var(--default-grid-baseline) * 4); From 31978ac090a05275bb7893f8eb28eed0b6c81c29 Mon Sep 17 00:00:00 2001 From: Luutzen Dijkstra Date: Wed, 1 Jan 2025 13:52:11 +0100 Subject: [PATCH 02/10] fix(3331): fixed border around add list form in boards Signed-off-by: Luutzen Dijkstra --- css/deck.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/deck.css b/css/deck.css index ce15eb1f5..d1d92ea97 100644 --- a/css/deck.css +++ b/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; } From b25d2b13d289ccfdbd8ea004260548f44ba2af18 Mon Sep 17 00:00:00 2001 From: Luutzen Dijkstra Date: Wed, 1 Jan 2025 13:52:30 +0100 Subject: [PATCH 03/10] feature(3331): use existingIndex to define existingCard Signed-off-by: Luutzen Dijkstra --- src/store/card.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/card.js b/src/store/card.js index 556a52a2e..eea4211db 100644 --- a/src/store/card.js +++ b/src/store/card.js @@ -189,7 +189,7 @@ export default { card.assignedUsers = card.assignedUsers || [] const existingIndex = state.cards.findIndex(_card => _card.id === card.id) if (existingIndex !== -1) { - const existingCard = state.cards.find(_card => _card.id === card.id) + const existingCard = state.cards[existingIndex] Vue.set(state.cards, existingIndex, Object.assign({}, existingCard, card)) } else { state.cards.push(card) From ef5bd92dbe5cf376f7e14587bd5386926d10a0f3 Mon Sep 17 00:00:00 2001 From: Luutzen Dijkstra Date: Wed, 1 Jan 2025 13:52:46 +0100 Subject: [PATCH 04/10] fix(3331): bind title attribute on h3 in stack Signed-off-by: Luutzen Dijkstra --- src/components/board/Stack.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue index afaced99c..42e79f649 100644 --- a/src/components/board/Stack.vue +++ b/src/components/board/Stack.vue @@ -14,10 +14,10 @@ {{ stack.title }}

From 0dcfbc0bc5f0890072c37b99b54261449d89fec0 Mon Sep 17 00:00:00 2001 From: Luutzen Dijkstra Date: Wed, 1 Jan 2025 13:53:01 +0100 Subject: [PATCH 05/10] feature(3331): improve accessibility attributes for overview column titles Signed-off-by: Luutzen Dijkstra --- src/components/overview/Overview.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/overview/Overview.vue b/src/components/overview/Overview.vue index ca3ed5a16..8e3ab286f 100644 --- a/src/components/overview/Overview.vue +++ b/src/components/overview/Overview.vue @@ -16,7 +16,10 @@
-

{{ t('deck', columnProps.title) }}

+

{{ t('deck', columnProps.title) }}