third_party/polymer/components-chromium/core-animated-pages/demos/news.html - Issue 592593002: Inline scripts were extracted from Polymer elements.

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

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: s/echo ""/echo/ Created 6 years, 3 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html ('k') | third_party/polymer/components-chromium/core-animated-pages/demos/quiz1.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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

diff --git a/third_party/polymer/components-chromium/core-animated-pages/demos/news.html b/third_party/polymer/components-chromium/core-animated-pages/demos/news.html

new file mode 100644

index 0000000000000000000000000000000000000000..1ba5086c8040c5e799040304b538bc6958c116dc

--- /dev/null

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

@@ -0,0 +1,246 @@

+<!doctype html>

+<html>

+<head>

+ <script src="../../platform/platform.js"></script>

+ <link href="../../core-icons/core-icons.html" rel="import">

+ <link href="../../core-icons/social-icons.html" rel="import">

+ <link href="../../core-toolbar/core-toolbar.html" rel="import">

+ <link href="../../paper-shadow/paper-shadow.html" rel="import">

+ <link href="../core-animated-pages.html" rel="import">

+ <style shim-shadowdom>

+ body {

+ font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;

+ margin: 0;

+ }

+ .fit {

+ position: absolute;

+ top: 0;

+ right: 0;

+ bottom: 0;

+ left: 0;

+ width: 420px;

+ }

+ .toolbar {

+ background: #8d3efc;

+ /* FIXME */

+ color: #fff !important;

+ fill: #fff;

+ }

+ .toolbar-2 {

+ position: absolute;

+ top: 0;

+ left: 0;

+ background: #000;

+ color: #fff;

+ text-align: center;

+ font-size: 48px;

+ }

+ body /deep/ .toolbar-2 {

+ position: absolute;

+ top: 0;

+ left: 0;

+ margin: 0;

+ width: 420px;

+ background: #000;

+ color: #fff;

+ text-align: center;

+ font-size: 48px;

+ }

+ .container {

+ background-color: #e7e7e7;

+ padding: 16px;

+ }

+ .card {

+ position: relative;

+ background-color: #fff;

+ border-radius: 2px;

+ }

+ .card-top {

+ background: #f2da2f;

+ height: 240px;

+ }

+ .card-top-2 {

+ background: #99f8b7;

+ height: 240px;

+ }

+ .card-bottom {

+ padding: 24px;

+ }

+ .headline {

+ font-size: 24px;

+ overflow: hidden;

+ text-overflow: ellipsis;

+ white-space: nowrap;

+ }

+ .icon {

+ position: relative;

+ background: #000;

+ color: #fff;

+ width: 40px;

+ height: 40px;

+ border-radius: 50%;

+ }

+ .icon::after {

+ content: 'T';

+ font-size: 24px;

+ position: absolute;

+ top: 7px;

+ left: 13px;

+ }

+ .source-container {

+ margin-top: 16px;

+ }

+ .two-lines {

+ margin-left: 16px;

+ }

+ .source {

+ font-size: 14px;

+ }

+ .time {

+ color: rgba(0, 0, 0, 0.54);

+ font-size: 12px;

+ }

+ .tiles-container {

+ margin-top: 16px;

+ }

+ .tile {

+ position: relative;

+ display: inline-block;

+ width: 85px;

+ height: 85px;

+ background: #fff;

+ border-radius: 2px;

+ }

+ </style>

+</head>

+<body unresolved>

+ <polymer-element name="shadow-div" noscript>

+ <template>

+ <style>

+ :host {

+ display: block;

+ }

+ </style>

+ <paper-shadow target="{{}}" z="1"></paper-shadow>

+ <content></content>

+ </template>

+ </polymer-element>

+ <core-animated-pages class="fit" selected="0" transitions="cross-fade-all hero-transition">

+ <section id="first">

+ <core-toolbar class="tall toolbar">

+ <core-icon icon="menu"></core-icon>

+ <div flex>Highlights</div>

+ <core-icon icon="social:share"></core-icon>

+ <core-icon icon="bookmark"></core-icon>

+ <core-icon icon="more-vert"></core-icon>

+ </core-toolbar>

+ <div class="container" hero-p>

+ <shadow-div class="card" hero-p onclick="stuff()">

+ <div class="card-top"></div>

+ <div class="card-bottom" hero-p>

+ <div class="headline">Google's Craziest Offices</div>

+ <div class="source-container" hero-p layout horizontal center>

+ <div class="icon" hero-id="icon-header" hero></div>

+ <div class="two-lines">

+ <div class="source">The New York Times</div>

+ <div class="time">36 minutes ago</div>

+ </div>

+ </shadow-div>

+ <div class="tiles-container" layout horizontal justified>

+ <shadow-div class="tile"></shadow-div>

+ </div>

+ </section>

+ <section id="second">

+ <core-toolbar class="tall" hero-p>

+ <core-toolbar class="tall toolbar-2" hero-id="icon-header" hero>

+ <div flex class="middle">T</div>

+ </core-toolbar>

+ <div class="container">

+ <shadow-div class="card" onclick="stuff()">

+ <div class="card-top-2"></div>

+ <div class="card-bottom">

+ <div class="headline">Some long overflowing headline</div>

+ <div class="source-container" layout horizontal center>

+ <div class="icon" style="background:red;"></div>

+ <div class="two-lines">

+ <div class="source">The New York Times</div>

+ <div class="time">36 minutes ago</div>

+ </div>

+ </shadow-div>

+ <div class="tiles-container" layout horizontal justified>

+ <shadow-div class="tile"></shadow-div>

+ </div>

+ </section>

+ </core-animated-pages>

+ <script>

+ function stuff(e) {

+ var p = document.querySelector('core-animated-pages');

+ p.selected = p.selected ? 0 : 1;

+ }

+ </script>

+</body>

+</html>