RubyGems - polymer-core-rails - Versions diffs - 0.2.0 → 0.2.5 - Mend

polymer-core-rails 0.2.0 → 0.2.5

Files changed (840) hide show

data/app/assets/components/core-animated-pages/demos/nested-animated-pages.html DELETED Viewed

@@ -1,113 +0,0 @@
-<!--
-    @license
-    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-    Code distributed by Google as part of the polymer project is also
-    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<link href="../../core-icons/core-icons.html" rel="import">
-<link href="../../core-icon-button/core-icon-button.html" rel="import">
-<link href="../core-animated-pages.html" rel="import">
-<polymer-element name="nested-animated-pages">
-<template>
-  <style>
-    :host {
-      display: block;
-      position: relative;
-    }
-    core-animated-pages {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-    .tall-toolbar {
-      box-sizing: border-box;
-      height: 240px;
-    }
-    .tall-toolbar.colored {
-      fill: #fff;
-      color: #fff;
-    }
-    .tall-toolbar [flex] {
-      font-size: 1.5em;
-    }
-    core-icon-button {
-      margin: 16px;
-    }
-    .body {
-      background-color: #f1f1f1;
-    }
-    .square {
-      position: absolute;
-      width: 150px;
-      height: 150px;
-      left: 16px;
-      top: 175px;
-    }
-  </style>
-  <core-animated-pages id="pages" selected="{{page}}" selectedItem="{{selectedItem}}" transitions="hero-transition" no-transition?="{{noTransition}}">
-    <section id="page1" cross-fade>
-      <div class="tall-toolbar colored" style="background-color:orange;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}">
-        <div layout horizontal center>
-          <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
-          <div flex>One</div>
-          <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
-        </div>
-        <div flex></div>
-      </div>
-      <div flex class="body"></div>
-    </section>
-    <section layout vertical id="page2" cross-fade>
-      <div class="tall-toolbar" layout vertical>
-        <div layout horizontal center>
-          <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
-          <div flex>Two</div>
-          <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
-        </div>
-        <div flex></div>
-      </div>
-      <div flex class="body"></div>
-      <div class="square" style="background-color:orange;" hero-id="thing" hero?="{{page === 1 || !noTransition}}"></div>
-    </section>
-  </core-animated-pages>
-</template>
-<script>
-  Polymer({
-    publish: {
-      page: {value: 0}
-    },
-    selectedItem: null,
-    noTransition: true,
-    back: function() {
-      this.noTransition = true;
-      this.fire('nested-back');
-    },
-    transition: function() {
-      this.noTransition = false;
-      this.page = this.page === 0 ? 1 : 0;
-    }
-  });
-</script>
-</polymer-element>

data/app/assets/components/core-animated-pages/demos/nested.html DELETED Viewed

@@ -1,112 +0,0 @@
-<!--
-    @license
-    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-    Code distributed by Google as part of the polymer project is also
-    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<!doctype html>
-<html>
-<head>
-  <title>core-animated-pages</title>
-  <script src="../../platform/platform.js"></script>
-  <link href="nested-animated-pages.html" rel="import">
-  <style>
-    body {
-      font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-      margin: 0;
-      background: #f1f1f1;
-    }
-    nested-demo {
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    }
-  </style>
-</head>
-<body>
-  <polymer-element name="nested-demo">
-  <template>
-    <style>
-      core-animated-pages {
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-      }
-      section {
-        text-align: center;
-        padding-top: 250px;
-      }
-      .square {
-        display: inline-block;
-        margin: 8px;
-        padding: 8px;
-        width: 200px;
-        height: 200px;
-        background-color: orange;
-        color: #fff;
-      }
-    </style>
-    <core-animated-pages selected="{{page}}" transitions="hero-transition cross-fade">
-      <section on-tap="{{transition}}" layout horizontal center-justified>
-        <div class="square" id="thing1" hero-id="thing" hero?="{{subpage === 0}}" cross-fade?="{{subpage !== 0}}">thing 1</div>
-        <div class="square" id="thing2" hero-id="thing" hero?="{{subpage === 1}}" cross-fade?="{{subpage !== 1}}">thing 2</div>
-      </section>
-      <nested-animated-pages page="{{subpage}}" on-nested-back="{{back}}"></nested-animated-pages>
-    </core-animated-pages>
-  </template>
-  <script>
-    Polymer('nested-demo', {
-      page: 0,
-      subpage: 0,
-      transition: function(e) {
-        var el = e.target;
-        if (el.id === "thing1") {
-          this.subpage = 0;
-        } else {
-          this.subpage = 1;
-        }
-        setTimeout(function() {
-          this.page = 1;
-        }.bind(this), 200);
-      },
-      back: function() {
-        this.page = 0;
-      }
-    });
-  </script>
-  </polymer-element>
-  <nested-demo></nested-demo>
-</body>
-</html>

data/app/assets/components/core-animated-pages/demos/news.html DELETED Viewed

@@ -1,255 +0,0 @@
-<!--
-    @license
-    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-    Code distributed by Google as part of the polymer project is also
-    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<!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>
-            </div>
-          </div>
-        </shadow-div>
-        <div class="tiles-container" layout horizontal justified>
-          <shadow-div class="tile"></shadow-div>
-          <shadow-div class="tile"></shadow-div>
-          <shadow-div class="tile"></shadow-div>
-          <shadow-div class="tile"></shadow-div>
-        </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>
-      </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>
-            </div>
-          </div>
-        </shadow-div>
-        <div class="tiles-container" layout horizontal justified>
-          <shadow-div class="tile"></shadow-div>
-          <shadow-div class="tile"></shadow-div>
-          <shadow-div class="tile"></shadow-div>
-          <shadow-div class="tile"></shadow-div>
-        </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>