local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: filter button alignments and backgrounds for link shares

Browse source
This commit is contained in:
kolaente 2022-05-08 11:13:19 +02:00
parent 7e4f58214a
commit c2694dc089
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
5 changed files with 90 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/styles/components/list.scss
View file

@ -6,7 +6,7 @@
// - Table.vue // - Table.vue
$filter-container-top-default: -59px; $filter-container-top-default: -59px;
$filter-container-top-link-share-gantt: -138px; $filter-container-top-link-share-gantt: -133px;
$filter-container-top-link-share-list: -47px; $filter-container-top-link-share-list: -47px;
.filter-container { .filter-container {
@ -91,14 +91,21 @@ $filter-container-top-link-share-list: -47px;
.link-share-container .gantt-chart-container .filter-container, .link-share-container .gantt-chart-container .filter-container,
.gantt-chart-container .filter-container { .gantt-chart-container .filter-container {
right: 0; right: 0;
margin-top: calc(#{$filter-container-top-link-share-gantt} - 2rem); margin-top: calc(#{$filter-container-top-link-share-gantt - 2} - 7rem);
}
.link-share-container .gantt-chart-container .filter-container {
margin-top: calc(#{$filter-container-top-link-share-gantt} - 5rem);
} }
.link-share-container .list-view .filter-container { .link-share-container .list-view .filter-container {
margin-top: $filter-container-top-link-share-list - 10px; margin-top: $filter-container-top-link-share-list - 10px;
} }
.link-share-container .filter-container { .link-share-container.list\.table-view,
.link-share-container.list\.list-view {
.filter-container {
right: 9rem; right: 9rem;
margin-top: $filter-container-top-default; margin-top: $filter-container-top-default;
}
} }

2
src/styles/theme/link-share.scss
View file

@ -17,7 +17,7 @@
} }
.link-share-container { .link-share-container {
&.has-background, &.list\.gantt-view,
&.list\.kanban-view { &.list\.kanban-view {
.container { .container {
max-width: 100vw; max-width: 100vw;

20
src/views/list/ListGantt.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<ListWrapper class="list-gantt" :list-id="props.listId" viewName="gantt"> <ListWrapper class="list-gantt" :list-id="props.listId" viewName="gantt">
<template #header> <template #header>
<div class="gantt-options p-4"> <card class="gantt-options">
<fancycheckbox class="is-block" v-model="showTaskswithoutDates"> <fancycheckbox class="is-block" v-model="showTaskswithoutDates">
{{ $t('list.gantt.showTasksWithoutDates') }} {{ $t('list.gantt.showTasksWithoutDates') }}
</fancycheckbox> </fancycheckbox>
@ -43,7 +43,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </card>
</template> </template>
<template #default> <template #default>
@ -65,11 +65,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' import {ref, computed} from 'vue'
import flatPickr from 'vue-flatpickr-component' import flatPickr from 'vue-flatpickr-component'
import { useI18n } from 'vue-i18n' import {useI18n} from 'vue-i18n'
import { useStore } from 'vuex' import {useStore} from 'vuex'
import ListWrapper from './ListWrapper.vue' import ListWrapper from './ListWrapper.vue'
import GanttChart from '@/components/tasks/gantt-component.vue' import GanttChart from '@/components/tasks/gantt-component.vue'
@ -113,6 +113,7 @@ const flatPickerConfig = computed(() => ({
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem;
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
flex-direction: column; flex-direction: column;
@ -166,4 +167,13 @@ const flatPickerConfig = computed(() => ({
.vdr.active::before { .vdr.active::before {
display: none; display: none;
} }
.link-share-view:not(.has-background) .card.gantt-options {
border: none;
box-shadow: none;
.card-content {
padding: .5rem;
}
}
</style> </style>

5
src/views/list/ListList.vue
View file

@ -373,4 +373,9 @@ export default defineComponent({
.list-view .task-add { .list-view .task-add {
padding: 1rem 1rem 0; padding: 1rem 1rem 0;
} }
.link-share-view .card {
border: none;
box-shadow: none;
}
</style> </style>

5
src/views/list/ListTable.vue
View file

@ -308,4 +308,9 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
margin: 2rem 0 1rem; margin: 2rem 0 1rem;
} }
} }
.link-share-view .card {
border: none;
box-shadow: none;
}
</style> </style>