daily pastebin goal
70%
SHARE
TWEET

component

phenomix Dec 11th, 2018 133 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div class="inner">
  3.     <!-- <div class="background-hero" :style="{ backgroundImage: 'url(' + post.featured_image + ')' }"></div> -->
  4.     <div class="body clearfix">
  5.       <!-- Text Content -->
  6.       <div class="content">
  7.         <div class="content-title">
  8.           <h1>{{category}}</h1>
  9.           <p>Search Within {{category}}</p>
  10.         </div>
  11.         <div v-for="(post,index) in categoryPosts" :key="post.slug + '_' + index" >
  12.             <div>
  13.               <router-link :to="'/' + post.slug">
  14.                   <div class="clearfix article-container">
  15.                     <div><img :src="post.featured_image" alt="" class="article-image"></div>
  16.                     <div class="article-text">
  17.                       <h4>{{post.categories[0].name}}</h4>
  18.                       <h3>{{post.title}}</h3>
  19.                       <p>{{post.meta_description}}</p>
  20.                     </div>
  21.                   </div>
  22.               </router-link>
  23.             </div>
  24.           </div>
  25.       </div>
  26.      
  27.       <!-- Sidebar Content -->
  28.       <div class="sidebar">
  29.         <h2 class="sidebar-title">LATEST</h2>
  30.           <div v-for="(posts,index) in postList" :key="posts.slug + '_' + index">
  31.             <router-link :to="'/' + posts.slug">
  32.               <div class="sidebar-block clearfix">
  33.                 <img v-if="posts.featured_image" :src="posts.featured_image" alt="" class="sidebar-image">
  34.                 <p class="sidebar-text">{{ posts.title }}</p>
  35.               </div>
  36.             </router-link>
  37.           </div>
  38.       </div>
  39.     </div>
  40.   </div>
  41. </template>
  42.  
  43. <script>
  44.   import { butter } from '@/buttercms'
  45.   export default {
  46.     name: 'PostCategory',
  47.     data() {
  48.       return {
  49.         // post: {},
  50.         postList: {},
  51.         categoryPosts:{},
  52.         category:''
  53.       }
  54.     },
  55.     methods: {
  56.       getCategoryPosts() {
  57.       butter.category.retrieve(this.$route.params.category, {
  58.           include: 'recent_posts'
  59.         })
  60.         .then((res) => {
  61.           this.categoryPosts = res.data.data.recent_posts;
  62.           this.category = this.$route.params.category;
  63.         })
  64.       },
  65.       getPost() {
  66.         butter.post.retrieve(this.$route.params.slug)
  67.           .then((res) => {
  68.             this.post = res.data.data
  69.           }).catch((res) => {
  70.           })
  71.       },
  72.       getPosts() {
  73.         butter.post.list({
  74.           page: 1,
  75.           page_size: 3
  76.         }).then((res) => {
  77.           console.log(res.data)
  78.           this.postList = res.data.data
  79.         })
  80.       },
  81.     },
  82.     watch: {
  83.       '$route' (to, from, next) {
  84.         this.getCategoryPosts();
  85.         this.getPosts();
  86.       }
  87.     },
  88.     created() {
  89.       // this.getPost();
  90.       this.getCategoryPosts();
  91.       this.getPosts();
  92.     }
  93.   }
  94. </script>
  95.  
  96.  
  97.  
  98. <!-- Add "scoped" attribute to limit CSS to this component only -->
  99. <style scoped lang="scss">
  100.   .content{
  101.     padding-top:5em;
  102.     width:90%;
  103.     margin:0 auto;
  104.     h3{
  105.       margin:0;
  106.       color:#333;
  107.       text-decoration: none;
  108.       font-size:1.2em;
  109.       &:hover{
  110.        color:rgb(0, 67, 182);
  111.       }
  112.     }
  113.     a{
  114.       text-decoration: none;
  115.       &:hover{
  116.        text-decoration: underline;
  117.       }
  118.     }
  119.     .article-container{
  120.       display: block;
  121.       margin:1em 0;
  122.       padding:1.5em 0;
  123.       border-bottom: 1px solid rgb(228, 228, 228);
  124.     }
  125.     h4{
  126.       text-transform: uppercase;
  127.       color:rgb(0, 67, 182);
  128.       margin: 0.5em;
  129.     }
  130.   }
  131.   .content p{
  132.     color:#333;
  133.     text-decoration: none;
  134.     font-size:0.9em;
  135.     margin:0;
  136.     opacity:0.9;
  137.     line-height: 25px;
  138.   }
  139.   .content-title h1{
  140.     text-transform: uppercase;
  141.     font-size:2em;
  142.     text-align: left;
  143.     &:after{
  144.      content:'';
  145.       position:absolute;
  146.       top:0;
  147.       width:100px;
  148.       height:5px;
  149.       background:red;
  150.     }
  151.   }
  152.    .sidebar{
  153.     //   z-index: 100;
  154.     //   width:90%;
  155.     //   margin:0 auto;
  156.     //   max-width:850px;
  157.     //   position: relative;
  158.     //   top: -100px;
  159.    display:none;
  160.    }
  161.   .sidebar-title{
  162.     margin:1.4em 0;
  163.   }
  164.   .sidebar-title:after{
  165.     content:'';
  166.     width: 50px;
  167.     height: 5px;
  168.     background-color: red;
  169.     position: absolute;
  170.     left: 0;
  171.     top: 70px;
  172.   }
  173.   .sidebar-block{
  174.     width:90%;
  175.     color:black;
  176.     font-size:1.1em;
  177.     text-decoration:none;
  178.     display: inline-block;
  179.     text-align:center;
  180.     margin:1em 0 0em 0;
  181.   }
  182.   .sidebar-image{
  183.     display: block;
  184.     text-align:center;
  185.     width:35%;
  186.   }
  187.   .article-image{
  188.     width:100%;
  189.     display:block;
  190.   }
  191.   @media only screen and (min-width: 500px) {
  192.     // .content{
  193.     //   width:100%;
  194.     // }
  195.   }
  196.  
  197.   @media only screen and (min-width: 800px) {
  198.     .body{
  199.       padding:0 4em;
  200.     }
  201.     .content{
  202.     }
  203.     .article-image{
  204.       width: 30%;
  205.       float: left;
  206.       margin: 0 20px 0 0;
  207.     }
  208.     .article-text{
  209.       vertical-align:top;
  210.     }
  211.   }
  212.   @media only screen and (min-width: 1100px) {
  213.     .content{
  214.       width:70%;
  215.       display: inline-block;
  216.       margin-right:5%;
  217.     }
  218.     .sidebar{
  219.       margin-top:5em;
  220.       width:20%;
  221.       display: inline-block;
  222.       vertical-align: top;
  223.       .sidebar-block{
  224.         margin:2em 0;
  225.         display: block;
  226.       }
  227.       .sidebar-image{
  228.         display:inline-block;;
  229.         width:80%;
  230.         margin-right:5px;
  231.       }
  232.       .sidebar-text{
  233.         vertical-align: top;
  234.         display: inline-block;
  235.         width:100%;
  236.         margin:0;
  237.         font-size:0.8em;
  238.       }
  239.     }
  240.   }
  241. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top