Make sure all empty pages have a call to action

This commit is contained in:
kolaente 2021-01-17 20:21:33 +01:00
parent ec4c941fb1
commit 2139d4d528
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
5 changed files with 32 additions and 13 deletions

View file

@ -156,9 +156,3 @@
.list-namespace-title { .list-namespace-title {
color: $grey; color: $grey;
} }
.list-is-empty-notice {
text-align: center;
color: $grey;
font-style: italic;
}

View file

@ -10,11 +10,14 @@
<div class="content"> <div class="content">
<h1>Manage labels</h1> <h1>Manage labels</h1>
<p> <p v-if="labels.length > 0">
Click on a label to edit it. Click on a label to edit it.
You can edit all labels you created, you can use all labels which are associated with a task to whose You can edit all labels you created, you can use all labels which are associated with a task to whose
list list you have access.
you have access. </p>
<p v-else class="has-text-centered has-text-grey">
You currently do not have any labels.
<router-link :to="{name:'labels.create'}">Create a new label.</router-link>
</p> </p>
</div> </div>

View file

@ -61,7 +61,9 @@
placeholder="Add a new task..." placeholder="Add a new task..."
type="text" type="text"
v-focus v-focus
v-model="newTaskText"/> v-model="newTaskText"
ref="newTaskInput"
/>
<span class="icon is-small is-left"> <span class="icon is-small is-left">
<icon icon="tasks"/> <icon icon="tasks"/>
</span> </span>
@ -81,8 +83,9 @@
</p> </p>
</div> </div>
<p class="list-is-empty-notice" v-if="tasks.length === 0"> <p class="has-text-centered has-text-grey" v-if="tasks.length === 0">
This list is currently empty. This list is currently empty.
<a @click="$refs.newTaskInput.focus()">Create a new task.</a>
</p> </p>
<div class="columns"> <div class="columns">

View file

@ -11,12 +11,19 @@
Show Archived Show Archived
</fancycheckbox> </fancycheckbox>
<p class="has-text-centered has-text-grey mt-4" v-if="namespaces.length === 0">
You don't have any namespaces right now.
<router-link :to="{name: 'namespace.create'}">
Create a namespace.
</router-link>
</p>
<div :key="`n${n.id}`" class="namespace" v-for="n in namespaces"> <div :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
<x-button <x-button
:to="{name: 'list.create', params: {id: n.id}}" :to="{name: 'list.create', params: {id: n.id}}"
class="is-pulled-right" class="is-pulled-right"
type="secondary" type="secondary"
v-if="n.id > 0" v-if="n.id > 0 && n.lists.length > 0"
icon="plus" icon="plus"
> >
Create list Create list
@ -29,6 +36,13 @@
</span> </span>
</h1> </h1>
<p class="has-text-centered has-text-grey mt-4" v-if="n.lists.length === 0">
This namespace does not contain any lists.
<router-link :to="{name: 'list.create', params: {id: n.id}}">
Create a new list in this namespace.
</router-link>
</p>
<div class="lists"> <div class="lists">
<template v-for="l in n.lists"> <template v-for="l in n.lists">
<router-link <router-link

View file

@ -16,7 +16,12 @@
</router-link> </router-link>
</li> </li>
</ul> </ul>
<p v-else class="has-text-centered has-text-grey">You are currently not part of any teams.</p> <p v-else class="has-text-centered has-text-grey">
You are currently not part of any teams.
<router-link :to="{name: 'teams.create'}">
Create a new team.
</router-link>
</p>
</div> </div>
</template> </template>