2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-12-25 10:33:11 +00:00
gamebrary/src/components/Board/BoardPlaceholder.vue

105 lines
2.1 KiB
Vue
Raw Normal View History

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';
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;
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;
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
}
&.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);
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>