vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Make tasks in list view look better

This commit is contained in:
kolaente 2021-01-24 13:05:50 +01:00
parent cc05341b44
commit 7de610490e
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/styles/components/tasks.scss
View File

@ -1,3 +1,15 @@
.tasks-container {
display: flex;
.tasks {
width: 100%;
}
.taskedit {
width: 50%;
}
}
.tasks {
margin-top: 1rem;
padding: 0;
@ -20,11 +32,16 @@
.task {
display: flex;
flex-wrap: wrap;
padding: 0.5rem 1rem;
border-bottom: 1px solid $grey-100;
padding: 0.5rem;
transition: background-color $transition;
align-items: center;
cursor: pointer;
margin: 0 .5rem;
border-radius: $radius;
&:last-child {
margin-bottom: .5rem;
}
&:hover {
background-color: $grey-100;
@ -112,6 +129,7 @@
.fancycheckbox {
height: 18px;
padding-top: 0;
padding-right: .5rem;
span {
display: none;
@ -300,7 +318,6 @@
}
.is-max-width-desktop .tasks .task {
width: 100%;
max-width: $desktop;
}

43
src/views/list/views/List.vue
View File

@ -85,34 +85,33 @@
</div>
<p
class="has-text-centered has-text-grey is-italic p-4"
class="has-text-centered has-text-grey is-italic p-4 mb-4"
v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
This list is currently empty.
<a @click="$refs.newTaskInput.focus()">Create a new task.</a>
</p>
<div class="columns">
<div class="column">
<div :class="{'short': isTaskEdit}" class="tasks mt-0" v-if="tasks && tasks.length > 0">
<single-task-in-list
:disabled="!canWrite"
:key="t.id"
:the-task="t"
@taskUpdated="updateTasks"
task-detail-route="task.detail"
v-for="t in tasks"
>
<div @click="editTask(t.id)" class="icon settings" v-if="!list.isArchived && canWrite">
<icon icon="pencil-alt"/>
</div>
</single-task-in-list>
</div>
</div>
<div class="column is-4" v-if="isTaskEdit">
<card class="taskedit mt-0" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false" :shadow="false">
<edit-task :task="taskEditTask"/>
</card>
<div class="tasks-container">
<div :class="{'short': isTaskEdit}" class="tasks mt-0" v-if="tasks && tasks.length > 0">
<single-task-in-list
:disabled="!canWrite"
:key="t.id"
:the-task="t"
@taskUpdated="updateTasks"
task-detail-route="task.detail"
v-for="t in tasks"
>
<div @click="editTask(t.id)" class="icon settings" v-if="!list.isArchived && canWrite">
<icon icon="pencil-alt"/>
</div>
</single-task-in-list>
</div>
<card
v-if="isTaskEdit"
class="taskedit mt-0" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false"
:shadow="false">
<edit-task :task="taskEditTask"/>
</card>
</div>
<nav