kit-list.html

<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/paper-input/paper-input.html">
<link rel="import" href="/post-service/post-service.html">
<link rel="import" href="kit-card.html">
<polymer-element name="kit-list" attributes="show">
  <template>
    <style>
    :host {
      display: block;
      width: 100%;
    }
    kit-card {
      margin-bottom: 30px;
    }
    core-icon-button {
      position: absolute;
      top: 3px;
      right: 3px;
    }
    core-icon-button {
      fill: #636363;
    }
    :host([favorite]) core-icon-button {
      fill: #da4336;
    }
    .info-btn {
      background: #fff000;
      margin: 0 10px;
      font-size: 12px;
      min-width: 60px;
    }
    .share-btn {
      background: #f39c12;
      margin: 0;
      font-size: 12px;
      min-width: 60px;
    }
@media (max-width: 600px) {    
    .info-btn {
      background: #fff000;
      margin: 0 10px;
      font-size: 10px;
    }
    .share-btn {
      font-size: 10px;
    }
  }
  .flag-avatar {
    width:70px;
    height:70px;
    min-height: 70px;
    min-width: 70px;
  }
  .notes {
    width: 100%;
    color: #666;
  }
    a {
      color: #333;
    }
    p {
      color: #333;
    }
    </style>

    <post-service id="service" posts="{{posts}}"></post-service>

    <div layout vertical center hidden?="{{show == 'none'}}">
      <h1>Info Kits</h1>
      <h3>《雨傘運動懶人包》</h3>
      <p> We've prepared localized info kits for you to read and share about <code>#umbrellaRevolution</code>. 
        <br>Welcome to download PDF to print as posters. </p>
      <template repeat="{{post in posts}}" attributes="lang">
        <kit-card>
          <img src="{{post.avatar}}" class="flag-avatar">
          <h2>{{post.lang_name}}</h2>
          <a href="{{post.pdf_url}}" target="_blank">
            <core-icon-button
            id="favicon"
            icon="file-download"
            title="Download"
            on-tap="{{PDFtapped}}"
            hidden?="{{post.status != 'ready'}}"
            > PDF
            </core-icon-button>
          </a>
          <paper-button raised class="info-btn" hidden?="{{post.status != 'ready'}}" attributes="lang" lang="{{post.lang}}" on-tap="{{viewTapped}}">View</paper-button>
          <p class="notes">{{post.notes}}</p>
          <paper-button raised hidden?="{{post.status != 'ready'}}" class="share-btn" attributes="lang" lang="{{post.lang}}" on-tap="{{shareTapped}}">Share</paper-button>
        </kit-card>
      </template>
    </div>

  </template>

  <script>
  Polymer('kit-list', {
    viewTapped: function(event, detail, sender) {
      var kit = sender.templateInstance.model.post;
      this.fire('view-tap', {lang: kit.lang});
    },
    PDFTapped: function(event, detail, sender) {
    },
    shareTapped : function(event, detail, sender) {
      var kit = sender.templateInstance.model.post;
      this.fire('share-tap', {lang: kit.lang});
    }
  });


  </script>

</polymer-element>