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

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

@ -6,7 +6,7 @@
// - Table.vue
$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 {
@ -91,14 +91,21 @@ $filter-container-top-link-share-list: -47px;
.link-share-container .gantt-chart-container .filter-container,
.gantt-chart-container .filter-container {
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 {
margin-top: $filter-container-top-link-share-list - 10px;
}
.link-share-container .filter-container {
right: 9rem;
margin-top: $filter-container-top-default;
.link-share-container.list\.table-view,
.link-share-container.list\.list-view {
.filter-container {
right: 9rem;
margin-top: $filter-container-top-default;
}
}

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

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

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

@ -1,75 +1,75 @@
<template>
<ListWrapper class="list-gantt" :list-id="props.listId" viewName="gantt">
<template #header>
<div class="gantt-options p-4">
<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
{{ $t('list.gantt.showTasksWithoutDates') }}
</fancycheckbox>
<div class="range-picker">
<div class="field">
<label class="label" for="dayWidth">{{ $t('list.gantt.size') }}</label>
<div class="control">
<div class="select">
<select id="dayWidth" v-model.number="dayWidth">
<option value="35">{{ $t('list.gantt.default') }}</option>
<option value="10">{{ $t('list.gantt.month') }}</option>
<option value="80">{{ $t('list.gantt.day') }}</option>
</select>
<card class="gantt-options">
<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
{{ $t('list.gantt.showTasksWithoutDates') }}
</fancycheckbox>
<div class="range-picker">
<div class="field">
<label class="label" for="dayWidth">{{ $t('list.gantt.size') }}</label>
<div class="control">
<div class="select">
<select id="dayWidth" v-model.number="dayWidth">
<option value="35">{{ $t('list.gantt.default') }}</option>
<option value="10">{{ $t('list.gantt.month') }}</option>
<option value="80">{{ $t('list.gantt.day') }}</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label" for="fromDate">{{ $t('list.gantt.from') }}</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
class="input"
id="fromDate"
:placeholder="$t('list.gantt.from')"
v-model="dateFrom"
/>
</div>
</div>
<div class="field">
<label class="label" for="toDate">{{ $t('list.gantt.to') }}</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
class="input"
id="toDate"
:placeholder="$t('list.gantt.to')"
v-model="dateTo"
/>
</div>
</div>
</div>
<div class="field">
<label class="label" for="fromDate">{{ $t('list.gantt.from') }}</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
class="input"
id="fromDate"
:placeholder="$t('list.gantt.from')"
v-model="dateFrom"
/>
</div>
</div>
<div class="field">
<label class="label" for="toDate">{{ $t('list.gantt.to') }}</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
class="input"
id="toDate"
:placeholder="$t('list.gantt.to')"
v-model="dateTo"
/>
</div>
</div>
</div>
</div>
</card>
</template>
<template #default>
<div class="gantt-chart-container">
<card :padding="false" class="has-overflow">
<div class="gantt-chart-container">
<card :padding="false" class="has-overflow">
<gantt-chart
:date-from="dateFrom"
:date-to="dateTo"
:day-width="dayWidth"
:list-id="props.listId"
:show-taskswithout-dates="showTaskswithoutDates"
/>
<gantt-chart
:date-from="dateFrom"
:date-to="dateTo"
:day-width="dayWidth"
:list-id="props.listId"
:show-taskswithout-dates="showTaskswithoutDates"
/>
</card>
</div>
</card>
</div>
</template>
</ListWrapper>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import {ref, computed} from 'vue'
import flatPickr from 'vue-flatpickr-component'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
import {useI18n} from 'vue-i18n'
import {useStore} from 'vuex'
import ListWrapper from './ListWrapper.vue'
import GanttChart from '@/components/tasks/gantt-component.vue'
@ -82,7 +82,7 @@ const props = defineProps({
},
})
const DEFAULT_DAY_COUNT = 35
const DEFAULT_DAY_COUNT = 35
const showTaskswithoutDates = ref(false)
const dayWidth = ref(DEFAULT_DAY_COUNT)
@ -113,6 +113,7 @@ const flatPickerConfig = computed(() => ({
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
@media screen and (max-width: $tablet) {
flex-direction: column;
@ -166,4 +167,13 @@ const flatPickerConfig = computed(() => ({
.vdr.active::before {
display: none;
}
.link-share-view:not(.has-background) .card.gantt-options {
border: none;
box-shadow: none;
.card-content {
padding: .5rem;
}
}
</style>

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

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

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

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