k9withabone/frontend
1
0
Fork 0
forked from vikunja/frontend
Code Issues Pull Requests Projects Releases Wiki Activity

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
Signed by untrusted user: dpschen
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
class="loader-container task-view-container"
:class="{
'is-loading': taskService.loading,
'visible': visible,
'is-loading': taskService.loading || !visible,
'is-modal': isModal,
}"
>
@ -801,15 +800,35 @@ async function setPercentDone(percentDone: number) {
<style lang="scss" scoped>
$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 {
padding: 1rem;
padding-bottom: 0;
background-color: var(--site-background);
@media screen and (max-width: $desktop) {
padding-bottom: 0;
@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);
margin-bottom: 1rem;
@ -826,9 +845,6 @@ $flash-background-duration: 750ms;
.icon.is-grey {
color: var(--grey-400);
}
.date-input {
display: flex;
align-items: center;
@ -884,7 +900,9 @@ $flash-background-duration: 750ms;
break-after: always; // New syntax
}
&.labels-list,
}
.details.labels-list,
.assignees {
:deep(.multiselect) {
.input-wrapper {
@ -895,7 +913,6 @@ $flash-background-duration: 750ms;
}
}
}
}
:deep(.details),
:deep(.heading) {
@ -979,37 +996,6 @@ $flash-background-duration: 750ms;
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-active {
animation: flash-background $flash-background-duration ease 1;