Feature: Now the repack works well

pinry-spa/src/components/Pins.vue

@@ -1,21 +1,153 @@
 <template>
   <div class="pins">
     <section class="section">
-      <div class="container">
+      <div id="pins-container" class="container" v-if="blocks">
+        <div
+          v-masonry=""
+          transition-duration="0.3s"
+          item-selector=".grid-item"
+          column-width=".grid-sizer"
+          gutter=".gutter-sizer"
+        >
+          <template v-for="item in blocks">
+            <div v-bind:key="item.id" v-masonry-tile class="grid">
+              <div class="grid-sizer"></div>
+              <div class="gutter-sizer"></div>
+              <div class="grid-item">
+                <img :src="item.url" alt="item.description">
+              </div>
+            </div>
+          </template>
+        </div>
       </div>
     </section>
   </div>
 </template>
 
 <script>
-// import API from './api';
+import API from './api';
+import pinHandler from './utils/PinHandler';
+
+function createImageItem(pin) {
+  const image = {};
+  image.url = pinHandler.escapeUrl(pin.image.thumbnail.image);
+  image.id = pin.id;
+  image.description = pin.description;
+  return image;
+}
 
 export default {
   name: 'pins',
   components: {},
+  data() {
+    return {
+      blocks: [],
+    };
+  },
+  methods: {
+    buildBlocks(results) {
+      const blocks = [];
+      results.forEach(
+        (pin) => {
+          blocks.push(
+            createImageItem(pin),
+          );
+        },
+      );
+      return blocks;
+    },
+  },
+  created() {
+    API.fetchPins(0).then(
+      (resp) => {
+        this.blocks = this.buildBlocks(resp.data.results);
+      },
+    );
+  },
 };
 </script>
 
 <style scoped>
+.grid-sizer,
+.grid-item { width: 240px; }
+.grid-item {
+  margin-bottom: 15px;
+}
+.gutter-sizer {
+  width: 15px;
+}
+/*pin container size fit*/
+/* Generated by python code:
+/* def fn(x):
+/*     gutter = 15
+/*     image_width = 240
+/*     border_width_of_parent = 24
+/*     size = image_width * x + gutter * (x - 1)
+/*     width = size + border_width_of_parent * 2
+/*     print(template % (width, size))
+/*
+/* for i in range(1, 12):
+/*     fn(i)
+*/
 
+@media screen and (min-width: 33px) {
+  #pins-container {
+    max-width: -15px;
+  }
+}
+@media screen and (min-width: 288px) {
+  #pins-container {
+    max-width: 240px;
+  }
+}
+@media screen and (min-width: 543px) {
+  #pins-container {
+    max-width: 495px;
+  }
+}
+@media screen and (min-width: 798px) {
+  #pins-container {
+    max-width: 750px;
+  }
+}
+@media screen and (min-width: 1053px) {
+  #pins-container {
+    max-width: 1005px;
+  }
+}
+@media screen and (min-width: 1308px) {
+  #pins-container {
+    max-width: 1260px;
+  }
+}
+@media screen and (min-width: 1563px) {
+  #pins-container {
+    max-width: 1515px;
+  }
+}
+@media screen and (min-width: 1818px) {
+  #pins-container {
+    max-width: 1770px;
+  }
+}
+@media screen and (min-width: 2073px) {
+  #pins-container {
+    max-width: 2025px;
+  }
+}
+@media screen and (min-width: 2328px) {
+  #pins-container {
+    max-width: 2280px;
+  }
+}
+@media screen and (min-width: 2583px) {
+  #pins-container {
+    max-width: 2535px;
+  }
+}
+@media screen and (min-width: 2838px) {
+  #pins-container {
+    max-width: 2790px;
+  }
+}
 </style>

pinry-spa/src/components/utils/PinHandler.js

@@ -0,0 +1,13 @@
+/**
+ * Remove http prefix from url.
+ * @param url: String
+*/
+function escapeUrl(url) {
+  const uri = new URL(url);
+  return uri.pathname;
+}
+
+
+export default {
+  escapeUrl,
+};

pinry-spa/src/main.js

@@ -1,6 +1,6 @@
 import Buefy from 'buefy';
 import Vue from 'vue';
-import VueMasonryPlugin from 'vue-masonry';
+import { VueMasonryPlugin } from 'vue-masonry';
 import App from './App.vue';
 
 

pinry-spa/vue.config.js

@@ -5,9 +5,10 @@ module.exports = {
         target: 'http://localhost:8000/',
         changeOrigin: true,
         ws: true,
-        pathRewrite: {
-          '^/api': '/api',
       },
+      '/static/media': {
+        target: 'http://localhost:8000/',
+        changeOrigin: true,
       },
     },
   },