designer

designer.html

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

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        margin: 0px;
        background: rgb(241, 241, 241);
      }
      .green {
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        height: 350px;
        background: rgb(112, 194, 111);
      }
      .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;
        box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 10px 0px;
        background-color: rgb(255, 255, 255);
      }
      .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;
        box-shadow: rgba(0, 0, 0, 0.188235) 0px 6px 20px 0px;
        background: rgb(255, 255, 255);
      }
      .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;
      }
      #div {
        background: rgb(244, 219, 51);
      }
      #core_animated_pages {
        left: 0px;
        top: 0px;
        position: absolute;
      }
      #div7 {
        background: rgb(151, 47, 248);
      }
      #div12 {
        background: rgb(125, 214, 254);
      }
      #div17 {
        background: rgb(220, 60, 132);
      }
    </style>
    <core-animated-pages transitions="hero-transition" selected="{{ page }}" selectedindex="0" notap id="core_animated_pages" on-core-animated-pages-transition-end="{{ complete }}">
      <section id="section" active>
        <div id="div3" class="chip-container" hero-p on-tap="{{ transition }}">
          <template id="template" repeat="{{items as item}}"></template>
          <div id="div4" class="chip" hero-id="Tycho-Fragments">
            <div id="div" class="chip-top" hero-id="Tycho-Fragments-art"></div>
            <div id="div5" class="chip-bottom">
              <div id="div2" class="chip-album-title">{{ item.album }}</div>
              <div id="div1" class="chip-artist">{{ item.artist }}</div>
            </div>
          </div>
          <div id="div6" class="chip" hero-id="Tycho-Past Prologue">
            <div id="div7" class="chip-top" hero-id="Tycho-Past Prologue-art"></div>
            <div id="div8" class="chip-bottom">
              <div id="div9" class="chip-album-title">{{ item.album }}</div>
              <div id="div10" class="chip-artist">{{ item.artist }}</div>
            </div>
          </div>
          <div id="div11" class="chip" hero-id="Tycho-Spectre">
            <div id="div12" class="chip-top" hero-id="Tycho-Spectre-art"></div>
            <div id="div13" class="chip-bottom">
              <div id="div14" class="chip-album-title">{{ item.album }}</div>
              <div id="div15" class="chip-artist">{{ item.artist }}</div>
            </div>
          </div>
          <div id="div16" class="chip" hero-id="Tycho-Awake">
            <div id="div17" class="chip-top" hero-id="Tycho-Awake-art"></div>
            <div id="div18" class="chip-bottom">
              <div id="div19" class="chip-album-title">{{ item.album }}</div>
              <div id="div20" class="chip-artist">{{ item.artist }}</div>
            </div>
          </div>
        </div>
      </section>
      <section id="details">
        <div id="div21" class="card" layout horizontal hero-id="-" hero on-tap="{{ transition }}">
          <div id="div22" class="card-left" hero-id="--art" hero></div>
          <div id="div23" class="card-right" flex>
            <div id="div24" layout horizontal center>
              <div id="div25">
                <div id="div26" class="card-icon"></div>
              </div>
              <div id="div27" flex>
                <div id="div28" class="card-album-title">{{ selectedAlbum.album }}</div>
                <div id="div29" 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>