Merge pull request #12 from Polymer/tutorial-updates

Arthur Evans · Arthur Evans · commit 5d7f0f2b8cf3 · 2014-07-08T14:58:19.000-07:00
Tutorial updates
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "components"
+}
diff --git a/finished/index.html b/finished/index.html
@@ -29,8 +29,9 @@
     background: #03a9f4;
     color: white;
   }
-  paper-tabs {
+  #tabs {
     width: 100%;
+    margin: 0;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -41,7 +42,7 @@
     margin: 50px auto;
   }
   @media (min-width: 481px) {
-    paper-tabs {
+    #tabs {
       width: 200px;
     }
     .container {
@@ -54,7 +55,7 @@
 <body unresolved touch-action="auto">
   <core-header-panel>
     <core-toolbar>
-      <paper-tabs selected="all" valueattr="name" self-end>
+      <paper-tabs id="tabs" selected="all" valueattr="name" self-end>
         <paper-tab name="all">ALL</paper-tab>
         <paper-tab name="favorites">FAVORITES</paper-tab>
       </paper-tabs>
diff --git a/finished/post-card.html b/finished/post-card.html
@@ -45,8 +45,7 @@
     <core-icon-button
       id="favicon"
       icon="favorite"
-      on-tap="{{favoriteTapped}}">
-    </core-icon-button>
+      on-tap="{{favoriteTapped}}"></core-icon-button>
     <content></content>
   </template>
   <script>
diff --git a/starter/index.html b/starter/index.html
@@ -13,28 +13,12 @@
     background-color: #E5E5E5;
     font-family: 'RobotoDraft', sans-serif;
   }
-  core-header-panel {
-    height: 100%;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch; 
-  }
-  core-toolbar {
-    background: #03a9f4;
-    color: white;
-  }
-  paper-tabs {
-    width: 100%;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
   .container {
     width: 80%;
     margin: 50px auto;
   }
   @media (min-width: 481px) {
-    paper-tabs {
+    #tabs {
       width: 200px;
     }
     .container {
diff --git a/step-1/index.html b/step-1/index.html
@@ -28,8 +28,9 @@
     background: #03a9f4;
     color: white;
   }
-  paper-tabs {
+  #tabs {
     width: 100%;
+    margin: 0;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -40,7 +41,7 @@
     margin: 50px auto;
   }
   @media (min-width: 481px) {
-    paper-tabs {
+    #tabs {
       width: 200px;
     }
     .container {
@@ -53,7 +54,7 @@
 <body unresolved touch-action="auto">
   <core-header-panel>
     <core-toolbar>
-      <paper-tabs selected="all" valueattr="name" self-end>
+      <paper-tabs id="tabs" selected="all" valueattr="name" self-end>
         <paper-tab name="all">ALL</paper-tab>
         <paper-tab name="favorites">FAVORITES</paper-tab>
       </paper-tabs>
@@ -65,7 +66,8 @@
   
   <script>
     var tabs = document.querySelector('paper-tabs');
-    tabs.addEventListener('core-select', function() {
+    tabs.addEventListener('core-select', function(e) {
+      console.log("tab change: " + e.target.getAttribute('name') +" selected = " + e.detail.isSelected);
       console.log("Selected: " + tabs.selected);
     });
   </script>
diff --git a/step-2/index.html b/step-2/index.html
@@ -29,8 +29,9 @@
     background: #03a9f4;
     color: white;
   }
-  paper-tabs {
+  #tabs {
     width: 100%;
+    margin: 0;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -41,7 +42,7 @@
     margin: 50px auto;
   }
   @media (min-width: 481px) {
-    paper-tabs {
+    #tabs {
       width: 200px;
     }
     .container {
@@ -54,7 +55,7 @@
 <body unresolved touch-action="auto">
   <core-header-panel>
     <core-toolbar>
-      <paper-tabs selected="all" valueattr="name" self-end>
+      <paper-tabs id="tabs" selected="all" valueattr="name" self-end>
         <paper-tab name="all">ALL</paper-tab>
         <paper-tab name="favorites">FAVORITES</paper-tab>
       </paper-tabs>
@@ -64,7 +65,7 @@
       <post-card>
         <img src="../images/avatar-07.svg" width="70" height="70">
         <h2>Another Developer</h2>
-        <h3>I'm composing with shadow DOM!</h3>
+        <p>I'm composing with shadow DOM!</p>
       </post-card>
     </div>
   </core-header-panel>
diff --git a/step-3/index.html b/step-3/index.html
@@ -29,8 +29,9 @@
     background: #03a9f4;
     color: white;
   }
-  paper-tabs {
+  #tabs {
     width: 100%;
+    margin: 0;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -41,7 +42,7 @@
     margin: 50px auto;
   }
   @media (min-width: 481px) {
-    paper-tabs {
+    #tabs {
       width: 200px;
     }
     .container {
@@ -54,7 +55,7 @@
 <body unresolved touch-action="auto">
   <core-header-panel>
     <core-toolbar>
-      <paper-tabs selected="all" valueattr="name" self-end>
+      <paper-tabs id="tabs" selected="all" valueattr="name" self-end>
         <paper-tab name="all">ALL</paper-tab>
         <paper-tab name="favorites">FAVORITES</paper-tab>
       </paper-tabs>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "directory": "components"`
	`3`	`+}`