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

Make full task in task list clickable

Browse source 
Fixes #362
This commit is contained in:
kolaente 2021-01-15 21:04:48 +01:00
parent db90a8cde4
commit 2b852de06f
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 20 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/tasks/partials/singleTaskInList.vue
View file

@ -6,8 +6,11 @@
class="color-bubble" class="color-bubble"
v-if="listColor !== ''"> v-if="listColor !== ''">
</span> </span>
<span :class="{ 'done': task.done}" class="tasktext"> <router-link
<router-link :to="{ name: taskDetailRoute, params: { id: task.id } }"> :to="{ name: taskDetailRoute, params: { id: task.id } }"
:class="{ 'done': task.done}"
class="tasktext">
<span>
<router-link <router-link
:to="{ name: 'list.list', params: { listId: task.listId } }" :to="{ name: 'list.list', params: { listId: task.listId } }"
class="task-list" class="task-list"
@ -16,7 +19,7 @@
{{ $store.getters['lists/getListById'](task.listId).title }} {{ $store.getters['lists/getListById'](task.listId).title }}
</router-link> </router-link>
<!-- Show any parent tasks to make it clear this task is a sub task of something --> <!-- Show any parent tasks to make it clear this task is a sub task of something -->
<span class="parent-tasks" v-if="typeof task.relatedTasks.parenttask !== 'undefined'"> <span class="parent-tasks" v-if="typeof task.relatedTasks.parenttask !== 'undefined'">
<template v-for="(pt, i) in task.relatedTasks.parenttask"> <template v-for="(pt, i) in task.relatedTasks.parenttask">
{{ pt.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template> {{ pt.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
@ -24,7 +27,7 @@
> >
</span> </span>
{{ task.title }} {{ task.title }}
</router-link> </span>
<labels :labels="task.labels"/> <labels :labels="task.labels"/>
<user <user
@ -55,7 +58,7 @@
<icon icon="align-left"/> <icon icon="align-left"/>
</span> </span>
</span> </span>
</span> </router-link>
<progress <progress
class="progress is-small" class="progress is-small"
v-if="task.percentDone > 0" v-if="task.percentDone > 0"

22
src/styles/components/tasks.scss
View file

@ -169,17 +169,19 @@
} }
} }
.is-menu-enabled .tasks .task span:not(.tag) { .is-menu-enabled .tasks .task {
.tasktext, &.tasktext { span:not(.tag), a {
@media screen and (max-width: $desktop) { .tasktext, &.tasktext {
max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container @media screen and (max-width: $desktop) {
} max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
}
// Duplicated rule to have it work properly in at least some browsers // Duplicated rule to have it work properly in at least some browsers
// This should be fine as the ui doesn't work in rare edge cases to begin with // This should be fine as the ui doesn't work in rare edge cases to begin with
@media screen and (max-width: calc(#{$desktop} + #{$navbar-width})) { @media screen and (max-width: calc(#{$desktop} + #{$navbar-width})) {
max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
} }
}
} }
} }