Skip to content

Commit 3115363

Browse files
ludijluka-nextcloud
ludij
authored and
luka-nextcloud
committed
feature(3331): made board, overview, stack and search result cards width behave more dynamic
Signed-off-by: Luutzen Dijkstra <[email protected]>
1 parent 6ace186 commit 3115363

File tree

9 files changed

+170
-139
lines changed

9 files changed

+170
-139
lines changed

‎src/components/board/Board.vue‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -276,18 +276,15 @@ export default {
276276
position: relative;
277277
width: 100%;
278278
height: 100%;
279-
max-height: calc(100vh - 50px);
280279
display: flex;
281280
flex-direction: column;
282281
}
283282
284283
.board {
285-
padding-left: $board-spacing;
286284
position: relative;
287-
max-height: calc(100% - var(--default-clickable-area));
288-
overflow: hidden;
289-
overflow-x: auto;
285+
overflow: auto;
290286
flex-grow: 1;
287+
scrollbar-gutter: stable;
291288
}
292289
293290
/**
@@ -297,28 +294,25 @@ export default {
297294
.smooth-dnd-container.horizontal {
298295
display: flex;
299296
align-items: stretch;
300-
height: 100%;
297+
gap: $board-gap;
298+
padding: 0 $board-gap;
301299
302300
&:deep(.stack-draggable-wrapper.smooth-dnd-draggable-wrapper) {
303301
display: flex;
304302
height: auto;
303+
flex: 0 1 $card-max-width;
304+
min-width: $card-min-width;
305305
306306
.stack {
307307
display: flex;
308308
flex-direction: column;
309309
position: relative;
310310
311311
.smooth-dnd-container.vertical {
312-
flex-grow: 1;
313312
display: flex;
314313
flex-direction: column;
315-
// Margin left instead of padidng to avoid jumps on dropping a card
316-
margin-left: $stack-spacing;
317-
padding-right: $stack-spacing;
318-
overflow-x: hidden;
319-
overflow-y: auto;
320-
padding-top: 15px;
321-
margin-top: -10px;
314+
gap: $stack-gap;
315+
padding: 5px 0 $stack-gap;
322316
scrollbar-gutter: stable;
323317
}
324318

‎src/components/board/Stack.vue‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -365,34 +365,32 @@ export default {
365365
@import './../../css/variables';
366366
367367
.stack {
368-
width: $stack-width + $stack-spacing * 3;
368+
width: 100%;
369369
}
370370
371371
.stack__header {
372372
display: flex;
373373
position: sticky;
374374
top: 0;
375+
height: var(--default-clickable-area);
375376
z-index: 100;
376-
padding-left: $card-spacing;
377-
padding-right: $card-spacing;
378-
margin: 6px;
379377
margin-top: 0;
380378
cursor: grab;
381379
background-color: var(--color-main-background);
382380
383381
// Smooth fade out of the cards at the top
384382
&:before {
385-
content: ' ';
383+
content: '';
386384
display: block;
387385
position: absolute;
388-
width: calc(100% - 16px);
386+
width: 100%;
389387
height: 20px;
390388
top: 30px;
391389
left: 0px;
392390
z-index: 99;
393391
transition: top var(--animation-slow);
394-
395392
background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(255, 255, 255, 0) 100%);
393+
396394
body.theme--dark & {
397395
background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(0, 0, 0, 0) 100%);
398396
}
@@ -404,8 +402,10 @@ export default {
404402
}
405403
406404
h3, form {
407-
flex-grow: 1;
405+
flex: 1 1 auto;
406+
min-width: 0;
408407
display: flex;
408+
align-items: center;
409409
cursor: inherit;
410410
margin: 0;
411411
@@ -418,9 +418,8 @@ export default {
418418
white-space: nowrap;
419419
overflow: hidden;
420420
text-overflow: ellipsis;
421-
max-width: calc($stack-width - 60px);
422421
border-radius: 3px;
423-
padding: 4px 4px;
422+
padding: $card-padding;
424423
font-size: var(--default-font-size);
425424
426425
&:focus-visible {
@@ -430,7 +429,6 @@ export default {
430429
}
431430
432431
form {
433-
margin: -4px;
434432
input {
435433
font-weight: bold;
436434
padding: 0 6px;
@@ -459,8 +457,6 @@ export default {
459457
460458
form {
461459
display: flex;
462-
margin-left: $stack-spacing;
463-
margin-right: $stack-spacing;
464460
width: 100%;
465461
border: 2px solid var(--color-border-maxcontrast);
466462
border-radius: var(--border-radius-large);
@@ -481,7 +477,6 @@ export default {
481477
input {
482478
border: none;
483479
margin: 0;
484-
padding: 4px;
485480
}
486481
}
487482

‎src/components/cards/CardBadges.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ export default {
101101
</script>
102102

103103
<style lang="scss" scoped>
104+
@import './../../css/variables';
105+
104106
.badges {
105107
display: flex;
106108
width: 100%;
@@ -111,6 +113,7 @@ export default {
111113
.icon-badge {
112114
color: var(--color-text-maxcontrast);
113115
display: flex;
116+
align-items: center;
114117
margin-right: 2px;
115118
116119
span,
@@ -125,6 +128,7 @@ export default {
125128
flex-direction: row;
126129
flex-wrap: wrap;
127130
gap: 3px;
131+
height: var(--default-clickable-area);
128132
}
129133
130134
.badges .icon.due {

‎src/components/cards/CardCover.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,7 @@ export default {
7777
.card-cover {
7878
height: 90px;
7979
display: flex;
80-
margin-top: -4px;
81-
margin-left: -4px;
82-
margin-right: -4px;
80+
margin: $card-image-margin $card-image-margin 0;
8381
8482
.image-wrapper {
8583
flex: 1;

‎src/components/cards/CardItem.vue‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<template>
77
<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
88
<div :ref="`card${card.id}`"
9-
:class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
9+
:class="{'compact': compactMode, 'current-card': currentCard, 'no-labels': !hasLabels, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
1010
tag="div"
1111
:tabindex="0"
1212
class="card"
@@ -331,12 +331,12 @@ export default {
331331
border-radius: var(--border-radius-large);
332332
font-size: 100%;
333333
background-color: var(--color-main-background);
334-
margin-bottom: $card-spacing;
335-
padding: var(--default-grid-baseline) $card-padding;
334+
padding: $card-padding;
336335
border: 2px solid var(--color-border-dark);
337336
width: 100%;
338337
display: flex;
339338
flex-direction: column;
339+
gap: $card-gap;
340340
341341
&:deep(*) {
342342
cursor: pointer;
@@ -359,12 +359,10 @@ export default {
359359
h4 {
360360
font-weight: normal;
361361
margin: 0;
362-
padding: var(--default-grid-baseline);
363362
flex-grow: 1;
364363
font-size: 100%;
365364
overflow: hidden;
366365
word-wrap: break-word;
367-
padding-left: 4px;
368366
align-self: center;
369367
370368
:deep(a) {
@@ -374,9 +372,6 @@ export default {
374372
&.editable {
375373
span {
376374
cursor: text;
377-
padding-right: 8px;
378-
padding-top: 3px;
379-
padding-bottom: 3px;
380375
381376
&:focus, &:focus-visible {
382377
outline: none;
@@ -385,6 +380,7 @@ export default {
385380
386381
&:focus-within {
387382
outline: 2px solid var(--color-border-dark);
383+
outline-offset: 4px;
388384
border-radius: 3px;
389385
}
390386
}
@@ -427,8 +423,6 @@ export default {
427423
.card-labels {
428424
display: flex;
429425
align-items: end;
430-
padding-left: var(--default-grid-baseline);
431-
padding-top: var(--default-grid-baseline);
432426
433427
.labels {
434428
flex-wrap: wrap;
@@ -444,7 +438,7 @@ export default {
444438
445439
.card-related {
446440
display: flex;
447-
padding: 12px;
441+
padding: 4px;
448442
padding-bottom: 0px;
449443
color: var(--color-text-maxcontrast);
450444
@@ -469,8 +463,8 @@ export default {
469463
height: 32px;
470464
width: 32px;
471465
}
472-
&.has-labels {
473-
padding-bottom: $card-padding;
466+
&.no-labels {
467+
padding-bottom: var(--default-grid-baseline);
474468
}
475469
.labels {
476470
height: 6px;

0 commit comments

Comments
 (0)