Feature: Remove vue-bricks and add vue-masonry

pinry-spa/package.json

@@ -12,7 +12,7 @@
     "buefy": "^0.8.8",
     "core-js": "^3.3.2",
     "vue": "^2.6.10",
-    "vue-bricks": "^2.0.0"
+    "vue-masonry": "^0.11.8"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",

pinry-spa/src/components/Pins.vue

@@ -2,97 +2,17 @@
   <div class="pins">
     <section class="section">
       <div class="container">
-        <bricks
-          ref="bricks"
-          :data="waterfallData"
-          :sizes="waterfallSizes"
-          :offset="100"
-          @reach="fetchWaterfallData(true)"
-          @update="done"
-          @pack="done"
-        >
-          <template slot-scope="scope">
-           <div class="card">
-              <img v-if="scope.item.src" class="card-img-top" :src="scope.item.src" :alt="scope.item.index">
-              <div class="card-block">
-                <h4 class="card-title" :style="scope.item.style">{{ scope.item.index }}</h4>
-                <p class="card-text">{{ scope.item.width }} * {{ scope.item.height }}</p>
-              </div>
-            </div>
-          </template>
-        </bricks>
-        <div class="loading" :class="{ active: loading }">
-          <div>Loading</div>
-        </div>
       </div>
     </section>
   </div>
 </template>
 
 <script>
-import Bricks from 'vue-bricks';
-import API from './api';
+// import API from './api';
 
 export default {
   name: 'pins',
-  components: {
-    Bricks,
-  },
-  data() {
-    return {
-      loading: true,
-      waterfallData: [],
-      waterfallSizes: [
-        { columns: 4, gutter: 20 },
-        { mq: '414px', columns: 1, gutter: 10 },
-        { mq: '640px', columns: 1, gutter: 80 },
-        { mq: '800px', columns: 2, gutter: 80 },
-        { mq: '1024px', columns: 3, gutter: 15 },
-        { mq: '1280px', columns: 3, gutter: 30 },
-        { mq: '1366px', columns: 4, gutter: 15 },
-        { mq: '1440px', columns: 4, gutter: 30 },
-        { mq: '1980px', columns: 5, gutter: 40 },
-      ],
-    };
-  },
-  methods: {
-    done() {
-      this.loading = false;
-    },
-    fetchWaterfallData() {
-      return new Promise((resolve) => {
-        this.loading = true;
-        API.fetchPins(0).then(
-          (resp) => {
-            const data = resp.data.results;
-            const count = data.length;
-            const items = [];
-            let i = 0;
-            let image;
-            let lastIndex = 0;
-            for (image in data) {
-              if (!data.hasOwnProperty(image)) {
-                  
-              }else{
-                items[i] = {
-                  index: lastIndex,
-                  style: {},
-                  width: data.image.thumbnail.width,
-                  height: data.image.thumbnail.height,
-                };
-                lastIndex += 1;
-              }
-            }
-            this.waterfallData = data;
-            resolve(data);
-          },
-        );
-      });
-    },
-  },
-  created() {
-    this.fetchWaterfallData();
-  },
+  components: {},
 };
 </script>
 

pinry-spa/src/main.js

@@ -1,12 +1,12 @@
 import Buefy from 'buefy';
-import 'vue-bricks/lib/vueBricks.css';
-import VueBricks from 'vue-bricks';
 import Vue from 'vue';
+import VueMasonryPlugin from 'vue-masonry';
 import App from './App.vue';
 
+
 Vue.config.productionTip = false;
 Vue.use(Buefy);
-Vue.use(VueBricks);
+Vue.use(VueMasonryPlugin);
 
 new Vue({
   render: h => h(App),