From c335a3dcb846e70d2c22e2f48cfb22b0e7fd1bfe Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Thu, 28 Feb 2019 18:22:08 +0800
Subject: [PATCH] Feature: Add style for image

---
 pinry/static/js/vue/main.js           | 9 ++++++++-
 pinry/templates/includes/vue-pin.html | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/pinry/static/js/vue/main.js b/pinry/static/js/vue/main.js
index 821450f..c510871 100644
--- a/pinry/static/js/vue/main.js
+++ b/pinry/static/js/vue/main.js
@@ -13,10 +13,17 @@ Vue.component('pin', {
       'editable': true,
       'active': false,
       'textId': null,
+      'imageStyle': null,
     }
   },
   props: ['pin'],
   template: '#pin-template',
+  mounted: function() {
+    this.imageStyle = {
+      width: this.pin.image.thumbnail.width + 'px',
+      height: this.pin.image.thumbnail.height + 'px',
+    };
+  },
   methods: {
     getInlineStyle: function() {
       return {};
@@ -47,7 +54,7 @@ Vue.component('pin-container', {
     return {
         "windowWidth": null,
         "blockWidth": "240px",
-        "blockMargin": "240px",
+        "blockMargin": "15px",
         "pins": [],
     };
   },
diff --git a/pinry/templates/includes/vue-pin.html b/pinry/templates/includes/vue-pin.html
index 9e68d97..ec6e910 100644
--- a/pinry/templates/includes/vue-pin.html
+++ b/pinry/templates/includes/vue-pin.html
@@ -27,7 +27,7 @@
         </div>
       </transition>
 
-      <a :href="pin.image.image" class="lightbox">
+      <a :href="pin.image.image" class="lightbox" :style="imageStyle">
         <div class="image-wrapper">
           <img :src="pin.image.thumbnail.image" v-on:load="onImageLoad">
         </div>