local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: restore styling / fix styling issues

Browse source
This commit is contained in:
Dominik Pschenitschni 2022-02-09 00:26:56 +01:00
parent e2c81d840f
commit 45e1ae66d6
No known key found for this signature in database
GPG key ID: B257AC0149F43A77
1 changed files with 43 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/views/list/ListKanban.vue
View file

@ -2,12 +2,12 @@
<ListWrapper class="list-kanban" :list-id="listId" viewName="kanban"> <ListWrapper class="list-kanban" :list-id="listId" viewName="kanban">
<template #header> <template #header>
<div class="filter-container" v-if="isSavedFilter"> <div class="filter-container" v-if="isSavedFilter">
<div class="items"> <div class="items">
<filter-popup <filter-popup
v-model="params" v-model="params"
@update:modelValue="loadBuckets" @update:modelValue="loadBuckets"
/> />
</div> </div>
</div> </div>
</template> </template>
@ -541,7 +541,10 @@ export default {
const updatedData = { const updatedData = {
id: bucket.id, id: bucket.id,
position: calculateItemPosition(bucketBefore !== null ? bucketBefore.position : null, bucketAfter !== null ? bucketAfter.position : null), position: calculateItemPosition(
bucketBefore !== null ? bucketBefore.position : null,
bucketAfter !== null ? bucketAfter.position : null,
),
} }
this.$store.dispatch('kanban/updateBucket', updatedData) this.$store.dispatch('kanban/updateBucket', updatedData)
@ -562,9 +565,14 @@ export default {
}, },
shouldAcceptDrop(bucket) { shouldAcceptDrop(bucket) {
return bucket.id === this.sourceBucket || // When dragging from a bucket who has its limit reached, dragging should still be possible return (
bucket.limit === 0 || // If there is no limit set, dragging & dropping should always work // When dragging from a bucket who has its limit reached, dragging should still be possible
bucket.tasks.length < bucket.limit // Disallow dropping to buckets which have their limit reached bucket.id === this.sourceBucket ||
// If there is no limit set, dragging & dropping should always work
bucket.limit === 0 ||
// Disallow dropping to buckets which have their limit reached
bucket.tasks.length < bucket.limit
)
}, },
dragstart(bucket) { dragstart(bucket) {
@ -613,7 +621,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
} }
.kanban { .kanban {
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
height: calc(#{$crazy-height-calculation}); height: calc(#{$crazy-height-calculation});
@ -629,13 +636,22 @@ $filter-container-height: '1rem - #{$switch-view-height}';
} }
.ghost { .ghost {
background: transparent !important; position: relative;
border: 3px dashed var(--grey-300) !important;
box-shadow: none !important;
* { * {
opacity: 0; opacity: 0;
} }
&::after {
content: '';
position: absolute;
display: block;
top: 0.25rem;
right: 0.5rem;
bottom: 0.25rem;
left: 0.5rem;
border: 3px dashed var(--grey-300);
border-radius: $radius;
}
} }
.bucket { .bucket {
@ -656,12 +672,14 @@ $filter-container-height: '1rem - #{$switch-view-height}';
.task-item { .task-item {
background-color: var(--grey-100); background-color: var(--grey-100);
padding: .5rem .5rem 0; padding: .25rem .5rem;
}
&:first-of-type {
.move-card-move { padding-top: .5rem;
transition: transform $transition-duration; }
&:last-of-type {
padding-bottom: .5rem;
}
} }
.no-move { .no-move {
@ -758,8 +776,13 @@ $filter-container-height: '1rem - #{$switch-view-height}';
} }
.task-dragging { .task-dragging {
transform: rotateZ(3deg);
transition: transform 0.18s ease; transition: transform 0.18s ease;
transform: rotateZ(3deg) }
.move-card-move {
transform: rotateZ(3deg);
transition: transform $transition-duration;
} }
.move-card-leave-from, .move-card-leave-from,