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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 582873003: Polymer elements added to third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: 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/core-animated-pages/demos/news.html ('k') | third_party/polymer/components/core-animated-pages/demos/quiz1-intro.png » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/polymer/components/core-animated-pages/demos/quiz1.html
diff --git a/third_party/polymer/components/core-animated-pages/demos/quiz1.html b/third_party/polymer/components/core-animated-pages/demos/quiz1.html
new file mode 100644
index 0000000000000000000000000000000000000000..358c7a260dd988cfd77504690229cc6167b851a6
--- /dev/null
+++ b/third_party/polymer/components/core-animated-pages/demos/quiz1.html
@@ -0,0 +1,254 @@
+<!doctype html>
+<html>
+<head>
+ <title>core-animated-pages</title>
+
+ <script src="../../platform/platform.js"></script>
+ <link href="../../core-icons/av-icons.html" rel="import">
+ <link href="../../paper-fab/paper-fab.html" rel="import">
+
+ <link href="../core-animated-pages.html" rel="import">
+ <link href="../transitions/slide-up.html" rel="import">
+ <link href="../transitions/list-cascade.html" rel="import">
+
+ <style>
+ body {
+ font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ margin: 0;
+ background: #f1f1f1;
+ }
+
+ quiz-demo {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ }
+ </style>
+</head>
+<body>
+
+ <polymer-element name="quiz-demo">
+ <template>
+
+ <style>
+ core-animated-pages {
+ height: 100%;
+ }
+
+ section {
+ overflow: hidden;
+ }
+
+ .fab {
+ position: absolute;
+ fill: #fff;
+ }
+
+ .fab-0 {
+ bottom: 50px;
+ right: 24px;
+ }
+
+ .fab-1 {
+ top: 210px;
+ right: 24px;
+ }
+
+ paper-fab {
+ background-color: #ff4081;
+ }
+
+ .top {
+ background-color: #ffff8d;
+ }
+
+ .top-image {
+ background: url(quiz1-intro.png);
+ height: 287px;
+ width: 202px;
+ }
+
+ .bottom {
+ box-sizing: border-box;
+ position: relative;
+ height: 80px;
+ background-color: #ffeb3b;
+ padding: 24px;
+ color: #fff;
+ font-size: 32px;
+ }
+
+ .tall-toolbar {
+ box-sizing: border-box;
+ height: 240px;
+ position: relative;
+ color: #fff;
+ padding: 48px;
+ font-size: 48px;
+ }
+
+ .tall-toolbar.categories {
+ background-color: #00bbd3;
+ margin-bottom: 2px;
+ }
+
+ .tall-toolbar.questions {
+ background-color: #ffeb3b;
+ }
+
+ .middle {
+ background-color: #fafafa;
+ color: #3f3f3f;
+ padding: 24px 48px;
+ font-size: 24px;
+ line-height: 1.5;
+ }
+
+ .footer {
+ height: 80px;
+ }
+
+ .avatar {
+ height: 80px;
+ width: 80px;
+ background-color: #ff80ab;
+ }
+
+ .footer-right, .score {
+ border-top: 1px solid #ccc;
+ background-color: #fff;
+ padding: 30px;
+ }
+
+ .tile {
+ box-sizing: border-box;
+ float: left;
+ height: 200px;
+ width: 49%;
+ margin: 3px;
+ }
+
+ .tile-bottom {
+ padding: 8px;
+ color: #fff;
+ }
+ </style>
+
+ <core-animated-pages selected="{{page}}" transitions="hero-transition slide-up slide-down cross-fade list-cascade" on-core-animated-pages-transition-end="{{complete}}">
+
+ <section layout vertical>
+
+ <div class="tall-toolbar categories" slide-down>
+ <span>Your name here</span>
+ </div>
+
+ <div class="tiles-container">
+ <div class="tile" style="background-color:#ccc;" layout vertical>
+ <div class="tile-top" flex></div>
+ <div class="tile-bottom" style="background-color:#aaa;">
+ Leaderboard
+ </div>
+ </div>
+ <div class="tile" hero-id="category-image" hero style="background-color:#ffff8d;" layout vertical on-tap="{{transition}}">
+ <div class="tile-top" flex></div>
+ <div class="tile-bottom" hero-id="footer" hero style="background-color:#ffeb3b;">
+ General Knowledge
+ </div>
+ </div>
+ <div class="tile" style="background-color:#b9f6ca;" layout vertical>
+ <div class="tile-top" flex></div>
+ <div class="tile-bottom" style="background-color:#0f9d58;">
+ Category 2
+ </div>
+ </div>
+ <div class="tile" style="background-color:#ff8a80;" layout vertical>
+ <div class="tile-top" flex></div>
+ <div class="tile-bottom" style="background-color:#db4437;">
+ Category 3
+ </div>
+ </div>
+ <div class="tile" style="background-color:#82b1ff;" layout vertical>
+ <div class="tile-top" flex></div>
+ <div class="tile-bottom" style="background-color:#4285f4;">
+ Category 4
+ </div>
+ </div>
+ <div class="tile" style="background-color:#b388ff;" layout vertical>
+ <div class="tile-top" flex></div>
+ <div class="tile-bottom" style="background-color:#7e57c2;">
+ Category 5
+ </div>
+ </div>
+ </div>
+
+ </section>
+
+ <section layout vertical>
+
+ <div class="top" hero-id="category-image" hero flex layout horizontal center center-justified>
+ <div class="top-image" cross-fade></div>
+ </div>
+ <div class="bottom" hero-id="footer" hero cross-fade>
+ <span cross-fade>General Knowledge</span>
+ </div>
+ <div class="fab fab-0" hero-id="fab" hero>
+ <paper-fab icon="av:play-arrow" on-tap="{{transition}}" hero></paper-fab>
+ </div>
+ </section>
+
+ <section layout vertical>
+
+ <div class="tall-toolbar questions" hero-id="footer" hero>
+ <span cross-fade>Question here</span>
+ </div>
+ <div class="fab fab-1" hero-id="fab" hero>
+ <paper-fab icon="av:play-arrow" on-tap="{{transition}}" hero></paper-fab>
+ </div>
+
+ <div flex class="middle" slide-up list-cascade>
+ <p>Option 1</p>
+ <p>Option 2</p>
+ <p>Option 3</p>
+ <p>Option 4</p>
+ <p>Option 5</p>
+ </div>
+
+ <div class="footer" layout horizontal slide-up>
+ <div class="avatar"></div>
+ <div class="footer-right" flex>
+ some text here
+ </div>
+ <div class="score">
+ 32 pts
+ </div>
+ </div>
+
+ </section>
+
+ </core-animated-pages>
+
+ </template>
+ <script>
+
+ Polymer('quiz-demo', {
+
+ page: 0,
+
+ transition: function(e) {
+ if (this.page === 2) {
+ this.page = 0;
+ } else {
+ this.page += 1;
+ }
+ }
+ });
+
+ </script>
+ </polymer-element>
+
+ <quiz-demo></quiz-demo>
+</body>
+</html>
« no previous file with comments | « third_party/polymer/components/core-animated-pages/demos/news.html ('k') | third_party/polymer/components/core-animated-pages/demos/quiz1-intro.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698