Switched over to original masonry layout

package.json

@@ -21,6 +21,7 @@
         "firebase-admin": "^6.0.0",
         "firebase-functions": "^2.0.5",
         "lodash": "^4.17.11",
+        "masonry-layout": "^4.2.2",
         "moment": "^2.22.1",
         "node-sass": "^4.8.3",
         "raven-js": "^3.27.0",
@@ -34,7 +35,6 @@
         "vue-gravatar": "^1.2.1",
         "vue-i18n": "^8.0.0",
         "vue-markdown": "^2.2.4",
-        "vue-masonry": "^0.11.7",
         "vue-raven": "^1.0.0",
         "vue-router": "^3.0.1",
         "vuedraggable": "^2.16.0",

src/components/Platform/Platform.vue

@@ -44,7 +44,7 @@ export default {
         },
 
         blockClass() {
-            return `height-${this.blockHeight} width-${this.blockWidth}`;
+            return `height-${this.blockHeight}`;
         },
     },
 
@@ -72,23 +72,26 @@ export default {
 <style lang="scss" rel="stylesheet/scss" scoped>
     @import "~styles/styles.scss";
 
-    $blockSize: 100px;
+    $tileHeight: 80px;
 
     .platform {
-        background: #cfc;
-        padding: $gp * 1.5;
+        padding: $gp;
         display: flex;
         margin-bottom: $gp / 2;
         align-items: center;
         border-radius: $border-radius;
         cursor: pointer;
+        overflow: hidden;
+        width: calc(calc(100% / 7) - 8.5px) !important;
 
-        &.width-1 { width: $blockSize; }
-        &.width-2 { width: $blockSize * 2 + $gp / 2; }
-        &.width-3 { width: $blockSize * 3 + $gp; }
-        &.height-1 { height: $blockSize; }
-        &.height-2 { height: $blockSize * 2 + $gp / 2; }
-        &.height-3 { height: $blockSize * 3 + $gp; }
+        &.height-1 { height: $tileHeight; }
+        &.height-2 { height: $tileHeight * 2 }
+        &.height-3 { height: $tileHeight * 3 }
+
+        @media($small) {
+            padding: $gp / 2;
+            width: calc(calc(100% / 3) - 7px) !important;
+        }
 
         img {
             width: 100%;

src/main.js

@@ -3,7 +3,6 @@ import VueAxios from 'vue-axios';
 import VueFire from 'vuefire';
 import VueI18n from 'vue-i18n';
 import axios from 'axios';
-import { VueMasonryPlugin } from 'vue-masonry';
 import VueAnalytics from 'vue-analytics';
 import Raven from 'raven-js';
 import RavenVue from 'raven-js/plugins/vue';
@@ -27,7 +26,6 @@ Vue.use(VueAnalytics, {
     router,
 });
 
-Vue.use(VueMasonryPlugin);
 Vue.use(VueAxios, axios);
 Vue.use(VueFire);
 Vue.use(VueI18n);

src/pages/Platforms.vue

@@ -1,13 +1,7 @@
 <template lang="html">
     <div :class="['platforms-page', { dark: darkModeEnabled }]">
 
-        <div
-            v-masonry
-            transition-duration="0.3s"
-            item-selector=".platform"
-            column-width="100"
-            gutter="8"
-        >
+        <div class="platforms">
             <platform
                 v-for="platform in filteredPlatforms"
                 :key="platform.name"
@@ -40,6 +34,7 @@
 </template>
 
 <script>
+import Masonry from 'masonry-layout';
 import platforms from '@/shared/platforms';
 import ToggleSwitch from '@/components/ToggleSwitch/ToggleSwitch';
 import IgdbCredit from '@/components/IgdbCredit/IgdbCredit';
@@ -48,6 +43,8 @@ import Panel from '@/components/Panel/Panel';
 import { sortBy } from 'lodash';
 import { mapState, mapGetters } from 'vuex';
 
+let msnry = null;
+
 export default {
     components: {
         ToggleSwitch,
@@ -87,7 +84,11 @@ export default {
                 ? this.platforms.filter(({ code }) => this.gameLists[code])
                 : this.platforms;
 
-            this.$redrawVueMasonry();
+            if (msnry) {
+                msnry.reloadItems();
+                msnry.layout();
+            }
+
 
             return this.settings && this.settings.sortListsAlphabetically
                 ? sortBy(availableLists, 'name')
@@ -95,7 +96,18 @@ export default {
         },
     },
 
+    mounted() {
+        this.initGrid();
+    },
+
     methods: {
+        initGrid() {
+            msnry = new Masonry('.platforms', {
+                itemSelector: '.platform',
+                gutter: 10,
+            });
+        },
+
         groupLabel(label) {
             return label === '0'
                 ? this.$t('platforms.computersArcade')
@@ -166,12 +178,4 @@ export default {
             color: $color-dark-gray;
         }
     }
-
-    .item {
-        overflow: hidden;
-        width: 300px;
-        height: 200px;
-        border-radius: $border-radius;
-        padding: $gp;
-    }
 </style>

src/shared/platforms.js

@@ -5,7 +5,6 @@ export default [
         hex: '#e60012',
         id: 130,
         height: 2,
-        width: 2,
         generation: 8,
     },
     {
@@ -20,7 +19,6 @@ export default [
         hex: '#2E6DB4',
         id: 48,
         height: 2,
-        width: 2,
         generation: 8,
     },
     {
@@ -35,7 +33,6 @@ export default [
         code: 'xbox-one',
         id: 49,
         height: 2,
-        width: 2,
         generation: 8,
     },
     {
@@ -44,7 +41,6 @@ export default [
         hex: '#FFFFFF',
         id: 18,
         generation: 3,
-        width: 2,
     },
     {
         name: 'Wii',
@@ -58,7 +54,6 @@ export default [
         code: 'nintendo-64',
         id: 4,
         generation: 5,
-        width: 2,
         height: 2,
     },
     {
@@ -93,14 +88,12 @@ export default [
         code: 'snes',
         id: 19,
         generation: 4,
-        width: 2,
         height: 1,
     },
     {
         name: 'Sega Mega Drive / Genesis',
         code: 'sega-genesis',
         id: 29,
-        width: 2,
         generation: 4,
     },
     {
@@ -132,7 +125,6 @@ export default [
         name: 'Commodore C64/128',
         code: 'commodore-64',
         id: 15,
-        width: 2,
         hex: '#6F685F',
         generation: 0,
     },
@@ -204,7 +196,6 @@ export default [
         id: 37,
         generation: 8,
         height: 1,
-        width: 2,
     },
     {
         name: 'PSP',
@@ -347,7 +338,6 @@ export default [
         id: 88,
         generation: 1,
         height: 1,
-        width: 2,
     },
     // {
     //     name: 'Commodore PET',