fix: kanban card spacing (#1005)

Co-authored-by: kolaente <k@knt.li>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: vikunja/frontend#1005
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad 2021-11-16 21:44:07 +00:00
parent 26213d5e8c
commit ae5d3ecac5
7 changed files with 10 additions and 18 deletions

View File

@ -500,7 +500,6 @@ $gantt-vertical-border-color: $grey-100;
.tasks { .tasks {
max-width: unset !important; max-width: unset !important;
margin: 0;
border-top: $gantt-border; border-top: $gantt-border;
.row { .row {

View File

@ -1,5 +1,6 @@
<template> <template>
<div <div
class="task loader-container draggable"
:class="{ :class="{
'is-loading': loadingInternal || loading, 'is-loading': loadingInternal || loading,
'draggable': !(loadingInternal || loading), 'draggable': !(loadingInternal || loading),
@ -9,7 +10,6 @@
@click.ctrl="() => toggleTaskDone(task)" @click.ctrl="() => toggleTaskDone(task)"
@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })" @click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
@click.meta="() => toggleTaskDone(task)" @click.meta="() => toggleTaskDone(task)"
class="task loader-container draggable"
> >
<span class="task-id"> <span class="task-id">
<Done class="kanban-card__done" :is-done="task.done" variant="small" /> <Done class="kanban-card__done" :is-done="task.done" variant="small" />

View File

@ -319,6 +319,10 @@ export default {
margin: 0; margin: 0;
} }
.tasks {
padding: .5rem;
}
.task { .task {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

View File

@ -2,8 +2,6 @@
// very hard to untangle // very hard to untangle
// they have many overwrites at different positions // they have many overwrites at different positions
.tasks { .tasks {
margin-top: 1rem;
padding: 0;
text-align: left; text-align: left;
@ -26,19 +24,6 @@
margin: 1rem -0.5rem; margin: 1rem -0.5rem;
} }
.task {
margin: 0 .5rem;
&:first-child {
margin-top: .5rem;
}
&:last-child {
margin-bottom: .5rem;
border-bottom: none;
}
}
.checklist-summary { .checklist-summary {
padding-left: .5rem; padding-left: .5rem;
font-size: .9rem; font-size: .9rem;

View File

@ -636,7 +636,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
.tasks { .tasks {
max-height: calc(#{$crazy-height-calculation-tasks}); max-height: calc(#{$crazy-height-calculation-tasks});
overflow: auto; overflow: auto;
margin-top: 0;
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height}); max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});

View File

@ -323,6 +323,7 @@ export default {
.tasks { .tasks {
width: 100%; width: 100%;
padding: .5rem;
.ghost { .ghost {
border-radius: $radius; border-radius: $radius;

View File

@ -271,6 +271,10 @@ h3 {
} }
} }
.tasks {
padding: .5rem;
}
.llama-cool { .llama-cool {
margin-top: 2rem; margin-top: 2rem;
} }