Feature: Correct the style for light-box to the center of screen

pinry/static/css/lightbox.css

@@ -8,7 +8,7 @@
 }
 
 .lightbox-wrapper {
-    background: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.7);
     background-image: url("../img/loader.gif");
     background-position: center center;
     background-repeat: no-repeat;

pinry/static/js/vue/main.js

@@ -12,6 +12,21 @@ function fetchPins(offset) {
     return axios.get(apiUrl)
 }
 
+var utils = {
+  getDocumentHeight: function () {
+    var body = document.body,
+    html = document.documentElement;
+    return Math.max(
+      body.scrollHeight, body.offsetHeight,
+      html.clientHeight, html.scrollHeight,
+      html.offsetHeight,
+    );
+  },
+  getWindowHeight: function () {
+    return window.innerHeight
+  }
+};
+
 function EventCounter(countEvent, triggerEvent, triggerTimes) {
 
   var self = {
@@ -105,19 +120,38 @@ Vue.component(
     data: function () {
       return {
         backgroundStyle: null,
+        lightBoxWrapperStyle: null,
         lightBoxImageWrapperStyle: null,
       }
     },
     props: ['pin'],
     template: "#lightbox-template",
-    created: function () {
-      var documentHeight = document.documentElement.getBoundingClientRect().height;
+    mounted: function () {
+      var documentHeight = utils.getDocumentHeight();
+      var imageWidth = this.pin.image.standard.width;
+      var imageHeight = this.pin.image.standard.height;
+      var windowHeight = utils.getWindowHeight();
+      var backgroundHeight = documentHeight;
+      var lightBoxWrapperStyle = {
+        'height': imageHeight + 'px',
+        'width': imageWidth + "px",
+        'marginTop': '80px',
+        'marginBottom': '80px',
+        'margin-left': - imageWidth / 2 + "px",
+      };
+      var wrapper = this.$el.querySelector(".lightbox-wrapper");
+
+      if (wrapper.getBoundingClientRect().height + 140 > windowHeight) {
+        var wrapperHeight = wrapper.getBoundingClientRect().height;
+        backgroundHeight = wrapperHeight + 160;
+      }
       this.backgroundStyle = {
-        height: documentHeight + "px",
+        height: backgroundHeight + 'px',
       };
       this.lightBoxImageWrapperStyle = {
-        height: this.pin.image.standard.height + 'px',
-      }
+        height: imageHeight + 'px',
+      };
+      this.lightBoxWrapperStyle = lightBoxWrapperStyle;
     }
   }
 );
@@ -312,21 +346,12 @@ Vue.component('pin-container', {
         return (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
       }
 
-      function getDocumentHeight() {
-        var body = document.body,
-        html = document.documentElement;
-        return Math.max(
-          body.scrollHeight, body.offsetHeight,
-          html.clientHeight, html.scrollHeight,
-          html.offsetHeight,
-        );
-      }
       scrollHandler = function() {
         if (self.status.loading || !self.status.hasNext) {
           return
         }
         var windowPosition = getDocumentScrollTop() + window.innerHeight;
-        var bottom = getDocumentHeight() - 100;
+        var bottom = utils.getDocumentHeight() - 100;
         if(windowPosition > bottom) {
           self.loadMore();
         }

pinry/templates/includes/lightbox-vue.html

@@ -1,9 +1,9 @@
 {% verbatim %}
     <script id="lightbox-template" type="text/x-template">
       <transition name="fade">
-        <div class="lightbox-background">
-            <div class="lightbox-wrapper">
-                <div class="lightbox-image-wrapper">
+        <div class="lightbox-background" :style="backgroundStyle">
+            <div class="lightbox-wrapper" :style="lightBoxWrapperStyle">
+                <div class="lightbox-image-wrapper" :style="lightBoxImageWrapperStyle">
                     <img class="lightbox-image" :src="pin.image.image" />
                 </div>
                 <div class="lightbox-data clearfix">
@@ -11,7 +11,7 @@
                       {{ pin.description }}
                   </div>
                   <div class="avatar pull-left">
-                      <img src="//gravatar.com/avatar/{{submitter.gravatar}}.jpg">
+                      <img :src="'//gravatar.com/avatar/' + pin.submitter.gravatar + '.jpg'">
                   </div>
                   <div class="text pull-left">
                       <span class="dim">pinned by</span> {{ pin.submitter.username }}
@@ -19,7 +19,7 @@
                         <br /><span class="dim">in</span>
                         <template v-for="tag in pin.tags">
                             <span class="tag">
-                              <a href="/pins/tags/{{ tag }}/" class="btn btn-xs btn-primary">
+                              <a :href="'/pins/tags/' + tag + '/'" class="btn btn-xs btn-primary">
                                 {{ tag }}
                               </a>
                             </span>