Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-12-19 15:53:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

change board bg based on theme

Browse source
This commit is contained in:
Gamebrary 2020-10-14 14:53:57 -07:00
parent 9a671387de
commit e223ac4b87
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/pages/Board.vue
View file

@ -1,5 +1,8 @@
<template lang="html"> <template lang="html">
<div :class="['board', { dragging, 'empty': isEmptyBoard }]" :style="wallpaper"> <div
:class="['board', boardBackground, { dragging, 'empty': isEmptyBoard }]"
:style="wallpaper"
>
<board-placeholder v-if="loading" /> <board-placeholder v-if="loading" />
<template v-else> <template v-else>
@ -30,7 +33,7 @@ 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';
import chunk from 'lodash.chunk'; import chunk from 'lodash.chunk';
import { mapState } from 'vuex'; import { mapState, mapGetters } from 'vuex';
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
export default { export default {
@ -54,6 +57,7 @@ export default {
computed: { computed: {
...mapState(['user', 'dragging', 'board', 'wallpapers']), ...mapState(['user', 'dragging', 'board', 'wallpapers']),
...mapGetters(['nightMode']),
wallpaper() { wallpaper() {
return this.wallpaperUrl return this.wallpaperUrl
@ -74,6 +78,12 @@ export default {
// TODO: use optional chaining // TODO: use optional chaining
return this.$route.meta && this.$route.meta.public; return this.$route.meta && this.$route.meta.public;
}, },
boardBackground() {
return this.nightMode
? 'bg-dark'
: 'bg-light';
},
}, },
watch: { watch: {
@ -203,7 +213,6 @@ 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 {