Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(168)

Side by Side Diff: third_party/polymer/components-chromium/core-animated-pages/demos/music.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, 2 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 unified diff | Download patch
OLDNEW
(Empty)
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-co re-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}};" her o-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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698