Masonry layout fixes

src/components/GameBoard/GameBoardPlaceholder.vue

@@ -11,7 +11,7 @@
                 <placeholder
                     image
                     v-for="n in list.games.length"
-                    :lines="list && list.view === 'covers' ? 0 : 2"
+                    :lines="list && list.view === 'grid' ? 0 : 2"
                     :key="n"
                 />
             </div>
@@ -73,11 +73,11 @@ export default {
             --placeholder-image-height: 80px;
         }
 
-        &.covers {
+        &.grid {
             --placeholder-image-width: 90px;
         }
 
-        &.covers .games {
+        &.grid .games {
             padding-top: $gp / 2;
             display: grid;
             grid-template-columns: 1fr 1fr 1fr;

src/components/GameCards/GameCardCover.vue

@@ -1,75 +0,0 @@
-<template lang="html">
-    <div v-if="gameId && games[gameId]" :class="gameCardClass">
-        <img
-            :src="coverUrl"
-            :alt="game.name"
-            @click="openDetails"
-        >
-
-        <i
-            v-if="isDraggable"
-            class="fas fa-grip-vertical game-drag-handle"
-        />
-    </div>
-</template>
-
-<script>
-import GameCardUtils from '@/components/GameCards/GameCard';
-
-export default {
-    mixins: [GameCardUtils],
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
-
-    .game-card {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        background-color: $color-black;
-        border-radius: $border-radius;
-        overflow: hidden;
-
-        &.dark {
-            img {
-                opacity: 0.8;
-            }
-
-            .actions {
-                color: $color-gray;
-            }
-        }
-
-        &.card-placeholder {
-            background: $color-light-gray;
-            outline: 1px dashed $color-gray;
-            opacity: 0.6;
-            flex-direction: row;
-
-            img {
-                max-height: 100px;
-                width: auto;
-            }
-        }
-    }
-
-    img {
-        width: 100%;
-        height: auto;
-        display: flex;
-        align-self: center;
-        cursor: pointer;
-    }
-
-    .game-drag-handle {
-        @include drag-cursor;
-        position: absolute;
-        color: $color-white;
-        top: $gp / 4;
-        right: $gp / 4;
-        padding: $gp / 4;
-        font-size: 12px;
-    }
-</style>

src/components/Lists/List.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable max-len -->
 <template lang="html">
-    <div :class="['list', viewClass, coversSizeClass, { dark: darkModeEnabled }, transparent]">
+    <div :class="['list', viewClass, { dark: darkModeEnabled }, transparent]">
         <div class="list-header" :class="{ searching, editing }">
             <div v-if="searching">
                 {{ $t('gameSearch.title') }}
@@ -34,11 +34,11 @@
             @update="updateLists"
         />
 
-        <div :class="`game-grid game-grid-${listIndex}`" v-if="view === 'grid' && !editing">
+        <div :class="`game-grid game-grid-${listIndex}`" v-if="view === 'grid' && !editing && !searching">
             <component
                 v-for="game in games"
                 :is="gameCardComponent"
-                :key="`covers-${game}`"
+                :key="`grid-${game}`"
                 :id="game"
                 :game-id="game"
                 :list-id="listIndex"
@@ -46,7 +46,7 @@
         </div>
 
         <draggable
-            v-else-if="!editing"
+            v-else-if="!editing && !searching"
             :class="['games', { 'empty': isEmpty }]"
             :list="games"
             :id="listIndex"
@@ -58,7 +58,7 @@
             <component
                 v-for="game in games"
                 :is="gameCardComponent"
-                :key="`covers-${game}`"
+                :key="`grid-${game}`"
                 :id="game"
                 :game-id="game"
                 :list-id="listIndex"
@@ -82,10 +82,9 @@ import Masonry from 'masonry-layout';
 import ListNameEdit from '@/components/Lists/ListNameEdit';
 import ListSettings from '@/components/Lists/ListSettings';
 import GameCardDefault from '@/components/GameCards/GameCardDefault';
-import GameCardCover from '@/components/GameCards/GameCardCover';
+import GameCardGrid from '@/components/GameCards/GameCardGrid';
 import GameCardWide from '@/components/GameCards/GameCardWide';
 import GameCardText from '@/components/GameCards/GameCardText';
-import GameCardGrid from '@/components/GameCards/GameCardGrid';
 import GameSearch from '@/components/GameSearch/GameSearch';
 import { mapState, mapGetters } from 'vuex';
 import firebase from 'firebase/app';
@@ -98,10 +97,9 @@ export default {
 
     components: {
         GameCardDefault,
-        GameCardCover,
+        GameCardGrid,
         GameCardWide,
         GameCardText,
-        GameCardGrid,
         GameSearch,
         ListNameEdit,
         ListSettings,
@@ -116,6 +114,7 @@ export default {
 
     data() {
         return {
+            masonry: null,
             gameDraggableOptions: {
                 handle: '.game-drag-handle',
                 ghostClass: 'card-placeholder',
@@ -126,10 +125,9 @@ export default {
             },
             gameCardComponents: {
                 single: 'GameCardDefault',
-                covers: 'GameCardCover',
+                grid: 'GameCardGrid',
                 wide: 'GameCardWide',
                 text: 'GameCardText',
-                grid: 'GameCardGrid',
             },
         };
     },
@@ -159,16 +157,6 @@ export default {
             return this.list[this.listIndex].view;
         },
 
-        coversSizeClass() {
-            return `covers-${this.coversSize}`;
-        },
-
-        coversSize() {
-            const activeList = this.list[this.listIndex];
-
-            return activeList.coversSize || 3;
-        },
-
         gameCardComponent() {
             return this.view
                 ? this.gameCardComponents[this.view]
@@ -194,6 +182,10 @@ export default {
         view() {
             this.initGrid();
         },
+
+        games() {
+            this.initGrid();
+        },
     },
 
     mounted() {
@@ -205,7 +197,7 @@ export default {
             if (this.view === 'grid') {
                 this.$nextTick(() => {
                     // eslint-disable-next-line
-                    new Masonry(`.game-grid-${this.listIndex}`, {
+                    this.masonry = new Masonry(`.game-grid-${this.listIndex}`, {
                         itemSelector: '.game-card',
                         gutter: 4,
                     });
@@ -287,40 +279,6 @@ export default {
             width: $list-width-wide;
         }
 
-        &.covers {
-            .games {
-                padding-top: $gp / 2;
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                grid-gap: $gp / 4;
-            }
-
-            &.covers-3 {
-                width: 300px;
-
-                .games {
-                    grid-template-columns: repeat(3, 1fr);
-                }
-            }
-
-            &.covers-4 {
-                width: 400px;
-
-                .games {
-                    grid-template-columns: repeat(4, 1fr);
-                }
-            }
-
-            &.covers-5 {
-                width: 500px;
-
-                .games {
-                    grid-template-columns: repeat(5, 1fr);
-                }
-            }
-
-        }
-
         &.dark {
             background-color: $color-dark-gray;
 

src/components/Lists/ListSettings.vue

@@ -43,22 +43,6 @@
             </div>
         </section>
 
-        <section v-if="activeList && activeList.view === 'covers'">
-            <h4>{{ $t('list.coversSizeTitle') }}</h4>
-
-            <div class="button-group">
-                <button
-                    v-for="coversSize in coversSizes"
-                    class="small primary"
-                    :class="{ hollow: coversSize !== activeList.coversSize }"
-                    :key="`cover-${coversSize}`"
-                    @click="setCoversSize(coversSize)"
-                >
-                    {{ coversSize }}
-                </button>
-            </div>
-        </section>
-
         <section v-if="hasMultipleGames">
             <h4>{{ $t('list.sortList') }}</h4>
 
@@ -138,12 +122,10 @@ export default {
             localList: {},
             views: {
                 single: 'fas fa-square',
-                covers: 'fas fa-th-large',
+                grid: 'fas fa-th-large',
                 wide: 'fas fa-minus',
                 text: 'fas fa-font',
-                grid: 'fas fa-th',
             },
-            coversSizes: [3, 4, 5],
             sortOrders: {
                 sortByName: 'fas fa-sort-alpha-down',
                 sortByRating: 'fas fa-sort-numeric-up',

src/i18n/en.js

@@ -51,10 +51,9 @@ module.exports = {
         coversSizeTitle: 'Covers across',
         views: {
             single: 'Default',
-            covers: 'Covers',
             wide: 'Compact',
             text: 'Text only',
-            grid: 'Masonry',
+            grid: 'Masonry Grid',
         },
     },
     settings: {