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

clean up board placeholder

Browse source
This commit is contained in:
Gamebrary 2021-04-20 13:28:33 -07:00
parent 9704caf7c3
commit 1f0360c150
1 changed files with 89 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

175
src/components/Board/BoardPlaceholder.vue
View file

@ -5,96 +5,101 @@
:class="`list ${list.settings.view || 'single'}`" :class="`list ${list.settings.view || 'single'}`"
:key="list.name" :key="list.name"
> >
<b-card no-body> <b-card no-body bg-variant="dark">
<b-card-header class="pt-2 pb-1 px-2"> <b-card-header class="pt-2 pb-1 px-2">
<b-skeleton /> <b-skeleton />
</b-card-header> </b-card-header>
<div <div
v-if="list.games.length" v-if="list.games.length"
:class="['games', list.settings.view]" :class="['games', list.settings.view]"
> >
<div v-for="n in list.games.length" :key="n"> <div v-for="n in list.games.length" :key="n">
<b-card <b-card
no-body no-body
img-top img-top
v-if="list.settings.view === 'grid'" bg-variant="dark"
> v-if="list.settings.view === 'grid'"
<b-skeleton-img >
card-img="top" <b-skeleton-img
height="180px" card-img="top"
/> height="180px"
/>
<b-card-body class="p-2"> <b-card-body class="p-2">
<b-skeleton class="mt-2" /> <b-skeleton class="mt-2" />
</b-card-body> </b-card-body>
</b-card> </b-card>
<div <div
v-else-if="list.settings.view === 'covers'" v-else-if="list.settings.view === 'covers'"
class="covers-grid" bg-variant="dark"
> class="covers-grid"
<b-skeleton-img >
v-for="n in 3" <b-skeleton-img
:key="n" v-for="n in 3"
height="120px" :key="n"
/> height="120px"
/>
</div>
<b-card
v-else-if="!list.settings.view || list.settings.view === 'single'"
no-body
bg-variant="dark"
img-left
>
<b-skeleton-img
card-img="left"
width="94px"
height="124px"
/>
<b-card-body class="p-2">
<b-skeleton />
</b-card-body>
</b-card>
<b-card
v-else-if="list.settings.view === 'compact'"
no-body
bg-variant="dark"
img-left
>
<b-skeleton-img
card-img="left"
width="70px"
height="93px"
/>
<b-card-body class="p-2">
<b-skeleton />
</b-card-body>
</b-card>
<b-card
v-else
no-body
bg-variant="dark"
img-left
>
<b-card-body class="p-2">
<b-skeleton />
</b-card-body>
</b-card>
</div> </div>
<b-card
v-else-if="!list.settings.view || list.settings.view === 'single'"
no-body
img-left
>
<b-skeleton-img
card-img="left"
width="94px"
height="124px"
/>
<b-card-body class="p-2">
<b-skeleton />
</b-card-body>
</b-card>
<b-card
v-else-if="list.settings.view === 'compact'"
no-body
img-left
>
<b-skeleton-img
card-img="left"
width="70px"
height="93px"
/>
<b-card-body class="p-2">
<b-skeleton />
</b-card-body>
</b-card>
<b-card
v-else-if="list.settings.view === 'text'"
no-body
img-left
>
<b-card-body class="p-2">
<b-skeleton />
</b-card-body>
</b-card>
</div> </div>
</div>
<b-button <b-button
v-else v-else
variant="light" variant="light"
block block
class="mb-2" class="mb-2"
disabled disabled
> >
Click here or drag games here Click here or drag games here
</b-button> </b-button>
</b-card> </b-card>
</div> </div>
</div> </div>
</template> </template>
@ -131,8 +136,6 @@ export default {
.list { .list {
flex-shrink: 0; flex-shrink: 0;
cursor: default; cursor: default;
border-radius: var(--border-radius);
background: var(--list-background);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 300px; width: 300px;