google-slide-author.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">

<!--
A social card with information for your talk.

##### Example

	<google-slide-author
	    avatar="resources/images/addy.jpg"
	    twitter="@addyosmani"
	    plus="+AddyOsmani">
	</google-slide-author>

@element google-slide-author.
@blurb A social card with information for your talk.

-->
<dom-module id="google-slide-author">
  <style>
		:host {
		    display: block;
		}

		:host .twitter {
			font-size: 0.8em;
		}

		:host .plus {
			line-height: 40px;
		}

		:host img {
			border: 5px solid gray;
			width: 90px;
			border-radius: 50%;
			margin: 25px;
		}
	</style>
  <template>
  	<div class="layout horizontal">
  		<div>
    		<template is="dom-if" if="{{_ifAvatar(avatar)}}">
    			<img src="{{avatar}}">
    		</template>
  		</div>

  		<div class="flex">
  		  <p class="plus">[[plus]]</p>
  	    <p class="twitter">[[twitter]]</p>
  	  </div>
  	</div>
	</template>

  <script>
    Polymer({
      is: 'google-slide-author',
      properties: {
        avatar: {
          type: String
        },
        plus: {
          type: String
        },
        twitter: {
          type: String
        }
      },
      _ifAvatar: function (avatar) {
        return avatar.length > 0;
      }
    });
  </script>
</dom-module>