third_party/polymer/components/core-animated-pages/demos/music.html

   1 <!--
   2     @license
   3     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7     Code distributed by Google as part of the polymer project is also
   8     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <!doctype html>
  11 <html>
  12 <head>
  13   <title>core-animated-pages</title>
  14
  15   <script src="../../webcomponentsjs/webcomponents.js"></script>
  16   <link href="../core-animated-pages.html" rel="import">
  17
  18   <style>
  19     body {
  20       font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  21       margin: 0;
  22       background: #f1f1f1;
  23     }
  24
  25     .green {
  26       position: absolute;
  27       top: 0;
  28       right: 0;
  29       left: 0;
  30       height: 350px;
  31       background: #70c26f;
  32     }
  33   </style>
  34 </head>
  35 <body>
  36
  37   <polymer-element name="music-demo">
  38   <template>
  39
  40     <style>
  41       .chip-container {
  42         position: absolute;
  43         top: 275px;
  44         right: 0;
  45         left: 0;
  46         text-align: center;
  47       }
  48
  49       .chip {
  50         display: inline-block;
  51         position: relative;
  52         border-radius: 3px;
  53         margin: 4px;
  54         overflow: hidden;
  55         text-align: start;
  56         background-color: #fff;
  57         box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
  58       }
  59
  60       .chip-top {
  61         width: 200px;
  62         height: 200px;
  63       }
  64
  65       .chip-bottom {
  66         padding: 8px;
  67         line-height: 1.5;
  68       }
  69
  70       .chip-album-title {
  71         font-weight: bold;
  72       }
  73
  74       #details {
  75         padding: 200px 10% 0;
  76       }
  77
  78       .card {
  79         height: 400px;
  80         border-radius: 3px;
  81         text-align: start;
  82         overflow: hidden;
  83         background: #fff;
  84         box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  85       }
  86
  87       .card-left {
  88         width: 400px;
  89       }
  90
  91       .card-right {
  92         padding: 24px;
  93       }
  94
  95       .card-icon {
  96         border-radius: 50%;
  97         width: 60px;
  98         height: 60px;
  99         margin-right: 16px;
 100       }
 101
 102       .card-album-title {
 103         font-size: 2em;
 104       }
 105     </style>
 106
 107     <core-animated-pages selected="{{page}}" transitions="hero-transition" on-core-animated-pages-transition-end="{{complete}}">
 108
 109       <section>
 110
 111         <div class="chip-container" hero-p on-tap="{{transition}}">
 112
 113           <template repeat="{{items as item}}">
 114
 115             <div class="chip" hero-id="{{item.artist}}-{{item.album}}" hero?="{{selectedAlbum === item }}">
 116               <div class="chip-top" style="background:{{item.color}};" hero-id="{{item.artist}}-{{item.album}}-art" hero?="{{selectedAlbum === item}}"></div>
 117               <div class="chip-bottom">
 118                 <div class="chip-album-title">{{item.album}}</div>
 119                 <div class="chip-artist">{{item.artist}}</div>
 120               </div>
 121             </div>
 122
 123           </template>
 124
 125         </div>
 126       </section>
 127
 128       <section id="details">
 129
 130         <div class="card" layout horizontal hero-id="{{selectedAlbum.artist}}-{{selectedAlbum.album}}" hero on-tap="{{transition}}">
 131           <div class="card-left" style="background:{{selectedAlbum.color}};" hero-id="{{selectedAlbum.artist}}-{{selectedAlbum.album}}-art" hero></div>
 132           <div class="card-right" flex>
 133             <div layout horizontal center>
 134               <div>
 135                 <div class="card-icon" style="background:{{selectedAlbum.color}};"></div>
 136               </div>
 137               <div flex>
 138                 <div class="card-album-title">{{selectedAlbum.album}}</div>
 139                 <div class="card-album-artist">{{selectedAlbum.artist}}</div>
 140               </div>
 141             </div>
 142           </div>
 143         </div>
 144
 145       </section>
 146
 147     </core-animated-pages>
 148
 149   </template>
 150   <script>
 151
 152     Polymer('music-demo', {
 153
 154       page: 0,
 155
 156       items: [
 157         { artist: 'Tycho', album: 'Fragments', color: '#f4db33' },
 158         { artist: 'Tycho', album: 'Past Prologue', color: '#972ff8' },
 159         { artist: 'Tycho', album: 'Spectre', color: '#7dd6fe' },
 160         { artist: 'Tycho', album: 'Awake', color: '#dc3c84' }
 161       ],
 162
 163       selectedAlbum: null,
 164
 165       transition: function(e) {
 166         if (this.page === 0 && e.target.templateInstance.model.item) {
 167           this.selectedAlbum = e.target.templateInstance.model.item;
 168           this.page = 1;
 169         } else {
 170           this.page = 0;
 171         }
 172       }
 173     });
 174
 175   </script>
 176   </polymer-element>
 177
 178   <div class="green"></div>
 179
 180   <music-demo></music-demo>
 181 </body>
 182 </html>