From 1f01567a99dd213f4b44d2bd8d613065731f0f8b Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Mon, 18 Oct 2021 14:20:31 +0200 Subject: [PATCH] feat: merge kanban.scss styles with component .ghost-task-drop class was removed because it was used nowhere. --- src/styles/components/_index.scss | 1 - src/styles/components/kanban.scss | 328 ------------------------------ src/views/list/views/Kanban.vue | 318 +++++++++++++++++++++++++++++ 3 files changed, 318 insertions(+), 329 deletions(-) delete mode 100644 src/styles/components/kanban.scss diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index 9060e7aad..75f6843ad 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -9,7 +9,6 @@ @import "teams"; @import "migrator"; @import "table-view"; -@import "kanban"; @import "list-backgrounds"; @import "namespaces"; @import "legal"; diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss deleted file mode 100644 index 420c28807..000000000 --- a/src/styles/components/kanban.scss +++ /dev/null @@ -1,328 +0,0 @@ -$bucket-background: $grey-100; -$task-background: $white; -$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1); -$bucket-width: 300px; -$bucket-header-height: 60px; -$bucket-right-margin: 1rem; - -$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px'; -$crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem'; -$filter-container-height: '1rem - #{$switch-view-height}'; - -.app-content.list\.kanban { - padding-bottom: 0; -} - -.kanban { - - overflow-x: auto; - overflow-y: hidden; - height: calc(#{$crazy-height-calculation}); - margin: 0 -1.5rem; - padding: 0 1.5rem; - - @media screen and (max-width: $tablet) { - height: calc(#{$crazy-height-calculation} - #{$filter-container-height}); - } - - &-bucket-container { - display: flex; - align-items: flex-start; - } - - .ghost { - background: transparent !important; - border: 3px dashed $grey-300 !important; - box-shadow: none !important; - - * { - opacity: 0; - } - } - - .bucket { - background-color: $bucket-background; - border-radius: $radius; - position: relative; - - margin: 0 $bucket-right-margin 0 0; - max-height: 100%; - min-height: 20px; - width: $bucket-width; - - .tasks { - max-height: calc(#{$crazy-height-calculation-tasks}); - overflow: auto; - margin-top: 0; - - @media screen and (max-width: $tablet) { - max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height}); - } - - .task { - user-select: none; - - //transition: $ease-out; - cursor: pointer; - box-shadow: $shadow-xs; - display: block; - border: 3px solid transparent; - - font-size: .9rem; - margin: .5rem; - border-radius: $radius; - background: $task-background; - padding-bottom: .125rem; - - &.loader-container.is-loading:after { - width: 1.5rem; - height: 1.5rem; - top: calc(50% - .75rem); - left: calc(50% - .75rem); - border-width: 2px; - } - - h3 { - font-family: $family-sans-serif; - font-size: .85rem; - word-break: break-word; - } - - .progress { - margin: 8px 0 0 0; - width: 100%; - height: 0.5rem; - } - - .due-date { - float: right; - display: flex; - align-items: center; - - .icon { - margin-right: .25rem; - } - - &.overdue { - color: $red; - } - } - - .label-wrapper .tag { - margin: .5rem .5rem 0 0; - } - - .footer { - background: transparent; - padding: 0; - display: flex; - flex-wrap: wrap; - align-items: center; - margin-top: .25rem; - - .tag, .assignees, .icon, .priority-label, .checklist-summary { - margin-top: 0; - margin-right: .25rem; - margin-bottom: .25rem; - } - - .checklist-summary { - padding-left: 0; - } - - .assignees { - display: flex; - - .user { - display: inline; - margin: 0; - - img { - margin: 0; - } - } - } - - .tag { - margin-left: 0; - } - - .priority-label { - font-size: .75rem; - height: 1.5rem; - - .icon { - height: 1rem; - padding: 0 .25rem; - margin-top: 0; - } - } - } - - .footer .icon, - .due-date, - .priority-label { - background: $grey-100; - border-radius: $radius; - padding: 0 .5rem; - } - - .due-date { - padding: 0 .25rem; - } - - .task-id { - color: $grey-500; - font-size: .8rem; - margin-bottom: .25rem; - display: flex; - } - - .is-done { - font-size: .75rem; - padding: .2rem .3rem; - margin: 0 .25rem 0 0; - } - - &.is-moving { - opacity: .5; - } - - span { - width: auto; - } - - &.has-light-text { - color: $white; - - .task-id { - color: $grey-200; - } - - .footer .icon, - .due-date, - .priority-label { - background: $grey-800; - } - - .footer { - .icon svg { - fill: $white; - } - } - } - - &.v-leave-from, - &.v-leave-to, - &.v-leave-active - &.move-card-leave-from, - &.move-card-leave-to, - &.move-card-leave-active { - display: none; - } - } - - .dropper { - &, > div { - min-height: 40px; - } - } - } - - .move-card-move { - transition: transform $transition-duration; - } - - .no-move { - transition: transform 0s; - } - - h2 { - font-size: 1rem; - margin: 0; - font-weight: 600 !important; - } - - &.new-bucket { - // Because of reasons, this button ignores the margin we gave it to the right. - // To make it still look like it has some, we modify the container to have a padding of 1rem, - // which is the same as the margin it should have. Then we make the container itself bigger - // to hide the fact we just made the button smaller. - min-width: calc(#{$bucket-width} + 1rem); - background: transparent; - padding-right: 1rem; - - .button { - background: $bucket-background; - width: 100%; - } - } - - a.dropdown-item { - padding-right: 1rem; - } - - &.is-collapsed { - transform: rotate(90deg) translateX(math.div($bucket-width, 2) - math.div($bucket-header-height, 2)); - // Using negative margins instead of translateY here to make all other buckets fill the empty space - margin-left: (math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1; - margin-right: calc(#{(math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1} + #{$bucket-right-margin}); - cursor: pointer; - - .tasks, .bucket-footer { - display: none; - } - } - } - - .bucket-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: .5rem; - height: $bucket-header-height; - - .limit { - padding-left: .5rem; - font-weight: bold; - - &.is-max { - color: $red; - } - } - - .title.input { - height: auto; - padding: .4rem .5rem; - display: inline-block; - cursor: pointer; - } - } - - .dropdown-trigger { - cursor: pointer; - padding: .5rem; - } - - .bucket-footer { - padding: .5rem; - - .button { - background-color: transparent; - - &:hover { - background-color: $white; - } - } - } -} - -.task-dragging { - transition: transform 0.18s ease; - transform: rotateZ(3deg) -} - -.ghost-task-drop { - transition: transform 0.18s ease-in-out; - transform: rotateZ(0deg) -} diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue index cc456aad0..20df09314 100644 --- a/src/views/list/views/Kanban.vue +++ b/src/views/list/views/Kanban.vue @@ -591,3 +591,321 @@ export default { }, } + + \ No newline at end of file