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%;
} }

258
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,109 +66,111 @@
</div> </div>
<card :padding="false" :has-content="false"> <card :padding="false" :has-content="false">
<table class="table has-actions is-hoverable is-fullwidth mb-0"> <div class="has-horizontal-overflow">
<thead> <table class="table has-actions is-hoverable is-fullwidth mb-0">
<tr> <thead>
<th v-if="activeColumns.id"> <tr>
# <th v-if="activeColumns.id">
<sort :order="sortBy.id" @click="sort('id')"/> #
</th> <sort :order="sortBy.id" @click="sort('id')"/>
<th v-if="activeColumns.done"> </th>
{{ $t('task.attributes.done') }} <th v-if="activeColumns.done">
<sort :order="sortBy.done" @click="sort('done')"/> {{ $t('task.attributes.done') }}
</th> <sort :order="sortBy.done" @click="sort('done')"/>
<th v-if="activeColumns.title"> </th>
{{ $t('task.attributes.title') }} <th v-if="activeColumns.title">
<sort :order="sortBy.title" @click="sort('title')"/> {{ $t('task.attributes.title') }}
</th> <sort :order="sortBy.title" @click="sort('title')"/>
<th v-if="activeColumns.priority"> </th>
{{ $t('task.attributes.priority') }} <th v-if="activeColumns.priority">
<sort :order="sortBy.priority" @click="sort('priority')"/> {{ $t('task.attributes.priority') }}
</th> <sort :order="sortBy.priority" @click="sort('priority')"/>
<th v-if="activeColumns.labels"> </th>
{{ $t('task.attributes.labels') }} <th v-if="activeColumns.labels">
</th> {{ $t('task.attributes.labels') }}
<th v-if="activeColumns.assignees"> </th>
{{ $t('task.attributes.assignees') }} <th v-if="activeColumns.assignees">
</th> {{ $t('task.attributes.assignees') }}
<th v-if="activeColumns.dueDate"> </th>
{{ $t('task.attributes.dueDate') }} <th v-if="activeColumns.dueDate">
<sort :order="sortBy.due_date" @click="sort('due_date')"/> {{ $t('task.attributes.dueDate') }}
</th> <sort :order="sortBy.due_date" @click="sort('due_date')"/>
<th v-if="activeColumns.startDate"> </th>
{{ $t('task.attributes.startDate') }} <th v-if="activeColumns.startDate">
<sort :order="sortBy.start_date" @click="sort('start_date')"/> {{ $t('task.attributes.startDate') }}
</th> <sort :order="sortBy.start_date" @click="sort('start_date')"/>
<th v-if="activeColumns.endDate"> </th>
{{ $t('task.attributes.endDate') }} <th v-if="activeColumns.endDate">
<sort :order="sortBy.end_date" @click="sort('end_date')"/> {{ $t('task.attributes.endDate') }}
</th> <sort :order="sortBy.end_date" @click="sort('end_date')"/>
<th v-if="activeColumns.percentDone"> </th>
{{ $t('task.attributes.percentDone') }} <th v-if="activeColumns.percentDone">
<sort :order="sortBy.percent_done" @click="sort('percent_done')"/> {{ $t('task.attributes.percentDone') }}
</th> <sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
<th v-if="activeColumns.created"> </th>
{{ $t('task.attributes.created') }} <th v-if="activeColumns.created">
<sort :order="sortBy.created" @click="sort('created')"/> {{ $t('task.attributes.created') }}
</th> <sort :order="sortBy.created" @click="sort('created')"/>
<th v-if="activeColumns.updated"> </th>
{{ $t('task.attributes.updated') }} <th v-if="activeColumns.updated">
<sort :order="sortBy.updated" @click="sort('updated')"/> {{ $t('task.attributes.updated') }}
</th> <sort :order="sortBy.updated" @click="sort('updated')"/>
<th v-if="activeColumns.createdBy"> </th>
{{ $t('task.attributes.createdBy') }} <th v-if="activeColumns.createdBy">
</th> {{ $t('task.attributes.createdBy') }}
</tr> </th>
</thead> </tr>
<tbody> </thead>
<tr :key="t.id" v-for="t in tasks"> <tbody>
<td v-if="activeColumns.id"> <tr :key="t.id" v-for="t in tasks">
<router-link :to="{name: 'task.detail', params: { id: t.id }}"> <td v-if="activeColumns.id">
<template v-if="t.identifier === ''"> <router-link :to="{name: 'task.detail', params: { id: t.id }}">
#{{ t.index }} <template v-if="t.identifier === ''">
</template> #{{ t.index }}
<template v-else> </template>
{{ t.identifier }} <template v-else>
</template> {{ t.identifier }}
</router-link> </template>
</td> </router-link>
<td v-if="activeColumns.done"> </td>
<div class="is-done" v-if="t.done">Done</div> <td v-if="activeColumns.done">
</td> <div class="is-done" v-if="t.done">Done</div>
<td v-if="activeColumns.title"> </td>
<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link> <td v-if="activeColumns.title">
</td> <router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
<td v-if="activeColumns.priority"> </td>
<priority-label :priority="t.priority" :show-all="true"/> <td v-if="activeColumns.priority">
</td> <priority-label :priority="t.priority" :show-all="true"/>
<td v-if="activeColumns.labels"> </td>
<labels :labels="t.labels"/> <td v-if="activeColumns.labels">
</td> <labels :labels="t.labels"/>
<td v-if="activeColumns.assignees"> </td>
<user <td v-if="activeColumns.assignees">
:avatar-size="27" <user
:is-inline="true" :avatar-size="27"
:key="t.id + 'assignee' + a.id + i" :is-inline="true"
:show-username="false" :key="t.id + 'assignee' + a.id + i"
:user="a" :show-username="false"
v-for="(a, i) in t.assignees" :user="a"
/> v-for="(a, i) in t.assignees"
</td> />
<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/> </td>
<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/> <date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/> <date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td> <date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
<date-table-cell :date="t.created" v-if="activeColumns.created"/> <td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
<date-table-cell :date="t.updated" v-if="activeColumns.updated"/> <date-table-cell :date="t.created" v-if="activeColumns.created"/>
<td v-if="activeColumns.createdBy"> <date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
<user <td v-if="activeColumns.createdBy">
:avatar-size="27" <user
:show-username="false" :avatar-size="27"
:user="t.createdBy"/> :show-username="false"
</td> :user="t.createdBy"/>
</tr> </td>
</tbody> </tr>
</table> </tbody>
</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">