use isotope layout in boards

package.json

@@ -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",

src/components/Board/MiniBoard.vue

@@ -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
+            <i class="fas fa-square fa-fw text-muted" style="margin-left: 1px;" aria-hidden />
-              class="fas fa-ellipsis-h text-secondary ml-1"
-              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;

src/components/Boards.vue

@@ -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">
+    <div class="packery-grid">
-      <b-card
+      <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
+        :board="board"
-        :bg-variant="darkTheme ? 'dark' : null"
+        :background-image="getWallpaperUrl(board.backgroundUrl)"
-        :text-variant="darkTheme ?  'white' : null"
+        class="p-relative"
-        class="overflow-hidden clickable position-relative"
+        @view-board="viewBoard(board.id)"
-        @click="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>
+      </mini-board>
-
-      <edit-board-modal />
     </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>