CMS DESİGN VUEJS

cms-design-vuejs.markdown

CMS DESİGN VUEJS

This is a basic for my blog cms. Make with Vue.js.

A Pen by Özgür on CodePen.

License.

index.html

<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="app">
  <header class="header">
  <a href="" class="logo"> <img src="https://4.bp.blogspot.com/-3enDWG8xtHk/XQZqfG0TacI/AAAAAAAAAxM/fUAGI-jc6hIeGzmGwdygwmN9qhyTFXgewCK4BGAYYCw/w800/logo%2B2%2Bseffaf.png" alt=""> </a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#work">ANASAYFA</a></li>
    <li><a href="#about">İSTATİSTİKLER</a></li>
    <li><a href="#careers">KAZANÇ</a></li>
    <li><a href="#contact">AYARLAR</a></li>
  </ul>
</header>
  <div id="stats">
    <h3 style="color: #1e90ff; margin-left: 40%;"> AYLIK </h3>
    <h2 style="margin-left: 35%;"> 150.750 </h2>
    <h4 style="color: #1e90ff; margin-left: 40%;"> GÜNLÜK </h4>
    <h3 style="margin-left: 40%"> 5,025 </h3>
    <h2 style="color: #1e90ff; margin-left: 33%;"> TOPLAM </h2>
    <h1 style="margin-left: 30%;"> 1.365.417 </h1>
  </div>
  <div id="posts">
    
    <h2 style="color: #1e90ff; margin-left: 35%;"> YAZILAR </h2>
    <div id="new-text" v-if="inputShow">  
     <div id="in">
        <input type="text" placeholder="  Yazı Başlığı" id="text-header" v-model="header">
       <br>
       <textarea type="text" placeholder="  İçeriği Girin" rows="10" id="text-content" v-model="content"> </textarea>
       <input type="text" placeholder="  Resim URL'sini gir" id="text-header" v-model="image" v-on:keydown.enter="addContent">
     </div>
    </div>
    <div class="ui blue animated button" tabindex="0" id="yeni-yazi"  @click=" inputShow = !inputShow">
      <div class="hidden content"> YENİ YAZI </div>
      <div class="visible content">
        <i class="plus icon"></i>
      </div>
    </div>
    <div id="content" v-for="blog in blogs" v-if="!inputShow">
      
      <img src="" alt="" id="content-img" v-bind:src="blog.image">
      
      <div id="info">
        <h5 style="margin-left: 15%;"> {{blog.header}} </h5>
        
      </div>
      
    </div>
    
  </div>
</div>

script.js

var app = new Vue({
  el: '#app',
  data:{
    blogs:[],
    images:[],
    statics: null,
    istatistik:[],
    stat:null,
    aylık: null,
    inputShow:false,
    content:[],
    header:[],
    image:[]
 
  },
  methods:{
    addContent(event){
      axios.post("https://vue-blog-bitonmavi.firebaseio.com/content.json", { header: this.header, content: this.content, image: this.image  } )
             .then((response) => {
                    console.log(response)
  })
    }
    
  },
  created(event){
   this.statics++;
   axios.get("https://vue-blog-bitonmavi.firebaseio.com/content.json",)
            .then((response) =>{
            let data = response.data;
            for(let key in data){
                console.log(data[key]);
                this.blogs.push(data[key]);
                
                
            }
        })
    axios.get("https://vue-blog-bitonmavi.firebaseio.com/istatistik.json",)
            .then((response) =>{
            let data = response.data;
            for(let key in data){
                console.log(data[key]);
                this.istatistik.push(data[key]);
                
                
            }
        })

    axios.patch("https://vue-blog-bitonmavi.firebaseio.com/istatistik/-LmffRMQPQRSCYg6uKuz.json", { aylık: this.statics+1 } )
             .then((response) => {
                    console.log(response)
                    console.log(response.data.aylık+1)
                   
                    
                    
  })
     
    
  }
   
  
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>

style.css

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: #f4f4f4;
}

a {
  color: #000;
}

/* header */

.header {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.header li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}
img{
  height: 30px;
  
}
#posts{
  width: 90%;
  background-color: #ffff;
  margin-top: 120%;
  position: absolute;
  box-shadow: 0.1px 0.1px 10px 0.1px #ced6e0;
  margin-left: 5%;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}
#content{
  width: 90%;
  background-color: #ffff;
  border: 1px solid #48dbfb;
  margin-left: 5%;
  margin-top: 5%;
}
#content-img{
  width: 80px;
  height: 80px;
}
#info{
  width: 81%;
  height: 50px;
  margin-left: 20%;
  margin-top: -21%;
}
#stats{
  width: 90%;
  padding: 20px;
  margin-left: 5%;
  background-color: #ffff;
  position: absolute;
  margin-top: 20%;
  box-shadow: 0.1px 0.1px 10px 0.1px #ced6e0;
  border-radius: 5px;
  display: block;
  margin-bottom: 20px;
}
#yeni-yazi{
  width: 90%;
  margin-left: 5%;
}
#new-text{
  width: 100%;
  height: 300px;
  background-color: #ffff;
  transition: width 0.5s, height 0.5s;
  
}
#in{
  margin-left: 10%;
}
#text-header{
  width: 90%;
  height: 40px;
  border: 1px solid #12CBC4;
  border-radius: 5px;
  background-color: #dcdde1;
}
#text-header:focus{
  background-color: #ffff;
  transition: background-color 0.5s;
}
#text-content{
  width: 90%;
  margin-top: 10px;
  border: 1px solid #12CBC4;
  border-radius: 5px;
  background-color: #dcdde1;
}
#text-content:focus{
  background-color: #ffff;
  transition: background-color 0.5s;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />