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

66
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,15 +800,35 @@ async function setPercentDone(percentDone: number) {
<style lang="scss" scoped> <style lang="scss" scoped>
$flash-background-duration: 750ms; $flash-background-duration: 750ms;
.task-view-container {
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
padding-bottom: 0;
@media screen and (min-width: $desktop) {
padding-bottom: 1rem;
}
}
.task-view { .task-view {
padding: 1rem; padding: 1rem;
padding-bottom: 0;
background-color: var(--site-background); background-color: var(--site-background);
@media screen and (max-width: $desktop) { @media screen and (min-width: $desktop) {
padding-bottom: 0; padding: 1rem;
} }
} }
.task-view * {
transition: opacity 50ms ease;
}
.is-loading .task-view * {
opacity: 0;
}
.subtitle { .subtitle {
color: var(--grey-500); color: var(--grey-500);
margin-bottom: 1rem; margin-bottom: 1rem;
@ -826,9 +845,6 @@ $flash-background-duration: 750ms;
.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;
@ -884,7 +900,9 @@ $flash-background-duration: 750ms;
break-after: always; // New syntax break-after: always; // New syntax
} }
&.labels-list, }
.details.labels-list,
.assignees { .assignees {
:deep(.multiselect) { :deep(.multiselect) {
.input-wrapper { .input-wrapper {
@ -895,7 +913,6 @@ $flash-background-duration: 750ms;
} }
} }
} }
}
:deep(.details), :deep(.details),
:deep(.heading) { :deep(.heading) {
@ -979,37 +996,6 @@ $flash-background-duration: 750ms;
padding-left: .25rem; 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 {
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
}
.flash-background-enter-from, .flash-background-enter-from,
.flash-background-enter-active { .flash-background-enter-active {
animation: flash-background $flash-background-duration ease 1; animation: flash-background $flash-background-duration ease 1;