designer

designer.html

<link href="../core-animated-pages/core-animated-pages.html" rel="import">
<link href="../core-animated-pages/transitions/hero-transition.html" rel="import">
<link href="../core-animated-pages/transitions/cross-fade.html" rel="import">
<link href="../core-animated-pages/transitions/slide-down.html" rel="import">
<link href="../core-animated-pages/transitions/slide-up.html" rel="import">
<link href="../core-animated-pages/transitions/tile-cascade.html" rel="import">

<polymer-element name="music-demo">

  <template>
    <style>    
      .chip-container {
        position: absolute;
        top: 275px;
        right: 0px;
        left: 0px;
        text-align: center;
      }
      .chip {
        display: inline-block;
        position: relative;
        border-radius: 3px;
        margin: 4px;
        overflow: hidden;
        text-align: start;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.16);
      }
      .chip-top {
        width: 200px;
        height: 200px;
      }
      .chip-bottom {
        padding: 8px;
        line-height: 1.5;
      }
      .chip-album-title {
        font-weight: bold;
      }
      #details {
        padding: 200px 10% 0px;
      }
      .card {
        height: 400px;
        border-radius: 3px;
        text-align: start;
        overflow: hidden;
        background: none repeat scroll 0% 0% rgb(255, 255, 255);
        box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
      }
      .card-left {
        width: 400px;
      }
      .card-right {
        padding: 24px;
      }
      .card-icon {
        border-radius: 50%;
        width: 60px;
        height: 60px;
        margin-right: 16px;
      }
      .card-album-title {
        font-size: 2em;
      }
    </style>
    <core-animated-pages transitions="hero-transition" selected="{{ page }}" selectedindex="0" notap on-core-animated-pages-transition-end="{{ complete }}">
      <section active>
        <div on-tap="{{ transition }}" hero-p class="chip-container">
          <template repeat="{{items as item}}"></template>
          <div hero-id="Tycho-Fragments" class="chip">
            <div hero-id="Tycho-Fragments-art" class="chip-top"></div>
            <div class="chip-bottom">
              <div class="chip-album-title">{{ item.album }}</div>
              <div class="chip-artist">{{ item.artist }}</div>
            </div>
          </div>
          <div hero-id="Tycho-Past Prologue" class="chip">
            <div hero-id="Tycho-Past Prologue-art" class="chip-top"></div>
            <div class="chip-bottom">
              <div class="chip-album-title">{{ item.album }}</div>
              <div class="chip-artist">{{ item.artist }}</div>
            </div>
          </div>
          <div hero-id="Tycho-Spectre" class="chip">
            <div hero-id="Tycho-Spectre-art" class="chip-top"></div>
            <div class="chip-bottom">
              <div class="chip-album-title">{{ item.album }}</div>
              <div class="chip-artist">{{ item.artist }}</div>
            </div>
          </div>
          <div hero-id="Tycho-Awake" class="chip">
            <div hero-id="Tycho-Awake-art" class="chip-top"></div>
            <div class="chip-bottom">
              <div class="chip-album-title">{{ item.album }}</div>
              <div class="chip-artist">{{ item.artist }}</div>
            </div>
          </div>
        </div>
      </section>
      <section id="details">
        <div on-tap="{{ transition }}" hero hero-id="-" horizontal layout class="card">
          <div hero hero-id="--art" class="card-left"></div>
          <div flex class="card-right">
            <div center horizontal layout>
              <div>
                <div class="card-icon"></div>
              </div>
              <div flex>
                <div class="card-album-title">{{ selectedAlbum.album }}</div>
                <div class="card-album-artist">{{ selectedAlbum.artist }}</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </core-animated-pages>
  </template>

  <script>

    Polymer({
      page: 0,
      items: [
        {
          "artist": "Tycho",
          "album": "Fragments",
          "color": "#f4db33"
        },
        {
          "artist": "Tycho",
          "album": "Past Prologue",
          "color": "#972ff8"
        },
        {
          "artist": "Tycho",
          "album": "Spectre",
          "color": "#7dd6fe"
        },
        {
          "artist": "Tycho",
          "album": "Awake",
          "color": "#dc3c84"
        }
      ],
      selectedAlbum: null,
      transition: function (e) {
if (this.page === 0 && e.target.templateInstance.model.item) {
this.selectedAlbum = e.target.templateInstance.model.item;
this.page = 1;
} else {
this.page = 0;
}
}
    });

  </script>

</polymer-element>