Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-23 11:43:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

mini board improvements

Browse source
This commit is contained in:
Gamebrary 2022-08-21 10:21:21 -07:00
parent 7345a56f24
commit 2acf4a63ea
1 changed files with 12 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/Board/MiniBoard.vue
View file

@ -1,30 +1,30 @@
<template lang="html"> <template lang="html">
<div <div
:class="['mini-board overflow-hidden p-1 rounded cursor-pointer m-0', { 'bg-secondary': !board.backgroundColor }]" :class="['mini-board overflow-hidden rounded cursor-pointer m-0', { 'bg-light': !board.backgroundColor }]"
:style="miniBoardStyles" :style="miniBoardStyles"
@click="$emit('view-board', board.id)" @click="$emit('view-board', board.id)"
> >
<header class="text-small d-flex align-items-center"> <header class="text-small py-1 px-2 d-flex align-items-center justify-content-between">
<span class="mr-1">{{ board.name }}</span> <span class="mr-1 text-muted mb-1">{{ board.name }}</span>
<small v-if="board.isPublic" class="text-info"> <b-button v-if="board.isPublic" class="bg-warning text-white p-0 px-1" size="sm">
(Public) Public
</small> </b-button>
</header> </header>
<div class="lists rounded overflow-hidden"> <div class="lists rounded overflow-hidden">
<div <div
v-for="list in board.lists" v-for="list in board.lists"
:key="list.name" :key="list.name"
class="list rounded overflow-hidden mr-1 border align-self-start" class="list rounded overflow-hidden mr-2 border align-self-start"
> >
<template v-if="list.games.length"> <template v-if="list.games.length">
<div <div
v-for="(game, index) in list.games" v-for="(game, index) in list.games"
:key="game" :key="game"
:class="['bg-secondary', { 'border-bottom': index !== list.games.length - 1 }]" :class="['list bg-light', { 'border-bottom': index !== list.games.length - 1 }]"
> >
<i class="fas fa-square fa-fw text-muted" style="margin-left: 1px;" aria-hidden /> <i class="fas fa-square fa-fw text-white" style="margin-left: 1px;" aria-hidden />
</div> </div>
</template> </template>
@ -64,21 +64,16 @@ $boardHeight: 200px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
height: $boardHeight; height: $boardHeight;
// width: 100%;
// width: 363.2px;
// @media(max-width: 1024px) { width: 320px; }
// @media(max-width: 768px) { width: 360px; }
// @media(width: 500px) { width: 222px; }
// @media(max-width: 500px) { width: calc(100% - 8px); }
} }
.lists { .lists {
max-height: $boardHeight - 40px; max-height: $boardHeight - 40px;
display: flex; display: flex;
flex-wrap: wrap;
} }
.list { .list {
// width: 60px; width: 60px;
max-height: 160px;
} }
</style> </style>