Theming with WP REST API - Part 10 - Making Previews Pretty

ivandoric · Apr 9, 2016 · fad5fb4 · fad5fb4
1 parent a2ca594
commit fad5fb4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/index.php b/index.php
@@ -11,6 +11,8 @@
 
 <template id="post-list-template">
 
+    <div class="overlay" v-if="show" transition="overlayshow"></div>
+
     <header class="main-header">
         <img class="hero" src="<?php bloginfo('template_url'); ?>/images/hero.jpg" alt="">    
     </header>
@@ -62,7 +64,7 @@
         </div>
     </div>
 
-    <div class="single-preview">
+    <div class="single-preview" v-if="show" transition="postshow">
         <h2>{{ post[0].title.rendered }}</h2>
 
         <div class="image">
@@ -80,8 +82,12 @@
         <a v-on:click="getThePost(post[0].previous_post)" v-if="post[0].previous_post" class="post-nav prev">
             <span class="icon-left"></span>
         </a>
+
+        <button class="close-button" v-on:click="closePost()">&#215;</button>
     </div>
 
+
+
 </template>
 
 <?php get_footer(); ?>
diff --git a/js/app.js b/js/app.js
@@ -11,7 +11,8 @@ var postList = Vue.extend({
             showFilter: false,
             filterBtnOpen: true,
             filterBtnClose: false,
-            post:''
+            post:'',
+            show: false
         }
     },
 
@@ -32,13 +33,18 @@ var postList = Vue.extend({
         getThePost: function(id){
             var posts = this.posts;
 
+            this.$set('show', true);
+
             function filterPosts(el){
                 return el.id == id;
             }
 
             this.$set('post', posts.filter(filterPosts));
         },
 
+        closePost: function(){
+            this.$set('show', false);
+        },
 
         openFilter: function(){
             this.$set('showFilter', true);