improved empty board

This commit is contained in:
Gamebrary 2020-10-13 17:37:32 -07:00
parent 3bb49b434c
commit bd68c7c116

View file

@ -1,5 +1,5 @@
<template lang="html"> <template lang="html">
<div :class="['board', { dragging }]" :style="wallpaper"> <div :class="['board', { dragging, 'empty': isEmptyBoard }]" :style="wallpaper">
<board-placeholder v-if="loading" /> <board-placeholder v-if="loading" />
<template v-else> <template v-else>
@ -10,7 +10,9 @@
:key="list.name" :key="list.name"
/> />
<div class="d-flex flex-column pr-3"> <empty-board v-if="isEmptyBoard" class="mr-3" />
<div :class="['d-flex flex-column', { 'pr-3': !isEmptyBoard }]">
<add-list /> <add-list />
<board-settings /> <board-settings />
</div> </div>
@ -23,6 +25,7 @@
<script> <script>
import BoardSettings from '@/components/Settings/BoardSettings'; import BoardSettings from '@/components/Settings/BoardSettings';
import BoardPlaceholder from '@/components/Board/BoardPlaceholder'; import BoardPlaceholder from '@/components/Board/BoardPlaceholder';
import EmptyBoard from '@/components/Board/EmptyBoard';
import AddList from '@/components/Board/AddList'; import AddList from '@/components/Board/AddList';
import GameModal from '@/components/Game/GameModal'; import GameModal from '@/components/Game/GameModal';
import List from '@/components/Lists/List'; import List from '@/components/Lists/List';
@ -35,6 +38,7 @@ export default {
draggable, draggable,
List, List,
BoardPlaceholder, BoardPlaceholder,
EmptyBoard,
AddList, AddList,
BoardSettings, BoardSettings,
GameModal, GameModal,
@ -61,7 +65,13 @@ export default {
return this.$route.params.id; return this.$route.params.id;
}, },
isEmptyBoard() {
// TODO: use optional chaining
return this.board && this.board.lists && this.board.lists.length === 0;
},
isPublicBoard() { isPublicBoard() {
// TODO: use optional chaining
return this.$route.meta && this.$route.meta.public; return this.$route.meta && this.$route.meta.public;
}, },
}, },
@ -193,6 +203,7 @@ export default {
overflow-x: auto; overflow-x: auto;
overflow-x: overlay; overflow-x: overlay;
display: flex; display: flex;
background-color: #ccc;
} }
.list-placeholder { .list-placeholder {