ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: Fix spacing and reserved scrollbar space

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2023-11-10 00:29:13 +01:00
parent 8f8597def7
commit 41d17494d4
3 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/board/Board.vue
View File

@@ -252,6 +252,7 @@ export default {
scrollbar-gutter: stable; scrollbar-gutter: stable;
padding-top: 15px; padding-top: 15px;
margin-top: -10px; margin-top: -10px;
scrollbar-gutter: stable;
} }
.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper { .smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {

8
src/components/board/Stack.vue
View File

@@ -26,10 +26,9 @@
<div v-click-outside="stopCardCreation" <div v-click-outside="stopCardCreation"
class="stack__header" class="stack__header"
:class="{'stack__header--add': showAddCard}" :class="{'stack__header--add': showAddCard}"
tabindex="0"
:aria-label="stack.title"> :aria-label="stack.title">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<h3 v-if="!canManage || isArchived"> <h3 v-if="!canManage || isArchived" tabindex="0">
{{ stack.title }} {{ stack.title }}
</h3> </h3>
<h3 v-else-if="!editing" <h3 v-else-if="!editing"
@@ -330,8 +329,6 @@ export default {
.stack { .stack {
width: $stack-width + $stack-spacing * 3; width: $stack-width + $stack-spacing * 3;
margin-left: math.div($stack-spacing, 2);
margin-right: math.div($stack-spacing, 2);
} }
.stack__header { .stack__header {
@@ -340,6 +337,7 @@ export default {
top: 0; top: 0;
z-index: 100; z-index: 100;
padding-left: $card-spacing; padding-left: $card-spacing;
padding-right: $card-spacing;
cursor: grab; cursor: grab;
min-height: 44px; min-height: 44px;
@@ -351,7 +349,7 @@ export default {
width: 100%; width: 100%;
height: 20px; height: 20px;
top: 30px; top: 30px;
right: 10px; left: 0px;
z-index: 99; z-index: 99;
transition: top var(--animation-slow); transition: top var(--animation-slow);

6
src/components/cards/CardItem.vue
View File

@@ -220,6 +220,7 @@ export default {
background-color: var(--color-main-background); background-color: var(--color-main-background);
margin-bottom: $card-spacing; margin-bottom: $card-spacing;
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
width: 100%;
&:deep(*) { &:deep(*) {
cursor: pointer; cursor: pointer;
@@ -232,6 +233,11 @@ export default {
border: 2px solid var(--color-primary-element); border: 2px solid var(--color-primary-element);
} }
&:focus, &:focus-visible, &:focus-within, &:hover {
outline: none;
border: 2px solid var(--color-primary-element);
}
.card-upper { .card-upper {
display: flex; display: flex;
min-height: 44px; min-height: 44px;