Skip to content

Instantly share code, notes, and snippets.

@jeffposnick
Created July 2, 2014 18:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeffposnick/12722f81faef79e28f21 to your computer and use it in GitHub Desktop.
Save jeffposnick/12722f81faef79e28f21 to your computer and use it in GitHub Desktop.
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-icon-button/core-icon-button.html">
<polymer-element name="post-card">
<template>
<style>
:host {
display: block;
position: relative;
background-color: white;
padding: 20px;
width: 100%;
font-size: 1.2rem;
font-weight: 300;
}
.card-header {
margin-bottom: 10px;
}
polyfill-next-selector { content: '.card-header h2'; }
.card-header ::content h2 {
margin: 0;
font-size: 1.8rem;
font-weight: 300;
}
polyfill-next-selector { content: '.card-header img'; }
.card-header ::content img {
width: 70px;
border-radius: 50%;
margin: 10px;
}
core-icon-button {
position: absolute;
top: 3px;
right: 3px;
fill: #636363;
}
:host([favorite]) core-icon-button {
fill: #da4336;
}
</style>
<div class="card-header" layout horizontal center>
<content select="img"></content>
<content select="h2"></content>
</div>
<core-icon-button
id="favicon"
icon="favorite"
on-tap="{{favoriteTapped}}">
</core-icon-button>
<p>Love count: {{loveCount}}</p>
<content></content>
</template>
<script>
Polymer('post-card', {
loveCount: 0,
publish: {
favorite: {
value: false,
reflect: true
}
},
favoriteTapped: function(event, detail, sender) {
this.loveCount++;
this.favorite = !this.favorite;
this.fire('favorite-tap');
}
});
</script>
</polymer-element>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment