Permalink
Browse files

Update homepage paper components

  • Loading branch information...
1 parent 453de5b commit 7dca6f71488e1c82b461d8eeaada198bea575f89 @passy passy committed with samccone Oct 25, 2015
Showing with 20 additions and 24 deletions.
  1. +16 −16 index.html
  2. +4 −8 site-assets/main.js
View
@@ -15,7 +15,7 @@
<meta property="og:image" content="https://raw.github.com/tastejs/todomvc/gh-pages/site-assets/screenshot.png">
<meta property="og:description" content="Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more">
<link rel="shortcut icon" href="site-assets/favicon.ico">
- <script src="bower_components/platform/platform.js"></script>
+ <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- build:remove -->
<script src="bower_components/prefixfree/prefixfree.min.js"></script>
<!-- endbuild -->
@@ -53,29 +53,29 @@
</div>
<div class="col-md-8">
<h2>Examples</h2>
- <style shim-shadowdom>
+ <style is="custom-style">
+ paper-tabs {
+ --paper-tabs-selection-bar-color: #b12d2b;
+ }
+
+ paper-tab {
+ --paper-tab-ink: #b12d2b;
+ }
+
paper-tabs, core-toolbar {
color: rgb(53, 53, 53);
background-color: #f4f4f4;
font-family: 'Helvetica Neue', Helvetica, Arial;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}
-
- paper-tabs::shadow #selectionBar {
- background-color: #b12d2b;
- }
-
- paper-tab::shadow paper-ripple#ink {
- color: #b12d2b;
- }
</style>
- <paper-tabs selected="js" class="js-app-tabs">
- <paper-tab name="js">JavaScript</paper-tab>
- <paper-tab name="ctojs">Compile-to-JS</paper-tab>
- <paper-tab name="labs">Labs</paper-tab>
+ <paper-tabs selected="{{selectedTab}}" class="js-app-tabs">
+ <paper-tab data-target="js">JavaScript</paper-tab>
+ <paper-tab data-target="ctojs">Compile-to-JS</paper-tab>
+ <paper-tab data-target="labs">Labs</paper-tab>
</paper-tabs>
- <div class="app-lists">
+ <iron-pages selected="{{selectedTab}}" class="app-lists">
<div class="js-app-list" data-app-list="js">
<p class="applist-intro">
These are examples written in pure JavaScript.
@@ -296,7 +296,7 @@
</ul>
</div>
- </div>
+ </iron-pages>
<ul class="legend">
<li><span class="label">R</span> = App also demonstrates routing</li>
</ul>
View
@@ -175,9 +175,10 @@
}]);
function AppTabs() {
- document.querySelector(AppTabs.selectors.tabs).addEventListener(
- 'core-select', this.onSelect.bind(this));
+ var tabs = document.querySelector(AppTabs.selectors.tabs);
+ tabs.addEventListener('iron-select', this.onSelect.bind(this));
this.listHeight = 0;
+ tabs.select(0);
}
AppTabs.selectors = {
@@ -187,14 +188,9 @@
};
AppTabs.prototype.onSelect = function (e) {
- var selected = e.target.selected;
+ var selected = e.currentTarget.selectedItem.dataset.target;
[].slice.call(document.querySelectorAll(AppTabs.selectors.list)).forEach(
function (el) {
- if (!e.detail.isSelected) {
- // Don't handle unselection events.
- return;
- }
-
var isSelected = el.dataset.appList === selected;
el.style.display = isSelected ? 'block' : 'none';
if (isSelected) {

0 comments on commit 7dca6f7

Please sign in to comment.