2019-01-11 20:20:21 +00:00
|
|
|
<template lang="html">
|
2019-11-08 20:34:06 +00:00
|
|
|
<div class="gameboard-placeholder">
|
|
|
|
<div
|
2020-08-21 15:08:57 +00:00
|
|
|
v-for="list in board.lists"
|
|
|
|
:class="`list ${list.settings.view || 'single'}`"
|
2019-11-08 20:34:06 +00:00
|
|
|
:key="list.name"
|
|
|
|
>
|
2020-08-11 04:16:43 +00:00
|
|
|
<b-card no-body>
|
|
|
|
<b-card-header class="py-1 px-2">
|
|
|
|
<div class="list-header" />
|
|
|
|
</b-card-header>
|
2019-11-08 20:34:06 +00:00
|
|
|
|
2020-08-21 15:08:57 +00:00
|
|
|
<div :class="['games', list.settings.view]">
|
2019-11-08 20:34:06 +00:00
|
|
|
<placeholder
|
2019-12-17 04:54:31 +00:00
|
|
|
class="game"
|
2019-11-08 20:34:06 +00:00
|
|
|
v-for="n in list.games.length"
|
2020-08-21 15:08:57 +00:00
|
|
|
:lines="list && list.settings.view === 'grid' ? 0 : 2"
|
2019-11-08 20:34:06 +00:00
|
|
|
:key="n"
|
2020-08-21 15:08:57 +00:00
|
|
|
:image="list.settings.view !== 'text'"
|
2019-11-08 20:34:06 +00:00
|
|
|
/>
|
|
|
|
</div>
|
2020-08-11 04:16:43 +00:00
|
|
|
</b-card>
|
2019-01-11 20:20:21 +00:00
|
|
|
</div>
|
2019-11-08 20:34:06 +00:00
|
|
|
</div>
|
2019-01-11 20:20:21 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2019-11-26 21:29:15 +00:00
|
|
|
import { mapState } from 'vuex';
|
2019-08-06 22:45:59 +00:00
|
|
|
import Placeholder from '@/components/Placeholder';
|
2019-01-11 20:20:21 +00:00
|
|
|
|
|
|
|
export default {
|
2019-11-08 19:56:03 +00:00
|
|
|
components: {
|
|
|
|
Placeholder,
|
|
|
|
},
|
2019-01-11 20:20:21 +00:00
|
|
|
|
2019-11-08 19:56:03 +00:00
|
|
|
computed: {
|
2020-08-21 15:08:57 +00:00
|
|
|
...mapState(['board']),
|
2019-11-08 19:56:03 +00:00
|
|
|
},
|
2019-01-11 20:20:21 +00:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" rel="stylesheet/scss" scoped>
|
2020-07-22 20:44:48 +00:00
|
|
|
// @import "~styles/styles";
|
2019-11-08 20:34:06 +00:00
|
|
|
|
|
|
|
.gameboard-placeholder {
|
|
|
|
user-select: none;
|
|
|
|
display: flex;
|
|
|
|
align-items: flex-start;
|
|
|
|
}
|
|
|
|
|
|
|
|
.list {
|
|
|
|
flex-shrink: 0;
|
|
|
|
cursor: default;
|
2020-01-22 16:39:16 +00:00
|
|
|
border-radius: var(--border-radius);
|
2019-11-08 20:34:06 +00:00
|
|
|
background: var(--list-background);
|
|
|
|
overflow: hidden;
|
|
|
|
position: relative;
|
2020-07-22 20:44:48 +00:00
|
|
|
width: 300px;
|
|
|
|
margin-right: 1rem;
|
2019-11-08 20:34:06 +00:00
|
|
|
max-height: calc(100vh - 81px);
|
|
|
|
}
|
|
|
|
|
|
|
|
.list-header {
|
|
|
|
background: var(--list-header-background);
|
2020-07-22 20:44:48 +00:00
|
|
|
height: 32px;
|
2019-11-08 20:34:06 +00:00
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.games {
|
|
|
|
display: grid;
|
2020-07-22 20:44:48 +00:00
|
|
|
grid-gap: .5rem ;
|
|
|
|
padding: .5rem;
|
2019-12-17 04:54:31 +00:00
|
|
|
|
|
|
|
&.single {
|
2020-07-22 20:44:48 +00:00
|
|
|
--placeholder-text-margin: .5rem .5rem 0 0;
|
2020-01-22 16:39:16 +00:00
|
|
|
border-radius: var(--border-radius);
|
2019-12-17 04:54:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&.grid {
|
|
|
|
--placeholder-image-width: 140px;
|
|
|
|
--placeholder-image-height: 200px;
|
2020-07-22 20:44:48 +00:00
|
|
|
padding-top: .5rem;
|
2019-12-17 04:54:31 +00:00
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 1fr 1fr;
|
2020-07-22 20:44:48 +00:00
|
|
|
grid-gap: .25rem;
|
2019-12-17 04:54:31 +00:00
|
|
|
}
|
|
|
|
|
2019-12-18 23:03:57 +00:00
|
|
|
&.compact {
|
2019-12-17 04:54:31 +00:00
|
|
|
--placeholder-image-width: 50px;
|
|
|
|
--placeholder-image-height: 80px;
|
2020-07-22 20:44:48 +00:00
|
|
|
--placeholder-text-margin: .5rem .5rem 0 0;
|
2019-12-17 04:54:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&.text {
|
2020-07-22 20:44:48 +00:00
|
|
|
--placeholder-text-margin: .5rem;
|
2019-12-17 04:54:31 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.game {
|
|
|
|
background: var(--game-card-background);
|
2020-01-22 16:39:16 +00:00
|
|
|
border-radius: var(--border-radius);
|
2019-12-17 04:54:31 +00:00
|
|
|
overflow: hidden;
|
2019-11-08 20:34:06 +00:00
|
|
|
}
|
2019-01-11 20:20:21 +00:00
|
|
|
</style>
|