Fix styling and rename to actual dashboard api

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-08-20 15:40:38 +02:00
parent 31a9162ff4
commit aa244108c8
14 changed files with 92 additions and 60 deletions

View File

@@ -22,7 +22,7 @@
<template>
<div>
<Controls :dashboard-name="filterDisplayName" />
<Controls :overview-name="filterDisplayName" />
<div v-if="loading" key="loading" class="emptycontent">
<div class="icon icon-loading" />
@@ -33,46 +33,46 @@
<div v-else>
<div v-if="isValidFilter" class="dashboard">
<div class="dashboard-column">
<h2>{{ t('deck', 'No due') }}</h2>
<div v-for="card in cardsByDueDate.nodue" :key="card.id">
<CardItem :id="card.id" />
</div>
</div>
<div class="dashboard-column">
<h2>{{ t('deck', 'Overdue') }}</h2>
<h3>{{ t('deck', 'Overdue') }}</h3>
<div v-for="card in cardsByDueDate.overdue" :key="card.id">
<CardItem :id="card.id" />
</div>
</div>
<div class="dashboard-column">
<h2>{{ t('deck', 'Today') }}</h2>
<h3>{{ t('deck', 'Today') }}</h3>
<div v-for="card in cardsByDueDate.today" :key="card.id">
<CardItem :id="card.id" />
</div>
</div>
<div class="dashboard-column">
<h2>{{ t('deck', 'Tomorrow') }}</h2>
<h3>{{ t('deck', 'Tomorrow') }}</h3>
<div v-for="card in cardsByDueDate.tomorrow" :key="card.id">
<CardItem :id="card.id" />
</div>
</div>
<div class="dashboard-column">
<h2>{{ t('deck', 'This week') }}</h2>
<h3>{{ t('deck', 'This week') }}</h3>
<div v-for="card in cardsByDueDate.thisWeek" :key="card.id">
<CardItem :id="card.id" />
</div>
</div>
<div class="dashboard-column">
<h2>{{ t('deck', 'Later') }}</h2>
<h3>{{ t('deck', 'Later') }}</h3>
<div v-for="card in cardsByDueDate.later" :key="card.id">
<CardItem :id="card.id" />
</div>
</div>
<div class="dashboard-column">
<h3>{{ t('deck', 'No due') }}</h3>
<div v-for="card in cardsByDueDate.nodue" :key="card.id">
<CardItem :id="card.id" />
</div>
</div>
</div>
</div>
</div>
@@ -102,7 +102,7 @@ export default {
props: {
filter: {
type: String,
default: '',
default: FILTER_ASSIGNED,
},
},
data() {
@@ -116,8 +116,8 @@ export default {
},
filterDisplayName() {
switch (this.filter) {
case 'assigned':
return t('deck', 'My assigned cards')
case FILTER_ASSIGNED:
return t('deck', 'Assigned cards')
default:
return ''
}
@@ -211,13 +211,15 @@ export default {
.dashboard {
display: flex;
align-items: stretch;
margin: $board-spacing;
margin-left: $board-spacing;
margin-right: $board-spacing;
.dashboard-column {
display: flex;
flex-direction: column;
width: $stack-width;
margin: $stack-spacing;
min-width: $stack-width;
margin-left: $stack-spacing;
margin-right: $stack-spacing;
}
}