Fix filter styling if the list is archived

This commit is contained in:
kolaente 2021-01-28 22:34:29 +01:00
parent 4cae01aab9
commit 5a674f5c33
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 33 additions and 7 deletions

View File

@ -46,6 +46,10 @@
padding-bottom: 1rem;
}
$filter-container-top-default: -59px;
$filter-container-top-link-share-gantt: -138px;
$filter-container-top-link-share-list: -47px;
.filter-container {
text-align: right;
width: 100%;
@ -53,7 +57,7 @@
max-width: 180px;
position: absolute;
right: 1.5rem;
margin-top: -59px;
margin-top: $filter-container-top-default;
z-index: 4;
.items {
@ -129,20 +133,42 @@
}
}
.list-namespace-title {
color: $grey-500;
}
.link-share-container .gantt-chart-container .filter-container,
.gantt-chart-container .filter-container {
margin-top: calc(-138px - 2rem);
right: 0;
margin-top: calc(#{$filter-container-top-link-share-gantt} - 2rem);
}
.link-share-container .list-view .filter-container {
margin-top: -47px;
margin-top: $filter-container-top-link-share-list;
}
.link-share-container .filter-container {
right: 9rem;
margin-top: -59px;
margin-top: $filter-container-top-default;
}
.list-namespace-title {
color: $grey-500;
.is-archived {
$notification-height: 1.25rem + 1.25rem + 1.5rem + 1.5rem;
.filter-container {
margin-top: calc(#{$filter-container-top-default} - #{$notification-height});
}
.link-share-container .gantt-chart-container .filter-container,
.gantt-chart-container .filter-container {
margin-top: calc(#{$filter-container-top-link-share-gantt} - 2rem - #{$notification-height});
}
.link-share-container .list-view .filter-container {
margin-top: calc(#{$filter-container-top-link-share-list} - #{$notification-height});
}
.link-share-container .filter-container {
margin-top: calc(#{$filter-container-top-default} - #{$notification-height});
}
}

View File

@ -1,6 +1,6 @@
<template>
<div
:class="{ 'is-loading': listService.loading}"
:class="{ 'is-loading': listService.loading, 'is-archived': currentList.isArchived}"
class="loader-container"
>
<div class="switch-view-container">