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

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