From ba1942e7570d1556c7fec3d3ecec9b326e51eb99 Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Mon, 18 Oct 2021 14:20:23 +0200 Subject: [PATCH] feat: merge gantt.scss with component styles --- src/components/tasks/gantt-component.vue | 195 ++++++++++++++++++ src/styles/components/_index.scss | 1 - src/styles/components/gantt.scss | 251 ----------------------- src/views/list/views/Gantt.vue | 66 +++++- 4 files changed, 260 insertions(+), 253 deletions(-) delete mode 100644 src/styles/components/gantt.scss diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index 8981ac10..128f26d1 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -445,3 +445,198 @@ export default { }, } + + \ No newline at end of file diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index 4bcf5247..9060e7aa 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -1,4 +1,3 @@ -@import "gantt"; @import "tooltip"; @import "labels"; @import "list"; diff --git a/src/styles/components/gantt.scss b/src/styles/components/gantt.scss deleted file mode 100644 index 686d0666..00000000 --- a/src/styles/components/gantt.scss +++ /dev/null @@ -1,251 +0,0 @@ -$gantt-border: 1px solid $grey-200; -$gantt-vertical-border-color: $grey-100; - -.gantt-chart-container { - padding-bottom: 1rem; -} - -.gantt-chart { - overflow-x: auto; - border-top: 1px solid $grey-200; - - .dates { - display: flex; - text-align: center; - - .months { - display: flex; - - .month { - padding: 0.5rem 0 0; - border-right: $gantt-border; - font-family: $vikunja-font; - font-weight: bold; - - &:last-child { - border-right: none; - } - - .days { - display: flex; - - .day { - padding: 0.5rem 0; - font-weight: normal; - - &.today { - background: $primary; - color: $white; - border-radius: 5px 5px 0 0; - font-weight: bold; - } - - .theday { - padding: 0 .5rem; - width: 100%; - display: block; - } - - .weekday { - font-size: 0.8rem; - } - } - } - } - } - } - - .tasks { - max-width: unset !important; - margin: 0; - border-top: $gantt-border; - - .row { - height: 45px; - - .task { - display: inline-block; - border: 2px solid $primary; - font-size: 0.85rem; - margin: 0.5rem; - border-radius: 6px; - padding: 0.25rem 0.5rem; - cursor: grab; - position: relative; - height: 31px !important; - - user-select: none; - - &.is-current-edit { - border-color: $orange !important; - } - - &.has-light-text { - color: $light; - - &.done span:after { - border-top: 1px solid $light; - } - - .edit-toggle { - color: $light; - } - } - - &.has-dark-text { - color: $text; - - &.done span:after { - border-top: 1px solid $dark; - } - - .edit-toggle { - color: $text; - } - } - - &.done span { - position: relative; - - &:after { - content: ''; - position: absolute; - right: 0; - left: 0; - top: 57%; - } - } - - span:not(.high-priority) { - max-width: calc(100% - 20px); - display: inline-block; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - - &.has-high-priority { - max-width: calc(100% - 90px); - } - - &.has-not-so-high-priority { - max-width: calc(100% - 70px); - } - - &.has-super-high-priority { - max-width: calc(100% - 111px); - } - - &.icon { - width: 10px; - text-align: center; - } - } - - .high-priority { - margin: 0 0 0 .5rem; - vertical-align: bottom; - } - - .edit-toggle { - float: right; - cursor: pointer; - margin-right: 4px; - } - - &.nodate { - border: 2px dashed $grey-300; - background: $grey-100; - } - - &:active { - cursor: grabbing; - } - } - } - } - - .taskedit { - position: fixed; - min-height: 0; - top: 10vh; - right: 10vw; - z-index: 5; - - .card-content { - max-height: 60vh; - overflow-y: auto; - } - } - - .add-new-task { - padding: 1rem .7rem .4rem .7rem; - display: flex; - max-width: 450px; - - .input { - margin-right: .7rem; - font-size: .8rem; - } - - .button { - font-size: .68rem; - } - } -} - -.gantt-options { - display: flex; - justify-content: space-between; - align-items: center; - - @media screen and (max-width: $tablet) { - flex-direction: column; - } - - .range-picker { - display: flex; - margin-bottom: 1rem; - width: 50%; - - @media screen and (max-width: $tablet) { - flex-direction: column; - width: 100%; - } - - .field { - margin-bottom: 0; - width: 33%; - - &:not(:last-child) { - padding-right: .5rem; - } - - @media screen and (max-width: $tablet) { - width: 100%; - max-width: 100%; - margin-top: .5rem; - padding-right: 0 !important; - } - - &, .input { - font-size: .8rem; - } - - .select, .select select { - height: auto; - width: 100%; - font-size: .8rem; - } - - - .label { - font-size: .9rem; - padding-left: .4rem; - } - } - } -} - -.vdr.active::before { - display: none; -} \ No newline at end of file diff --git a/src/views/list/views/Gantt.vue b/src/views/list/views/Gantt.vue index f5eab496..b3628238 100644 --- a/src/views/list/views/Gantt.vue +++ b/src/views/list/views/Gantt.vue @@ -103,4 +103,68 @@ export default { }, }, } - \ No newline at end of file + + + \ No newline at end of file