Bulma + Vuejs Flip Card

bulma-vuejs-flip-card.markdown

Bulma + Vuejs Flip Card

credit : bulma, vuejs, devices.css, chancejs, css-flip

A Pen by Dzulfikar Adi Putra on CodePen.

License.

index.html

<div id="app">
  <h1 class="title is-1 has-text-centered">Bulma + VueJS Flip Card</h1>
  <h5 class="subtitle is-5 has-text-centered">
    credit : 
    <a href="http://bulma.io/">bulma</a>, 
    <a href="https://vuejs.org/">vuejs</a>, 
    <a href="https://marvelapp.github.io/devices.css/">devices.css</a>, 
    <a href="http://chancejs.com/">chancejs</a>, 
    <a href="https://davidwalsh.name/css-flip">css-flip</a>
  </h5>
  <div class="marvel-device nexus5">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="screen">
      <div v-for="item in posts" class="flipper" v-bind:class="{'flip': item.flip}" v-on:click="letsFlip(item)">
        <figure class="front">
          <div class="card">
            <div class="card-image">
              <figure class="image">
                <img v-bind:src="item.image" alt="">
              </figure>
            </div>
            <div class="card-content">
              <div class="media">
                <div class="media-left">
                  <figure class="image is-32x32">
                    <img v-bind:src="item.avatar" alt="Image">
                  </figure>
                </div>
                <div class="media-content">
                  <p class="title is-5">{{item.name}}</p>
                  <p class="subtitle is-6">@{{item.ssn}}</p>
                </div>
              </div>
              <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>.
                <a href="#">#css</a> <a href="#">#responsive</a>
                <br>
                <small>11:09 PM - 1 Jan 2016</small>
              </div>
            </div>
          </div>
        </figure>
        <figure class="back">
          <div class="card">
            <div class="card-content">
              <div class="is-centered-ver-hor ">
                <div class="media">
                  <div class="media-left">
                    <figure class="image is-32x32">
                      <img v-bind:src="item.avatar" alt="Image">
                    </figure>
                  </div>
                  <div class="media-content">
                    <p class="title is-5">{{item.name}}</p>
                    <p class="subtitle is-6">@{{item.ssn}}</p>
                  </div>
                </div>
                <a class="button is-info is-outlined" v-on:click="viewCard()">
                  <h3 class="title is-3">View Card</h3>
                </a>
              </div>
            </div>
          </div>
        </figure>        
      </div>
    </div>
  </div>
</div>

script.js

var app = new Vue({
  el: '#app',
  data: {
    posts: [
      { id: 1, flip: false, avatar: 'http://loremflickr.com/g/64/64/men', image: 'http://loremflickr.com/g/320/240/paris', name: chance.name(), ssn: chance.ssn() },
      { id: 2, flip: false, avatar: 'http://loremflickr.com/g/64/64/boys', image: 'http://loremflickr.com/g/320/240/amsterdam', name: chance.name(), ssn: chance.ssn() },
      { id: 3, flip: false, avatar: 'http://loremflickr.com/g/64/64/women', image: 'http://loremflickr.com/g/320/240/london', name: chance.name(), ssn: chance.ssn() },
      { id: 4, flip: false, avatar: 'http://loremflickr.com/g/64/64/girl', image: 'http://loremflickr.com/g/320/240/newyork', name: chance.name(), ssn: chance.ssn() }
    ]
  },
  methods: {
    letsFlip: function(item){
      this.posts.filter(function(v,k){
        return v.id != item.id;
      }).forEach(function(v,k){
        v.flip = false;
      })
      window.setTimeout(function(v,k){
        item.flip = !item.flip;  
      }, 100)      
    },
    viewCard: function(){
      window.alert('view card!')
    }
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.4/chance.min.js"></script>

style.scss

#app{
  padding: 70px 0;
  background: #3273dc;
  
  >.title, 
  >.subtitle{
    color: white;
  }
}

.marvel-device{
  display: block;
  margin: 40px auto 0;
  
  .screen{
    padding: 10px 0;
    text-align: left;
    overflow-y: scroll;
  }
}
.flipper{
  margin: 0 auto 10px;
}
.flipper,
.card{
  cursor: pointer;
  height: 390px;
  margin: 0 auto 10px
}

.back .button{
  padding: 10px 20px;
}

.is-centered-ver-hor{
  height: 100px;
  width: 50%;
  padding: 20px;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* 3D FLIP CARD */
.flipper{
  transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}
.flipper.flip{
  transform: rotateY(180deg);
}

.front,
.back {
  margin: 0;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
	top: 0;
	left: 0;
  backface-visibility: hidden;
}

.front {
  z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}
.back {
  transform: rotateY( 180deg );
}


/* STYLING SCROLLBAR */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px #9e9e9e; 
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css" rel="stylesheet" />
<link href="https://marvelapp.github.io/devices.css/assets/devices.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />