LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

{{ user.login }}

CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
:root {
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.heart {
  position: relative;
  color: #c5c5c5;
}
.heart:hover, .heart:focus {
  color: #c5c5c5;
}
.heart:hover:before {
  opacity: 1;
  -webkit-transform: translateY(-2rem);
          transform: translateY(-2rem);
}
.heart:before {
  position: absolute;
  left: -1.7rem;
  opacity: 0;
  width: 5rem;
  text-align: center;
  z-index: 0;
  background: rgba(51, 51, 51, 0.75);
  color: #fff;
  padding: .1rem .5rem;
  border-radius: 2px;
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.heart i {
  position: relative;
  z-index: 5;
  font-size: 2rem;
}

.heart.like {
  color: #ffc5c5;
}
.heart.like:before {
  content: 'Like';
}

.heart.love {
  color: #ff7878;
}
.heart.love:before {
  content: 'Love';
}

.heart.stalker {
  color: #ff4545;
}
.heart.stalker:before {
  content: 'Stalker';
}

.user-loop .user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #ddd;
  border-bottom: 0;
  padding: 1rem 1.5rem;
}
.user-loop .user img {
  height: 5rem;
  width: auto;
  border-radius: 50%;
}
.user-loop .user .info {
  width: 100%;
  margin-left: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.user-loop .user .info .title {
  font-weight: 500;
}
.user-loop .user:last-of-type {
  border-bottom: 1px solid #ddd;
}

.m-t-2 {
  margin-top: 2rem;
}

[v-cloak] {
  display: none;
}
JS
// GH users object from https://codepen.io/masonfox/pen/xEzrbr
// some existing heart values are set there

/**
 * PROPS SUMMARY
 * user_id - The looped user's id
 * owner_id - Global user's id
 * existing - any existing heart value associated with this owner and user
 */

Vue.component('heart', {
  props: ['user_id', 'owner_id' ,'existing'],
  template: `
    favorite
  `,
  data() {
    return {
      heart: {
        level: 0
      }
    }
  },
  methods: {
    handleHeart: function() {
    var heart = this.heart;
    var level = heart.level;   
    switch(level) {
      case 0:
        heart.level = 1;
        break;
      case 1:
        heart.level = 2;
        break;
      case 2:
        heart.level = 3;
        break;
      case 3:
        heart.level = 0;
        break;
      }
      
      this.updateDB();
    },
    updateDB() {
      let level = this.heart.level;
      let user = this.user_id;
      let owner = this.owner_id;
      let message = `User ${user} has been updated to heart level ${level} by ${owner}`;
      console.log(message);
    }
  },
  ready() {
    if(!this.existing) {
      this.heart.level = 0;
    } else {
      this.heart.level = this.existing;
    }
    console.log(this.heart.level);
  }
})

new Vue({
  el: 'body',
  data: {
    users: users,
    // what would be a global id
    owner_id: 5
  }
})
Term
Mon, 11/27/2017 - 21:21

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv