ami/tl-vikunja
1
0
Fork 0
Code

feat: reduce TaskDetailView selector specificity

Browse Source
This commit is contained in:
Dominik Pschenitschni 2022-11-12 16:45:46 +01:00
parent 4c4adfdf4e
commit fba402fcd0
No known key found for this signature in database
GPG Key ID: B257AC0149F43A77
1 changed files with 174 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/views/tasks/TaskDetailView.vue
View File

@ -2,8 +2,7 @@
<div <div
class="loader-container task-view-container" class="loader-container task-view-container"
:class="{ :class="{
'is-loading': taskService.loading, 'is-loading': taskService.loading || !visible,
'visible': visible,
'is-modal': isModal, 'is-modal': isModal,
}" }"
> >
@ -801,47 +800,64 @@ async function setPercentDone(percentDone: number) {
<style lang="scss" scoped> <style lang="scss" scoped>
$flash-background-duration: 750ms; $flash-background-duration: 750ms;
.task-view { .task-view-container {
padding: 1rem; // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
background-color: var(--site-background); --primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
@media screen and (max-width: $desktop) {
padding-bottom: 0; padding-bottom: 0;
@media screen and (min-width: $desktop) {
padding-bottom: 1rem;
} }
} }
.subtitle { .task-view {
padding: 1rem;
padding-bottom: 0;
background-color: var(--site-background);
@media screen and (min-width: $desktop) {
padding: 1rem;
}
}
.task-view * {
transition: opacity 50ms ease;
}
.is-loading .task-view * {
opacity: 0;
}
.subtitle {
color: var(--grey-500); color: var(--grey-500);
margin-bottom: 1rem; margin-bottom: 1rem;
a { a {
color: var(--grey-800); color: var(--grey-800);
} }
} }
h3 .button { h3 .button {
vertical-align: middle; vertical-align: middle;
} }
.icon.is-grey { .icon.is-grey {
color: var(--grey-400); color: var(--grey-400);
} }
.date-input {
.date-input {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.remove { .remove {
color: var(--danger); color: var(--danger);
vertical-align: middle; vertical-align: middle;
padding-left: .5rem; padding-left: .5rem;
line-height: 1; line-height: 1;
} }
:deep(.datepicker) { :deep(.datepicker) {
width: 100%; width: 100%;
.show { .show {
@ -862,9 +878,9 @@ $flash-background-duration: 750ms;
&.disabled .show:hover { &.disabled .show:hover {
background: transparent; background: transparent;
} }
} }
.details { .details {
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
flex-flow: row wrap; flex-flow: row wrap;
margin-bottom: 0; margin-bottom: 0;
@ -884,8 +900,10 @@ $flash-background-duration: 750ms;
break-after: always; // New syntax break-after: always; // New syntax
} }
&.labels-list, }
.assignees {
.details.labels-list,
.assignees {
:deep(.multiselect) { :deep(.multiselect) {
.input-wrapper { .input-wrapper {
&:not(:focus-within):not(:hover) { &:not(:focus-within):not(:hover) {
@ -894,11 +912,10 @@ $flash-background-duration: 750ms;
} }
} }
} }
} }
}
:deep(.details), :deep(.details),
:deep(.heading) { :deep(.heading) {
.input:not(.has-defaults), .input:not(.has-defaults),
.textarea, .textarea,
.select:not(.has-defaults) select { .select:not(.has-defaults) select {
@ -935,17 +952,17 @@ $flash-background-duration: 750ms;
.select:not(.has-defaults):hover:after { .select:not(.has-defaults):hover:after {
opacity: 1; opacity: 1;
} }
} }
.attachments { .attachments {
margin-bottom: 0; margin-bottom: 0;
table tr:last-child td { table tr:last-child td {
border-bottom: none; border-bottom: none;
} }
} }
.action-buttons { .action-buttons {
@media screen and (min-width: $tablet) { @media screen and (min-width: $tablet) {
position: sticky; position: sticky;
top: $navbar-height + 1.5rem; top: $navbar-height + 1.5rem;
@ -961,9 +978,9 @@ $flash-background-duration: 750ms;
color: var(--white); color: var(--white);
} }
} }
} }
.is-modal .action-buttons { .is-modal .action-buttons {
// we need same top margin for the modal close button // we need same top margin for the modal close button
@media screen and (min-width: $tablet) { @media screen and (min-width: $tablet) {
top: 6.5rem; top: 6.5rem;
@ -973,41 +990,10 @@ $flash-background-duration: 750ms;
@media screen and (min-width: calc(#{$desktop} + 84px)) { @media screen and (min-width: calc(#{$desktop} + 84px)) {
top: 0; top: 0;
} }
}
.checklist-summary {
padding-left: .25rem;
}
.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;
}
} }
.task-view-container { .checklist-summary {
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73% padding-left: .25rem;
--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
} }
.flash-background-enter-from, .flash-background-enter-from,