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

fix: Adapt spacing to new compact design

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2024-08-31 11:45:33 +02:00
parent a0bcbc5cc6
commit cf0b90369a
5 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Controls.vue
View File

@@ -544,7 +544,7 @@ export default {
.filter--item { .filter--item {
input + label { input + label {
display: block; display: block;
padding: 6px 0; padding: var(--default-grid-baseline) 0;
.avatardiv { .avatardiv {
vertical-align: middle; vertical-align: middle;
margin-bottom: 2px; margin-bottom: 2px;

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

@@ -285,7 +285,9 @@ export default {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: $stack-spacing; // Margin left instead of padidng to avoid jumps on dropping a card
margin-left: $stack-spacing;
padding-right: $stack-spacing;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding-top: 15px; padding-top: 15px;

10
src/components/cards/CardCover.vue
View File

@@ -68,9 +68,9 @@ export default {
.card-cover { .card-cover {
height: 100px; height: 100px;
display: flex; display: flex;
margin-top: -8px; margin-top: -6px;
margin-left: -8px; margin-left: -6px;
margin-right: -8px; margin-right: -6px;
.image-wrapper { .image-wrapper {
flex: 1; flex: 1;
@@ -79,10 +79,10 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
&.rounded-left { &.rounded-left {
border-top-left-radius: 10px; border-top-left-radius: var(--border-radius-large);
} }
&.rounded-right { &.rounded-right {
border-top-right-radius: 10px; border-top-right-radius: var(--border-radius-large);
} }
} }
} }

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

@@ -290,11 +290,10 @@ export default {
background-color: var(--color-main-background); background-color: var(--color-main-background);
margin-bottom: $card-spacing; margin-bottom: $card-spacing;
padding: var(--default-grid-baseline) $card-padding; padding: var(--default-grid-baseline) $card-padding;
border: 2px solid var(--color-border); border: 2px solid var(--color-border-dark);
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--default-grid-baseline);
&:deep(*) { &:deep(*) {
cursor: pointer; cursor: pointer;
@@ -317,7 +316,7 @@ export default {
h4 { h4 {
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
padding: 6px; padding: var(--default-grid-baseline);
flex-grow: 1; flex-grow: 1;
font-size: 100%; font-size: 100%;
overflow: hidden; overflow: hidden;
@@ -363,7 +362,8 @@ export default {
.card-labels { .card-labels {
display: flex; display: flex;
align-items: end; align-items: end;
margin-bottom: var(--default-grid-baseline); padding-left: var(--default-grid-baseline);
padding-top: var(--default-grid-baseline);
.labels { .labels {
flex-wrap: wrap; flex-wrap: wrap;
@@ -403,7 +403,6 @@ export default {
display: flex; display: flex;
height: 32px; height: 32px;
width: 32px; width: 32px;
margin-top: 6px;
} }
&.has-labels { &.has-labels {
padding-bottom: $card-padding; padding-bottom: $card-padding;

2
src/components/overview/Overview.vue
View File

@@ -168,11 +168,13 @@ export default {
.dashboard-column { .dashboard-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: $stack-width;
width: $stack-width; width: $stack-width;
margin-left: $stack-spacing; margin-left: $stack-spacing;
margin-right: $stack-spacing; margin-right: $stack-spacing;
h3 { h3 {
font-size: var(--default-font-size);
margin: -6px; margin: -6px;
margin-bottom: 12px; margin-bottom: 12px;
padding: 6px 13px; padding: 6px 13px;