Feature: Add preview-modal for single-pin

pinry-spa/src/components/PinPreview.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="pin-preview-modal">
+    <section>
+        <div class="card">
+          <div class="card-image">
+            <figure class="image">
+              <img :src="pinItem.original_url" alt="Image">
+            </figure>
+          </div>
+          <div class="card-content">
+            <div class="media">
+              <div class="media-left">
+                <figure class="image is-48x48">
+                  <img :src="pinItem.avatar" alt="Image">
+                </figure>
+              </div>
+              <div class="media-content">
+                <p class="title is-4">{{ pinItem.author }}</p>
+                <p class="subtitle is-6">
+                  <template v-for="tag in pinItem.tags">
+                    <b-tag v-bind:key="tag" type="is-info" class="pin-preview-tag">{{ tag }}</b-tag>
+                  </template>
+                </p>
+              </div>
+            </div>
+            <div class="content">
+            </div>
+          </div>
+        </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PinPreview',
+  props: ['pinItem'],
+};
+</script>
+
+<style lang="scss" scoped>
+.pin-preview-tag {
+  margin-right: 0.2rem;
+}
+/* preview size should always less then screen */
+.image > img {
+  max-height: calc(100vh - 225px);
+}
+</style>

pinry-spa/src/components/Pins.vue

@@ -14,7 +14,10 @@
               <div class="grid-sizer"></div>
               <div class="gutter-sizer"></div>
               <div class="pin-card grid-item">
-                <img :src="item.url" alt="item.description">
+                <img :src="item.url"
+                     @click="openPreview(item)"
+                     alt="item.description"
+                     class="pin-preview-image">
                 <div class="pin-footer">
                   <div class="description" v-show="item.description"><p>{{ item.description }}</p></div>
                   <div class="details">
@@ -49,6 +52,7 @@
 <script>
 import API from './api';
 import pinHandler from './utils/PinHandler';
+import PinPreview from './PinPreview.vue';
 
 function createImageItem(pin) {
   const image = {};
@@ -58,6 +62,8 @@ function createImageItem(pin) {
   image.tags = pin.tags;
   image.author = pin.submitter.username;
   image.avatar = `//gravatar.com/avatar/${pin.submitter.gravatar}`;
+  image.original_url = pin.image.image;
+  image.orgianl_width = pin.image.width;
   return image;
 }
 
@@ -81,6 +87,20 @@ export default {
       );
       return blocks;
     },
+    openPreview(pinItem) {
+      this.$buefy.modal.open(
+        {
+          parent: this,
+          component: PinPreview,
+          props: {
+            pinItem,
+          },
+          // width: pinItem.orgianl_width,
+          hasModalCard: true,
+          customClass: 'pin-preview-at-home',
+        },
+      );
+    },
   },
   created() {
     API.fetchPins(0).then(
@@ -123,6 +143,9 @@ $avatar-height: 30px;
 }
 
 .pin-card{
+  .pin-preview-image {
+    cursor: pointer;
+  }
   > img {
     border-radius: 3px 3px 0 0;
   }