mirror of
https://github.com/romancm/gamebrary
synced 2024-12-18 07:13:07 +00:00
use isotope layout in boards
This commit is contained in:
Gamebrary
parent
6da87733b4
commit
34a4b83d60
3 changed files with 50 additions and 45 deletions
|
|
@ -28,6 +28,7 @@
|
|||
"lodash.orderby": "^4.6.0",
|
||||
"lodash.sortby": "^4.7.0",
|
||||
"node-sass": "^4.8.3",
|
||||
"packery": "^2.1.2",
|
||||
"portal-vue": "^2.1.7",
|
||||
"raven-js": "^3.27.0",
|
||||
"sass-loader": "^7.0.1",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template lang="html">
|
||||
<div
|
||||
class="mini-board p-1 rounded"
|
||||
class="mini-board p-1 rounded cursor-pointer"
|
||||
:style="miniBoardStyles"
|
||||
@click="$emit('view-board', board.id)"
|
||||
>
|
||||
<small :class="{ 'has-background' : miniBoardStyles }">
|
||||
<i
|
||||
|
|
@ -17,24 +18,23 @@
|
|||
</template>
|
||||
</small>
|
||||
|
||||
<slot />
|
||||
|
||||
<div class="lists rounded overflow-hidden">
|
||||
<div
|
||||
v-for="list in board.lists"
|
||||
:key="list.name"
|
||||
class="rounded overflow-hidden list"
|
||||
>
|
||||
<div v-if="list.games.length" :title="list.name">
|
||||
<template v-if="list.games.length">
|
||||
<div
|
||||
v-for="game in list.games"
|
||||
v-for="(game, index) in list.games"
|
||||
:key="game"
|
||||
class="bg-light border-bottom"
|
||||
:class="['bg-light border-bottom ', { 'rounded-bottom': index === list.games.length - 1 }]"
|
||||
>
|
||||
<i
|
||||
class="fas fa-ellipsis-h text-secondary ml-1"
|
||||
aria-hidden
|
||||
/>
|
||||
<i class="fas fa-square fa-fw text-muted" style="margin-left: 1px;" aria-hidden />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-else
|
||||
|
|
@ -73,13 +73,16 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
$boardHeight: 180px;
|
||||
$boardHeight: 216px;
|
||||
$boardWidth: 374.5px;
|
||||
|
||||
.mini-board {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-color: #ccc;
|
||||
height: $boardHeight;
|
||||
width: $boardWidth;
|
||||
max-width: 100%;
|
||||
|
||||
.has-background {
|
||||
text-shadow: 1px 1px black;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,7 @@
|
|||
<template lang="html">
|
||||
<div class="mx-2 mb-2" v-if="user">
|
||||
<!-- TODO: add isotope layout -->
|
||||
<!-- TODO: allow reorganizing and save -->
|
||||
<!-- TODO: show public boards -->
|
||||
<div v-if="showPlaceholder" class="boards">
|
||||
<b-card
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
no-body
|
||||
class="mb-3 p-1 mt-3"
|
||||
>
|
||||
<b-skeleton-img />
|
||||
</b-card>
|
||||
</div>
|
||||
|
||||
<empty-state
|
||||
v-if="!loading && sortedBoards.length === 0"
|
||||
|
|
@ -36,33 +25,41 @@
|
|||
</b-button>
|
||||
</portal>
|
||||
|
||||
<div class="boards">
|
||||
<b-card
|
||||
<div class="packery-grid">
|
||||
<div v-if="showPlaceholder">
|
||||
Loading
|
||||
</div>
|
||||
<!-- <div v-if="">
|
||||
<b-card
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
no-body
|
||||
class="mb-3 p-1 mt-3"
|
||||
>
|
||||
<b-skeleton-img />
|
||||
</b-card>
|
||||
</div> -->
|
||||
|
||||
<mini-board
|
||||
v-for="board in sortedBoards"
|
||||
:key="board.id"
|
||||
no-body
|
||||
:bg-variant="darkTheme ? 'dark' : null"
|
||||
:text-variant="darkTheme ? 'white' : null"
|
||||
class="overflow-hidden clickable position-relative"
|
||||
@click="viewBoard(board.id)"
|
||||
:board="board"
|
||||
:background-image="getWallpaperUrl(board.backgroundUrl)"
|
||||
class="p-relative"
|
||||
@view-board="viewBoard(board.id)"
|
||||
>
|
||||
<mini-board
|
||||
:board="board"
|
||||
:background-image="getWallpaperUrl(board.backgroundUrl)"
|
||||
/>
|
||||
|
||||
<b-button
|
||||
class="position-absolute edit-board-button"
|
||||
:variant="darkTheme ? 'info' : 'light'"
|
||||
:variant="darkTheme ? 'info' : 'outline-light'"
|
||||
size="sm"
|
||||
@click.stop="editBoard(board)"
|
||||
>
|
||||
<i class="fas fa-edit fa-fw" aria-hidden />
|
||||
<i class="fas fa-pencil-alt fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
</b-card>
|
||||
|
||||
<edit-board-modal />
|
||||
</mini-board>
|
||||
</div>
|
||||
|
||||
<edit-board-modal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -70,6 +67,7 @@
|
|||
import MiniBoard from '@/components/Board/MiniBoard';
|
||||
import EditBoardModal from '@/components/Board/EditBoardModal';
|
||||
import EmptyState from '@/components/EmptyState';
|
||||
import Packery from 'packery';
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
|
|
@ -82,6 +80,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
packery: null,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -104,6 +103,7 @@ export default {
|
|||
|
||||
methods: {
|
||||
load() {
|
||||
this.renderGrid();
|
||||
this.loadPlatforms();
|
||||
},
|
||||
|
||||
|
|
@ -155,6 +155,13 @@ export default {
|
|||
});
|
||||
|
||||
this.loading = false;
|
||||
this.renderGrid();
|
||||
},
|
||||
|
||||
renderGrid() {
|
||||
this.packery = this.showPlaceholder && this.user
|
||||
? null
|
||||
: new Packery('.packery-grid', { itemSelector: '.mini-board', gutter: 8 });
|
||||
},
|
||||
|
||||
viewBoard(id) {
|
||||
|
|
@ -179,14 +186,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.boards {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, 320px);
|
||||
}
|
||||
|
||||
.edit-board-button {
|
||||
right: .5rem;
|
||||
bottom: .5rem;
|
||||
top: .5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue