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

Fix table view scrolling on mobile

Browse source
This commit is contained in:
kolaente 2021-07-22 21:48:05 +02:00
parent caf817f25d
commit 5fd7e3f708
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 147 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/styles/theme/theme.scss
View file

@ -64,6 +64,11 @@ h6 {
overflow: visible; overflow: visible;
} }
.has-horizontal-overflow {
overflow-y: hidden;
overflow-x: auto;
}
.image.is-avatar { .image.is-avatar {
border-radius: 100%; border-radius: 100%;
} }

52
src/views/list/views/Table.vue
View file

@ -20,18 +20,42 @@
<transition name="fade"> <transition name="fade">
<card v-if="showActiveColumnsFilter"> <card v-if="showActiveColumnsFilter">
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox> <fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">{{ $t('task.attributes.done') }}</fancycheckbox> <fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">{{ $t('task.attributes.title') }}</fancycheckbox> {{ $t('task.attributes.done') }}
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">{{ $t('task.attributes.priority') }}</fancycheckbox> </fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">{{ $t('task.attributes.labels') }}</fancycheckbox> <fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">{{ $t('task.attributes.assignees') }}</fancycheckbox> {{ $t('task.attributes.title') }}
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">{{ $t('task.attributes.dueDate') }}</fancycheckbox> </fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">{{ $t('task.attributes.startDate') }}</fancycheckbox> <fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">{{ $t('task.attributes.endDate') }}</fancycheckbox> {{ $t('task.attributes.priority') }}
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">{{ $t('task.attributes.percentDone') }}</fancycheckbox> </fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">{{ $t('task.attributes.created') }}</fancycheckbox> <fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">{{ $t('task.attributes.updated') }}</fancycheckbox> {{ $t('task.attributes.labels') }}
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">{{ $t('task.attributes.createdBy') }}</fancycheckbox> </fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">
{{ $t('task.attributes.assignees') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">
{{ $t('task.attributes.dueDate') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">
{{ $t('task.attributes.startDate') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">
{{ $t('task.attributes.endDate') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">
{{ $t('task.attributes.percentDone') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">
{{ $t('task.attributes.created') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">
{{ $t('task.attributes.updated') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">
{{ $t('task.attributes.createdBy') }}
</fancycheckbox>
</card> </card>
</transition> </transition>
<filter-popup <filter-popup
@ -42,6 +66,7 @@
</div> </div>
<card :padding="false" :has-content="false"> <card :padding="false" :has-content="false">
<div class="has-horizontal-overflow">
<table class="table has-actions is-hoverable is-fullwidth mb-0"> <table class="table has-actions is-hoverable is-fullwidth mb-0">
<thead> <thead>
<tr> <tr>
@ -145,6 +170,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<nav <nav
aria-label="pagination" aria-label="pagination"
@ -163,7 +189,7 @@
:to="getRouteForPagination(currentPage + 1, 'table')" :to="getRouteForPagination(currentPage + 1, 'table')"
class="pagination-next" class="pagination-next"
tag="button"> tag="button">
{{ $t('mist.next') }} {{ $t('misc.next') }}
</router-link> </router-link>
<ul class="pagination-list"> <ul class="pagination-list">
<template v-for="(p, i) in pages"> <template v-for="(p, i) in pages">