Standardize game grid and remove vue masonry

package.json

@@ -49,7 +49,6 @@
     "vue-analytics": "^5.16.0",
     "vue-axios": "^2.1.1",
     "vue-i18n": "^8.0.0",
-    "vue-masonry-css": "^1.0.3",
     "vue-raven": "^1.0.0",
     "vue-router": "^3.5.1",
     "vue-shortkey": "^3.1.7",

src/components/Game/SimilarGames.vue

@@ -1,27 +1,19 @@
 <template>
-  <b-container fluid v-if="allGames.length" class="p-0">
+  <b-container v-if="allGames.length" class="p-0">
     <h2 class="pb-3">You may also like</h2>
 
     <b-form-row align-content="end">
-      <b-col
-        v-for="game in allGames"
-        cols="6"
-        sm="4"
-        md="3"
-        lg="2"
-        xl="1"
-        class="d-flex"
-        :key="game && game.id"
-      >
+      <div class="game-grid">
         <GameCard
+          v-for="game in allGames"
+          :key="game && game.id"
           :game-id="game.id"
           hide-platforms
           vertical
           hide-tags
           hide-progress
-          class="mb-3"
         />
-      </b-col>
+      </div>
     </b-form-row>
   </b-container>
 </template>

src/main.js

@@ -11,7 +11,6 @@ import VueAnalytics from 'vue-analytics';
 import Raven from 'raven-js';
 import PortalVue from 'portal-vue';
 import RavenVue from 'raven-js/plugins/vue';
-import VueMasonry from 'vue-masonry-css';
 import App from '@/App';
 import './registerServiceWorker';
 import messages from '@/i18n/';
@@ -29,7 +28,6 @@ Object.defineProperties(Vue.prototype, {
   },
 });
 
-Vue.use(VueMasonry);
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', '.ProseMirror'] });
 Vue.use(PortalVue);
 Vue.use(VueAnalytics, { id: 'UA-120053966-1', router });

src/pages/CompanyPage.vue

@@ -19,13 +19,7 @@
 
         <h3 class="w-100 my-3">Games developed by {{ company.name }}</h3>
 
-        <masonry
-          gutter="16px"
-          style="max-height: 60vh;"
-          class="mb-5"
-          v-if="company.developed"
-          :cols="{ default: 7, 1200: 5, 768: 3, 480: 2 }"
-        >
+        <div class="game-grid">
           <GameCard
             v-for="gameDeveloped in company.developed"
             :game-id="gameDeveloped.id"
@@ -36,18 +30,13 @@
             hide-progress
             class="mb-3"
           />
-        </masonry>
+        </div>
 
         <div v-if="company.published">
           <h3 class="w-100 my-3">Games published by {{ company.name }}</h3>
 
-          <masonry
-            gutter="16px"
-            style="max-height: 60vh;"
-            class="mb-5"
-            v-if="company.developed"
-            :cols="{ default: 7, 1200: 5, 768: 3, 480: 2 }"
-          >
+
+          <div class="game-grid">
             <GameCard
               v-for="gamePublished in company.published"
               :game-id="gamePublished.id"
@@ -58,7 +47,7 @@
               hide-progress
               class="mb-3"
             />
-          </masonry>
+          </div>
         </div>
       </div>
 
@@ -97,11 +86,11 @@ export default {
     });
 
     const allGames = [
-      ...this.company.published,
-      ...this.company.developed,
+      ...this.company?.published || [],
+      ...this.company?.developed || [],
     ];
 
-    if (this.company.published?.length) this.$store.commit('CACHE_GAME_DATA', allGames);
+    if (allGames?.length) this.$store.commit('CACHE_GAME_DATA', allGames);
 
     this.loading = false;
   },

src/styles/_helpers.scss

@@ -14,16 +14,26 @@
 
 .game-grid {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
   grid-gap: 1rem;
+  grid-template-columns: repeat(6, 1fr);
 
   @media(max-width: 1024px) {
     grid-template-columns: repeat(5, 1fr);
   }
 
-  @media(max-width: 780px) {
+  @media(max-width: 992px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+
+  @media(max-width: 768px) {
     grid-template-columns: repeat(3, 1fr);
   }
+
+
+  @media(max-width: 480px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 .board-grid {