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 // - 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,
right: 9rem; .link-share-container.list\.list-view {
margin-top: $filter-container-top-default; .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 { .link-share-container {
&.has-background, &.list\.gantt-view,
&.list\.kanban-view { &.list\.kanban-view {
.container { .container {
max-width: 100vw; max-width: 100vw;

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

@ -1,75 +1,75 @@
<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>
<div class="range-picker"> <div class="range-picker">
<div class="field"> <div class="field">
<label class="label" for="dayWidth">{{ $t('list.gantt.size') }}</label> <label class="label" for="dayWidth">{{ $t('list.gantt.size') }}</label>
<div class="control"> <div class="control">
<div class="select"> <div class="select">
<select id="dayWidth" v-model.number="dayWidth"> <select id="dayWidth" v-model.number="dayWidth">
<option value="35">{{ $t('list.gantt.default') }}</option> <option value="35">{{ $t('list.gantt.default') }}</option>
<option value="10">{{ $t('list.gantt.month') }}</option> <option value="10">{{ $t('list.gantt.month') }}</option>
<option value="80">{{ $t('list.gantt.day') }}</option> <option value="80">{{ $t('list.gantt.day') }}</option>
</select> </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>
</div> </div>
<div class="field"> </card>
<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>
</template> </template>
<template #default> <template #default>
<div class="gantt-chart-container"> <div class="gantt-chart-container">
<card :padding="false" class="has-overflow"> <card :padding="false" class="has-overflow">
<gantt-chart <gantt-chart
:date-from="dateFrom" :date-from="dateFrom"
:date-to="dateTo" :date-to="dateTo"
:day-width="dayWidth" :day-width="dayWidth"
:list-id="props.listId" :list-id="props.listId"
:show-taskswithout-dates="showTaskswithoutDates" :show-taskswithout-dates="showTaskswithoutDates"
/> />
</card> </card>
</div> </div>
</template> </template>
</ListWrapper> </ListWrapper>
</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'
@ -82,7 +82,7 @@ const props = defineProps({
}, },
}) })
const DEFAULT_DAY_COUNT = 35 const DEFAULT_DAY_COUNT = 35
const showTaskswithoutDates = ref(false) const showTaskswithoutDates = ref(false)
const dayWidth = ref(DEFAULT_DAY_COUNT) const dayWidth = ref(DEFAULT_DAY_COUNT)
@ -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>