From c9e23cdd29c2ba753cc56f7ce22039d1c2165f2c Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Mon, 18 Oct 2021 14:22:32 +0200 Subject: [PATCH] feat: moved most task.scss styles to the TaskDetailView.vue component --- src/styles/components/task.scss | 226 --------------------------- src/styles/variables/variables.scss | 1 - src/views/tasks/TaskDetailView.vue | 233 ++++++++++++++++++++++++++++ 3 files changed, 233 insertions(+), 227 deletions(-) diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss index 7a62b1f2..732865e3 100644 --- a/src/styles/components/task.scss +++ b/src/styles/components/task.scss @@ -1,219 +1,7 @@ -.task-view { - // This is a workaround to hide the llama background from the top on the task detail page - margin-top: -1.5rem; - padding: 1rem; - background-color: $light-background; - - @media screen and (max-width: $desktop) { - padding-bottom: 0; - } - - .subtitle { - color: $grey-500; - margin-bottom: 1rem; - - a { - color: $grey-800; - } - } - - h3 .button { - vertical-align: middle; - } - - .icon.is-grey { - color: $grey-400; - } - - .heading { - display: flex; - justify-content: space-between; - text-transform: none; - align-items: center; - - .title { - margin-bottom: 0; - - &.input { - // 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing. - min-height: calc(1.8rem * 1.125 + .6rem + 2px); - } - } - - .title.task-id { - color: $grey-400; - white-space: nowrap; - } - - @media screen and (max-width: $tablet) { - flex-direction: column; - align-items: start; - - .title.input { - margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest - } - } - } - - .date-input { - display: flex; - align-items: center; - - a.remove { - color: $red; - vertical-align: middle; - padding-left: .5rem; - line-height: 1; - } - } - - .datepicker { - width: 100%; - - a.show { - color: $text; - padding: .25rem .5rem; - transition: background-color $transition; - border-radius: $radius; - display: block; - margin: .1rem 0; - - &:hover { - background: $white; - } - } - - &.disabled a.show:hover { - background: transparent; - } - } - - .details { - padding-bottom: 0.75rem; - flex-flow: row wrap; - margin-bottom: 0; - - .detail-title { - display: block; - color: $grey-400; - } - - .none { - font-style: italic; - } - - // Break after the 2nd element - .column:nth-child(2n) { - page-break-after: always; // CSS 2.1 syntax - break-after: always; // New syntax - } - - &.labels-list, .assignees { - .multiselect { - .input-wrapper { - &:not(:focus-within):not(:hover) { - background: transparent !important; - border-color: transparent !important; - } - } - } - } - } - - .details, .heading { - .input:not(.has-defaults), - .textarea, - .select:not(.has-defaults) select { - border-color: transparent; - background: transparent; - cursor: pointer; - transition: all $transition-duration; - - &::placeholder { - color: $text-light; - opacity: 1; - font-style: italic; - } - - &:not(:disabled) { - &:hover, &:active { - background: $input-background-color; - border-color: $input-border-color; - cursor: text; - } - - &:focus { - background: $input-background-color; - border-color: $input-focus-border-color; - } - } - } - - .select:not(.has-defaults):after { - opacity: 0; - } - - .select:not(.has-defaults):hover:after { - opacity: 1; - } - } - - .attachments { - margin-bottom: 0; - - table tr:last-child td { - border-bottom: none; - } - } - - .action-buttons { - a.button { - width: 100%; - margin-bottom: .5rem; - justify-content: left; - } - } - - .created { - font-size: .75rem; - color: $grey-500; - text-align: right; - } - - .checklist-summary { - margin-left: .25rem; - } -} - .link-share-container:not(.has-background) .task-view { background: transparent; } -.task-view-container { - padding-bottom: 1rem; - - @media screen and (max-width: $desktop) { - padding-bottom: 0; - } - - .task-view * { - opacity: 0; - transition: opacity 50ms ease; - } - - &.is-loading { - opacity: 1; - - .task-view * { - opacity: 0; - } - } - - &.visible:not(.is-loading) .task-view * { - opacity: 1; - } -} - .is-done { background: $green; color: $white; @@ -236,18 +24,4 @@ border-radius: 0; padding-top: 2rem; } -} - -.flash-background-enter-from, -.flash-background-enter-active { - animation: flash-background $flash-background-duration ease 1; -} - -@keyframes flash-background { - 0% { - background: lighten($primary, 30); - } - 100% { - background: transparent; - } } \ No newline at end of file diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss index 0801bedc..f3246443 100644 --- a/src/styles/variables/variables.scss +++ b/src/styles/variables/variables.scss @@ -16,7 +16,6 @@ $navbar-dropdown-boxed-shadow: $dropdown-content-shadow; $bulmaswatch-import-font: false !default; $light-background: $grey-100; $transition-duration: 100ms; -$flash-background-duration: 750ms; $vikunja-font: 'Quicksand', sans-serif; diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue index 9ccefd40..e28193bb 100644 --- a/src/views/tasks/TaskDetailView.vue +++ b/src/views/tasks/TaskDetailView.vue @@ -692,3 +692,236 @@ export default { }, } + + \ No newline at end of file