Feature: Add basic frame for pin-resize

pinry/static/css/pinry.css

@@ -34,6 +34,9 @@ a {
     width: 500px;
     text-align: center;
 }
+#app{
+  overflow: auto;
+}
 /* End Globals */
 
 
@@ -175,6 +178,8 @@ textarea {
 /* Start Pins */
 #pins {
     top: 80px;
+    padding-left: 60px;
+    padding-right: 60px;
 }
 
 .pin {

pinry/static/css/vue-pin.css

@@ -5,3 +5,12 @@
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
+
+
+.fake-hide {
+  opacity: 0;
+}
+
+.pin {
+  transition: opacity .3s;
+}

pinry/static/js/vue/main.js

@@ -8,14 +8,34 @@ function fetchPins(offset) {
 
 Vue.component('pin', {
   data: function () {
-    return {'loaded': false}
+    return {
+      'loaded': false,
+      'editable': true,
+      'active': false,
+      'textId': null,
+    }
   },
   props: ['pin'],
   template: '#pin-template',
   methods: {
     onImageLoad: function () {
       this.loaded = true;
-    }
+      this.$emit("resize", this.getTextHeight());
+    },
+    getAvatar: function () {
+      return "//gravatar.com/avatar/" + this.pin.submitter.gravatar;
+    },
+    getUserLink: function () {
+      return "/pins/users/" + this.pin.submitter.username + "/"
+    },
+    getTagLink: function (tag) {
+      return "/pins/tags/" + tag + "/"
+    },
+    getTextHeight: function() {
+      var element = this.$el;
+      var height = element.getBoundingClientRect().height;
+      return height
+    },
   }
 });
 

pinry/templates/includes/vue-pin.html

@@ -1,9 +1,47 @@
 {% verbatim %}
 <script type="text/x-template" id="pin-template">
+    <div class="pin" :class="{ 'fake-hide': !loaded }" v-on:mouseover="active = true" v-on:mouseleave="active = false">
       <transition name="fade">
-      <div class="pin pin-wrapper" v-show="loaded">
-        <img :src="pin.image.thumbnail.image" v-on:load="onImageLoad">
+        <div class="editor" v-show="active">
+          <div class="borderable">
+            <span class="glyphicon glyphicon-heart" data-id="{{id}}"></span>
+          </div>
+          <template v-if="editable">
+            <div class="borderable">
+              <span class="glyphicon glyphicon-trash" data-id="{{id}}"></span>
+            </div>
+            <div class="borderable">
+              <span class="glyphicon glyphicon-pencil" data-id="{{id}}"></span>
+            </div>
+          </template>
         </div>
       </transition>
+
+      <a :href="pin.image.image" class="lightbox">
+        <div class="image-wrapper">
+          <img :src="pin.image.thumbnail.image" v-on:load="onImageLoad">
+        </div>
+      </a>
+
+      <div>
+        <p v-if="pin.description">{{ pin.description }}</p>
+        <div class="pin-footer clearfix">
+          <div class="avatar pull-left">
+            <img :src="getAvatar">
+          </div>
+          <div class="text pull-right">
+            <span class="dim">pinned by</span>
+            <a :href="getUserLink">{{ pin.submitter.username }}</a>
+            <template v-if="pin.tags">
+              <span class="dim">in</span>
+              <template v-for="_tag in pin.tags">
+                <span class="tag"><a :href="getTagLink(_tag)">{{ _tag }}</a></span>
+              </template>
+            </template>
+          </div>
+        </div>
+      </div>
+
+    </div>
 </script>
 {% endverbatim %}

pinry/templates/includes/vue-pins.html

@@ -1,6 +1,6 @@
 {% verbatim %}
 
-<waterfall :line-gap="240" :watch="pins">
+<waterfall :line-gap="240" :line="'v'" :watch="pins" :fixed-height="false">
   <!-- each component is wrapped by a waterfall slot -->
   <waterfall-slot
     v-for="(item, index) in pins"
@@ -9,7 +9,7 @@
     :order="index"
     :key="item.id"
   >
-    <pin :pin="item"></pin>
+    <pin :pin="item" v-on:resize="function(height){item.image.thumbnail.height = height;}"></pin>
   </waterfall-slot>
 </waterfall>