From 8828426c9199e07897278441f79a0e497d0c4266 Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Sun, 24 Jan 2021 13:00:21 +0000
Subject: [PATCH] Move all content to cards (#387)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/387
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
---
 cypress/integration/list/list.spec.js     |  14 +-
 src/components/misc/card.vue              |   6 +-
 src/components/tasks/gantt-component.vue  |   2 +-
 src/styles/components/gantt.scss          |   6 +-
 src/styles/components/kanban.scss         |   2 +-
 src/styles/components/list.scss           |   2 +-
 src/styles/components/tasks.scss          |  25 +-
 src/styles/theme/background.scss          |  26 --
 src/styles/theme/variables/variables.scss |   1 -
 src/views/list/views/Gantt.vue            |   4 +-
 src/views/list/views/List.vue             | 147 ++++++------
 src/views/list/views/Table.vue            | 276 +++++++++++-----------
 src/views/tasks/ShowTasks.vue             |  38 +--
 13 files changed, 277 insertions(+), 272 deletions(-)

diff --git a/cypress/integration/list/list.spec.js b/cypress/integration/list/list.spec.js
index 3d85375a..6093871e 100644
--- a/cypress/integration/list/list.spec.js
+++ b/cypress/integration/list/list.spec.js
@@ -156,7 +156,7 @@ describe('Lists', () => {
 			TaskFactory.create(1)
 			cy.visit('/lists/1/gantt')
 
-			cy.get('.gantt-chart-container .gantt-chart.box .tasks')
+			cy.get('.gantt-chart-container .gantt-chart .tasks')
 				.should('be.empty')
 		})
 
@@ -164,7 +164,7 @@ describe('Lists', () => {
 			const now = new Date()
 			cy.visit('/lists/1/gantt')
 
-			cy.get('.gantt-chart-container .gantt-chart.box .months')
+			cy.get('.gantt-chart-container .gantt-chart .months')
 				.should('contain', format(now, 'MMMM'))
 				.should('contain', format(now.setMonth(now.getMonth() + 1), 'MMMM'))
 		})
@@ -177,9 +177,9 @@ describe('Lists', () => {
 			})
 			cy.visit('/lists/1/gantt')
 
-			cy.get('.gantt-chart-container .gantt-chart.box .tasks')
+			cy.get('.gantt-chart-container .gantt-chart .tasks')
 				.should('not.be.empty')
-			cy.get('.gantt-chart-container .gantt-chart.box .tasks')
+			cy.get('.gantt-chart-container .gantt-chart .tasks')
 				.should('contain', tasks[0].title)
 		})
 
@@ -194,9 +194,9 @@ describe('Lists', () => {
 				.contains('Show tasks which don\'t have dates set')
 				.click()
 
-			cy.get('.gantt-chart-container .gantt-chart.box .tasks')
+			cy.get('.gantt-chart-container .gantt-chart .tasks')
 				.should('not.be.empty')
-			cy.get('.gantt-chart-container .gantt-chart.box .tasks .task.nodate')
+			cy.get('.gantt-chart-container .gantt-chart .tasks .task.nodate')
 				.should('exist')
 		})
 
@@ -208,7 +208,7 @@ describe('Lists', () => {
 			})
 			cy.visit('/lists/1/gantt')
 
-			cy.get('.gantt-chart-container .gantt-chart.box .tasks .task')
+			cy.get('.gantt-chart-container .gantt-chart .tasks .task')
 				.first()
 				.trigger('mousedown', {which: 1})
 				.trigger('mousemove', {clientX: 500, clientY: 0})
diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index dd415d6c..fc512075 100644
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@@ -11,7 +11,7 @@
 			</a>
 		</header>
 		<div class="card-content" :class="{'p-0': !padding}">
-			<div class="content">
+			<div :class="{'content': hasContent}">
 				<slot></slot>
 			</div>
 		</div>
@@ -42,6 +42,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		hasContent: {
+			type: Boolean,
+			default: true,
+		},
 	},
 }
 </script>
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index aa788afe..7fa7a60c 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="gantt-chart box">
+	<div class="gantt-chart">
 		<div class="filter-container">
 			<div class="items">
 				<x-button
diff --git a/src/styles/components/gantt.scss b/src/styles/components/gantt.scss
index 1a5bd08c..b27c7a15 100644
--- a/src/styles/components/gantt.scss
+++ b/src/styles/components/gantt.scss
@@ -6,8 +6,8 @@ $gantt-vertical-border-color: $grey-100;
 }
 
 .gantt-chart {
-  padding: 5px 0;
   overflow-x: auto;
+  border-top: 1px solid $grey-200;
 
   .dates {
     display: flex;
@@ -195,10 +195,6 @@ $gantt-vertical-border-color: $grey-100;
       font-size: .68rem;
     }
   }
-
-  .filter-container {
-    margin-top: -136px;
-  }
 }
 
 .gantt-options {
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index 1ed1a048..b3b6559f 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -81,7 +81,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
           font-size: .85rem;
           word-break: break-word;
         }
-        
+
         .progress {
           margin: 8px 0 0 0;
           width: 100%;
diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss
index 7a5b9453..5456ce92 100644
--- a/src/styles/components/list.scss
+++ b/src/styles/components/list.scss
@@ -144,7 +144,7 @@
 
 .link-share-container .gantt-chart-container .filter-container,
 .gantt-chart-container .filter-container {
-  margin-top: -136px;
+  margin-top: calc(-138px - 2rem);
 }
 
 .link-share-container .list-view .filter-container {
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index 023b4cef..c7793551 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -1,3 +1,15 @@
+.tasks-container {
+  display: flex;
+
+  .tasks {
+    width: 100%;
+  }
+
+  .taskedit {
+    width: 50%;
+  }
+}
+
 .tasks {
   margin-top: 1rem;
   padding: 0;
@@ -20,14 +32,19 @@
   .task {
     display: flex;
     flex-wrap: wrap;
-    padding: 0.5rem 1rem;
-    border-bottom: 1px solid $grey-200;
+    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-200;
+      background-color: $grey-100;
     }
 
     .tasktext,
@@ -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;
 }
 
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index a6f4239c..945bcbcf 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -5,28 +5,6 @@
   background-attachment: fixed;
   min-height: 100vh;
 
-  .namespace-container {
-    background: $transparent-background-light;
-  }
-
-  .tasks {
-    background: $transparent-background-light;
-    border-radius: $radius;
-
-    .task:first-child {
-      border-radius: $radius $radius 0 0;
-    }
-
-    .task:last-child {
-      border-radius: 0 0 $radius $radius;
-    }
-  }
-
-  .table-view .table {
-    background: $transparent-background-light;
-    border-radius: $radius;
-  }
-
   .pagination-link:not(.is-current) {
     background: $light-background;
   }
@@ -54,10 +32,6 @@
   }
 }
 
-.navbar.has-background {
-  background: $transparent-background-light;
-}
-
 .link-share-container.has-background .view {
   background: transparent;
   border: none;
diff --git a/src/styles/theme/variables/variables.scss b/src/styles/theme/variables/variables.scss
index b0f3d7e1..3653d246 100644
--- a/src/styles/theme/variables/variables.scss
+++ b/src/styles/theme/variables/variables.scss
@@ -19,7 +19,6 @@ $bulmaswatch-import-font: false !default;
 $light-background: $grey-100;
 $transition-duration: 100ms;
 $flash-background-duration: 750ms;
-$transparent-background-light: rgba($light-background, 0.9);
 
 $vikunja-font: 'Quicksand', sans-serif;
 $vikunja-light-text: $grey-100;
diff --git a/src/views/list/views/Gantt.vue b/src/views/list/views/Gantt.vue
index 38e8c938..1164b04c 100644
--- a/src/views/list/views/Gantt.vue
+++ b/src/views/list/views/Gantt.vue
@@ -1,6 +1,7 @@
 <template>
 	<div class="gantt-chart-container">
-		<div class="gantt-options">
+		<card :padding="false" class="has-overflow">
+		<div class="gantt-options p-4">
 			<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
 				Show tasks which don't have dates set
 			</fancycheckbox>
@@ -56,6 +57,7 @@
 			<router-view/>
 		</transition>
 
+		</card>
 	</div>
 </template>
 
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index 3f87d77b..4f979355 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -51,46 +51,48 @@
 			/>
 		</div>
 
-		<div class="field task-add" v-if="!list.isArchived && canWrite && list.id > 0">
-			<div class="field is-grouped">
-				<p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded">
-					<input
-						:class="{ 'disabled': taskService.loading}"
-						@keyup.enter="addTask()"
-						class="input"
-						placeholder="Add a new task..."
-						type="text"
-						v-focus
-						v-model="newTaskText"
-						ref="newTaskInput"
-					/>
-					<span class="icon is-small is-left">
+		<card :padding="false" :has-content="false">
+			<div class="field task-add p-4 mb-0" v-if="!list.isArchived && canWrite && list.id > 0">
+				<div class="field is-grouped">
+					<p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded">
+						<input
+							:class="{ 'disabled': taskService.loading}"
+							@keyup.enter="addTask()"
+							class="input"
+							placeholder="Add a new task..."
+							type="text"
+							v-focus
+							v-model="newTaskText"
+							ref="newTaskInput"
+						/>
+						<span class="icon is-small is-left">
 						<icon icon="tasks"/>
 					</span>
-				</p>
-				<p class="control">
-					<x-button
-						:disabled="newTaskText.length === 0"
-						@click="addTask()"
-						icon="plus"
-					>
-						Add
-					</x-button>
+					</p>
+					<p class="control">
+						<x-button
+							:disabled="newTaskText.length === 0"
+							@click="addTask()"
+							icon="plus"
+						>
+							Add
+						</x-button>
+					</p>
+				</div>
+				<p class="help is-danger" v-if="showError && newTaskText === ''">
+					Please specify a list title.
 				</p>
 			</div>
-			<p class="help is-danger" v-if="showError && newTaskText === ''">
-				Please specify a list title.
+
+			<p
+				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>
 
-		<p class="has-text-centered has-text-grey is-italic" 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" v-if="tasks && tasks.length > 0">
+			<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"
@@ -104,48 +106,49 @@
 						</div>
 					</single-task-in-list>
 				</div>
-			</div>
-			<div class="column is-4" v-if="isTaskEdit">
-				<card class="taskedit" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false">
+				<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>
-		</div>
 
-		<nav
-			aria-label="pagination"
-			class="pagination is-centered"
-			role="navigation"
-			v-if="taskCollectionService.totalPages > 1">
-			<router-link
-				:disabled="currentPage === 1"
-				:to="getRouteForPagination(currentPage - 1)"
-				class="pagination-previous"
-				tag="button">
-				Previous
-			</router-link>
-			<router-link
-				:disabled="currentPage === taskCollectionService.totalPages"
-				:to="getRouteForPagination(currentPage + 1)"
-				class="pagination-next"
-				tag="button">
-				Next page
-			</router-link>
-			<ul class="pagination-list">
-				<template v-for="(p, i) in pages">
-					<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
-					<li :key="'page'+i" v-else>
-						<router-link
-							:aria-label="'Goto page ' + p.number"
-							:class="{'is-current': p.number === currentPage}"
-							:to="getRouteForPagination(p.number)"
-							class="pagination-link">
-							{{ p.number }}
-						</router-link>
-					</li>
-				</template>
-			</ul>
-		</nav>
+			<nav
+				aria-label="pagination"
+				class="pagination is-centered p-4"
+				role="navigation"
+				v-if="taskCollectionService.totalPages > 1">
+				<router-link
+					:disabled="currentPage === 1"
+					:to="getRouteForPagination(currentPage - 1)"
+					class="pagination-previous"
+					tag="button">
+					Previous
+				</router-link>
+				<router-link
+					:disabled="currentPage === taskCollectionService.totalPages"
+					:to="getRouteForPagination(currentPage + 1)"
+					class="pagination-next"
+					tag="button">
+					Next page
+				</router-link>
+				<ul class="pagination-list">
+					<template v-for="(p, i) in pages">
+						<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
+						<li :key="'page'+i" v-else>
+							<router-link
+								:aria-label="'Goto page ' + p.number"
+								:class="{'is-current': p.number === currentPage}"
+								:to="getRouteForPagination(p.number)"
+								class="pagination-link">
+								{{ p.number }}
+							</router-link>
+						</li>
+					</template>
+				</ul>
+			</nav>
+		</card>
 
 		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
 		<transition name="modal">
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index 1c707b35..78981b03 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -41,144 +41,146 @@
 			/>
 		</div>
 
-		<table class="table is-hoverable is-fullwidth">
-			<thead>
-			<tr>
-				<th v-if="activeColumns.id">
-					#
-					<sort :order="sortBy.id" @click="sort('id')"/>
-				</th>
-				<th v-if="activeColumns.done">
-					Done
-					<sort :order="sortBy.done" @click="sort('done')"/>
-				</th>
-				<th v-if="activeColumns.title">
-					Name
-					<sort :order="sortBy.title" @click="sort('title')"/>
-				</th>
-				<th v-if="activeColumns.priority">
-					Priority
-					<sort :order="sortBy.priority" @click="sort('priority')"/>
-				</th>
-				<th v-if="activeColumns.labels">
-					Labels
-				</th>
-				<th v-if="activeColumns.assignees">
-					Assignees
-				</th>
-				<th v-if="activeColumns.dueDate">
-					Due&nbsp;Date
-					<sort :order="sortBy.due_date" @click="sort('due_date')"/>
-				</th>
-				<th v-if="activeColumns.startDate">
-					Start&nbsp;Date
-					<sort :order="sortBy.start_date" @click="sort('start_date')"/>
-				</th>
-				<th v-if="activeColumns.endDate">
-					End&nbsp;Date
-					<sort :order="sortBy.end_date" @click="sort('end_date')"/>
-				</th>
-				<th v-if="activeColumns.percentDone">
-					%&nbsp;Done
-					<sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
-				</th>
-				<th v-if="activeColumns.created">
-					Created
-					<sort :order="sortBy.created" @click="sort('created')"/>
-				</th>
-				<th v-if="activeColumns.updated">
-					Updated
-					<sort :order="sortBy.updated" @click="sort('updated')"/>
-				</th>
-				<th v-if="activeColumns.createdBy">
-					Created&nbsp;By
-				</th>
-			</tr>
-			</thead>
-			<tbody>
-			<tr :key="t.id" v-for="t in tasks">
-				<td v-if="activeColumns.id">
-					<router-link :to="{name: 'task.detail', params: { id: t.id }}">
-						<template v-if="t.identifier === ''">
-							#{{ t.index }}
-						</template>
-						<template v-else>
-							{{ t.identifier }}
-						</template>
-					</router-link>
-				</td>
-				<td v-if="activeColumns.done">
-					<div class="is-done" v-if="t.done">Done</div>
-				</td>
-				<td v-if="activeColumns.title">
-					<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
-				</td>
-				<td v-if="activeColumns.priority">
-					<priority-label :priority="t.priority" :show-all="true"/>
-				</td>
-				<td v-if="activeColumns.labels">
-					<labels :labels="t.labels"/>
-				</td>
-				<td v-if="activeColumns.assignees">
-					<user
-						:avatar-size="27"
-						:is-inline="true"
-						:key="t.id + 'assignee' + a.id + i"
-						:show-username="false"
-						:user="a"
-						v-for="(a, i) in t.assignees"
-					/>
-				</td>
-				<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
-				<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
-				<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
-				<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
-				<date-table-cell :date="t.created" v-if="activeColumns.created"/>
-				<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
-				<td v-if="activeColumns.createdBy">
-					<user
-						:avatar-size="27"
-						:show-username="false"
-						:user="t.createdBy"/>
-				</td>
-			</tr>
-			</tbody>
-		</table>
-
-		<nav
-			aria-label="pagination"
-			class="pagination is-centered"
-			role="navigation"
-			v-if="taskCollectionService.totalPages > 1">
-			<router-link
-				:disabled="currentPage === 1"
-				:to="getRouteForPagination(currentPage - 1, 'table')"
-				class="pagination-previous"
-				tag="button">
-				Previous
-			</router-link>
-			<router-link
-				:disabled="currentPage === taskCollectionService.totalPages"
-				:to="getRouteForPagination(currentPage + 1, 'table')"
-				class="pagination-next"
-				tag="button">
-				Next page
-			</router-link>
-			<ul class="pagination-list">
-				<template v-for="(p, i) in pages">
-					<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
-					<li :key="'page'+i" v-else>
-						<router-link
-							:aria-label="'Goto page ' + p.number"
-							:class="{'is-current': p.number === currentPage}"
-							:to="getRouteForPagination(p.number, 'table')"
-							class="pagination-link">
-							{{ p.number }}
+		<card :padding="false" :has-content="false">
+			<table class="table is-hoverable is-fullwidth mb-0">
+				<thead>
+				<tr>
+					<th v-if="activeColumns.id">
+						#
+						<sort :order="sortBy.id" @click="sort('id')"/>
+					</th>
+					<th v-if="activeColumns.done">
+						Done
+						<sort :order="sortBy.done" @click="sort('done')"/>
+					</th>
+					<th v-if="activeColumns.title">
+						Name
+						<sort :order="sortBy.title" @click="sort('title')"/>
+					</th>
+					<th v-if="activeColumns.priority">
+						Priority
+						<sort :order="sortBy.priority" @click="sort('priority')"/>
+					</th>
+					<th v-if="activeColumns.labels">
+						Labels
+					</th>
+					<th v-if="activeColumns.assignees">
+						Assignees
+					</th>
+					<th v-if="activeColumns.dueDate">
+						Due&nbsp;Date
+						<sort :order="sortBy.due_date" @click="sort('due_date')"/>
+					</th>
+					<th v-if="activeColumns.startDate">
+						Start&nbsp;Date
+						<sort :order="sortBy.start_date" @click="sort('start_date')"/>
+					</th>
+					<th v-if="activeColumns.endDate">
+						End&nbsp;Date
+						<sort :order="sortBy.end_date" @click="sort('end_date')"/>
+					</th>
+					<th v-if="activeColumns.percentDone">
+						%&nbsp;Done
+						<sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
+					</th>
+					<th v-if="activeColumns.created">
+						Created
+						<sort :order="sortBy.created" @click="sort('created')"/>
+					</th>
+					<th v-if="activeColumns.updated">
+						Updated
+						<sort :order="sortBy.updated" @click="sort('updated')"/>
+					</th>
+					<th v-if="activeColumns.createdBy">
+						Created&nbsp;By
+					</th>
+				</tr>
+				</thead>
+				<tbody>
+				<tr :key="t.id" v-for="t in tasks">
+					<td v-if="activeColumns.id">
+						<router-link :to="{name: 'task.detail', params: { id: t.id }}">
+							<template v-if="t.identifier === ''">
+								#{{ t.index }}
+							</template>
+							<template v-else>
+								{{ t.identifier }}
+							</template>
 						</router-link>
-					</li>
-				</template>
-			</ul>
-		</nav>
+					</td>
+					<td v-if="activeColumns.done">
+						<div class="is-done" v-if="t.done">Done</div>
+					</td>
+					<td v-if="activeColumns.title">
+						<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
+					</td>
+					<td v-if="activeColumns.priority">
+						<priority-label :priority="t.priority" :show-all="true"/>
+					</td>
+					<td v-if="activeColumns.labels">
+						<labels :labels="t.labels"/>
+					</td>
+					<td v-if="activeColumns.assignees">
+						<user
+							:avatar-size="27"
+							:is-inline="true"
+							:key="t.id + 'assignee' + a.id + i"
+							:show-username="false"
+							:user="a"
+							v-for="(a, i) in t.assignees"
+						/>
+					</td>
+					<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
+					<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
+					<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
+					<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
+					<date-table-cell :date="t.created" v-if="activeColumns.created"/>
+					<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
+					<td v-if="activeColumns.createdBy">
+						<user
+							:avatar-size="27"
+							:show-username="false"
+							:user="t.createdBy"/>
+					</td>
+				</tr>
+				</tbody>
+			</table>
+
+			<nav
+				aria-label="pagination"
+				class="pagination is-centered p-4"
+				role="navigation"
+				v-if="taskCollectionService.totalPages > 1">
+				<router-link
+					:disabled="currentPage === 1"
+					:to="getRouteForPagination(currentPage - 1, 'table')"
+					class="pagination-previous"
+					tag="button">
+					Previous
+				</router-link>
+				<router-link
+					:disabled="currentPage === taskCollectionService.totalPages"
+					:to="getRouteForPagination(currentPage + 1, 'table')"
+					class="pagination-next"
+					tag="button">
+					Next page
+				</router-link>
+				<ul class="pagination-list">
+					<template v-for="(p, i) in pages">
+						<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
+						<li :key="'page'+i" v-else>
+							<router-link
+								:aria-label="'Goto page ' + p.number"
+								:class="{'is-current': p.number === currentPage}"
+								:to="getRouteForPagination(p.number, 'table')"
+								class="pagination-link">
+								{{ p.number }}
+							</router-link>
+						</li>
+					</template>
+				</ul>
+			</nav>
+		</card>
 
 		<!-- This router view is used to show the task popup while keeping the table view itself -->
 		<transition name="modal">
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index 644959f1..12ccb206 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -9,7 +9,7 @@
 			Show tasks without dates
 		</fancycheckbox>
 		<h3 v-if="showAll && tasks.length > 0">Current tasks</h3>
-		<h3 v-else-if="!showAll">
+		<h3 v-else-if="!showAll" class="mb-2">
 			Tasks from
 			<flat-pickr
 				:class="{ 'disabled': taskService.loading}"
@@ -29,25 +29,28 @@
 				v-model="cEndDate"
 			/>
 		</h3>
-		<div v-if="!showAll">
-			<x-button type="secondary" @click="showTodaysTasks()" :shadow="false" class="mr-2">Today</x-button>
-			<x-button type="secondary" @click="setDatesToNextWeek()" :shadow="false" class="mr-2">Next Week</x-button>
-			<x-button type="secondary" @click="setDatesToNextMonth()" :shadow="false">Next Month</x-button>
+		<div v-if="!showAll" class="mb-4">
+			<x-button type="secondary" @click="showTodaysTasks()" class="mr-2">Today</x-button>
+			<x-button type="secondary" @click="setDatesToNextWeek()" class="mr-2">Next Week</x-button>
+			<x-button type="secondary" @click="setDatesToNextMonth()">Next Month</x-button>
 		</div>
-		<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0)">
+		<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0) && showNothingToDo">
 			<h3 class="nothing">Nothing to do - Have a nice day!</h3>
 			<img alt="" src="/images/cool.svg"/>
 		</template>
 		<div :class="{ 'is-loading': taskService.loading}" class="spinner"></div>
-		<div class="tasks" v-if="tasks && tasks.length > 0">
-			<single-task-in-list
-				:key="t.id"
-				class="task"
-				v-for="t in tasks"
-				:show-list="true"
-				:the-task="t"
-				@taskUpdated="updateTasks"/>
-		</div>
+
+		<card :padding="false" :has-content="false" v-if="tasks && tasks.length > 0">
+			<div class="tasks">
+				<single-task-in-list
+					:key="t.id"
+					class="task"
+					v-for="t in tasks"
+					:show-list="true"
+					:the-task="t"
+					@taskUpdated="updateTasks"/>
+			</div>
+		</card>
 	</div>
 </template>
 <script>
@@ -78,6 +81,8 @@ export default {
 			cStartDate: null,
 			cEndDate: null,
 
+			showNothingToDo: false,
+
 			flatPickerConfig: {
 				altFormat: 'j M Y H:i',
 				altInput: true,
@@ -98,6 +103,9 @@ export default {
 		this.cEndDate = this.endDate
 		this.loadPendingTasks()
 	},
+	mounted() {
+		setTimeout(() => this.showNothingToDo = true, 100)
+	},
 	watch: {
 		'$route': 'loadPendingTasks',
 		startDate(newVal) {