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

   1 <!doctype html>
   2 <html>
   3 <head>
   4
   5   <script src="../../platform/platform.js"></script>
   6
   7   <link href="../../core-icons/core-icons.html" rel="import">
   8   <link href="../../core-icons/social-icons.html" rel="import">
   9   <link href="../../core-toolbar/core-toolbar.html" rel="import">
  10
  11   <link href="../../paper-shadow/paper-shadow.html" rel="import">
  12
  13   <link href="../core-animated-pages.html" rel="import">
  14
  15   <style shim-shadowdom>
  16     body {
  17       font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  18       margin: 0;
  19     }
  20
  21     .fit {
  22       position: absolute;
  23       top: 0;
  24       right: 0;
  25       bottom: 0;
  26       left: 0;
  27       width: 420px;
  28     }
  29
  30     .toolbar {
  31       background: #8d3efc;
  32       /* FIXME */
  33       color: #fff !important;
  34       fill: #fff;
  35     }
  36
  37     .toolbar-2 {
  38       position: absolute;
  39       top: 0;
  40       left: 0;
  41       background: #000;
  42       color: #fff;
  43       text-align: center;
  44       font-size: 48px;
  45     }
  46
  47     body /deep/ .toolbar-2 {
  48       position: absolute;
  49       top: 0;
  50       left: 0;
  51       margin: 0;
  52       width: 420px;
  53       background: #000;
  54       color: #fff;
  55       text-align: center;
  56       font-size: 48px;
  57     }
  58
  59     .container {
  60       background-color: #e7e7e7;
  61       padding: 16px;
  62     }
  63
  64     .card {
  65       position: relative;
  66       background-color: #fff;
  67       border-radius: 2px;
  68     }
  69
  70     .card-top {
  71       background: #f2da2f;
  72       height: 240px;
  73     }
  74
  75     .card-top-2 {
  76       background: #99f8b7;
  77       height: 240px;
  78     }
  79
  80     .card-bottom {
  81       padding: 24px;
  82     }
  83
  84     .headline {
  85       font-size: 24px;
  86       overflow: hidden;
  87       text-overflow: ellipsis;
  88       white-space: nowrap;
  89     }
  90
  91     .icon {
  92       position: relative;
  93       background: #000;
  94       color: #fff;
  95       width: 40px;
  96       height: 40px;
  97       border-radius: 50%;
  98     }
  99
 100     .icon::after {
 101       content: 'T';
 102       font-size: 24px;
 103       position: absolute;
 104       top: 7px;
 105       left: 13px;
 106     }
 107
 108     .source-container {
 109       margin-top: 16px;
 110     }
 111
 112     .two-lines {
 113       margin-left: 16px;
 114     }
 115
 116     .source {
 117       font-size: 14px;
 118     }
 119
 120     .time {
 121       color: rgba(0, 0, 0, 0.54);
 122       font-size: 12px;
 123     }
 124
 125     .tiles-container {
 126       margin-top: 16px;
 127     }
 128
 129     .tile {
 130       position: relative;
 131       display: inline-block;
 132       width: 85px;
 133       height: 85px;
 134       background: #fff;
 135       border-radius: 2px;
 136     }
 137
 138   </style>
 139
 140 </head>
 141 <body unresolved>
 142
 143   <polymer-element name="shadow-div" noscript>
 144     <template>
 145       <style>
 146         :host {
 147           display: block;
 148         }
 149       </style>
 150       <paper-shadow target="{{}}" z="1"></paper-shadow>
 151       <content></content>
 152     </template>
 153   </polymer-element>
 154
 155   <core-animated-pages class="fit" selected="0" transitions="cross-fade-all hero-transition">
 156
 157     <section id="first">
 158
 159       <core-toolbar class="tall toolbar">
 160         <core-icon icon="menu"></core-icon>
 161         <div flex>Highlights</div>
 162         <core-icon icon="social:share"></core-icon>
 163         <core-icon icon="bookmark"></core-icon>
 164         <core-icon icon="more-vert"></core-icon>
 165       </core-toolbar>
 166
 167       <div class="container" hero-p>
 168
 169         <shadow-div class="card" hero-p onclick="stuff()">
 170           <div class="card-top"></div>
 171           <div class="card-bottom" hero-p>
 172             <div class="headline">Google's Craziest Offices</div>
 173             <div class="source-container" hero-p layout horizontal center>
 174               <div class="icon" hero-id="icon-header" hero></div>
 175               <div class="two-lines">
 176                 <div class="source">The New York Times</div>
 177                 <div class="time">36 minutes ago</div>
 178               </div>
 179             </div>
 180           </div>
 181         </shadow-div>
 182
 183         <div class="tiles-container" layout horizontal justified>
 184
 185           <shadow-div class="tile"></shadow-div>
 186           <shadow-div class="tile"></shadow-div>
 187           <shadow-div class="tile"></shadow-div>
 188           <shadow-div class="tile"></shadow-div>
 189
 190         </div>
 191
 192       </div>
 193
 194     </section>
 195
 196     <section id="second">
 197
 198       <core-toolbar class="tall" hero-p>
 199
 200         <core-toolbar class="tall toolbar-2" hero-id="icon-header" hero>
 201           <div flex class="middle">T</div>
 202         </core-toolbar>
 203       </core-toolbar>
 204
 205       <div class="container">
 206
 207         <shadow-div class="card" onclick="stuff()">
 208           <div class="card-top-2"></div>
 209           <div class="card-bottom">
 210             <div class="headline">Some long overflowing headline</div>
 211             <div class="source-container" layout horizontal center>
 212               <div class="icon" style="background:red;"></div>
 213               <div class="two-lines">
 214                 <div class="source">The New York Times</div>
 215                 <div class="time">36 minutes ago</div>
 216               </div>
 217             </div>
 218           </div>
 219         </shadow-div>
 220
 221         <div class="tiles-container" layout horizontal justified>
 222
 223           <shadow-div class="tile"></shadow-div>
 224           <shadow-div class="tile"></shadow-div>
 225           <shadow-div class="tile"></shadow-div>
 226           <shadow-div class="tile"></shadow-div>
 227
 228         </div>
 229
 230       </div>
 231
 232     </section>
 233
 234   </core-animated-pages>
 235
 236   <script>
 237
 238     function stuff(e) {
 239       var p = document.querySelector('core-animated-pages');
 240       p.selected = p.selected ? 0 : 1;
 241     }
 242
 243   </script>
 244
 245 </body>
 246 </html>