Address comments, fix display issue on Safari.

frunjik · Jun 19, 2014 · 1aa9198 · 1aa9198
1 parent 3c0b398
commit 1aa9198
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 27 deletions.
diff --git a/_includes/samples/layout-elements/drawer-app.html b/_includes/samples/layout-elements/drawer-app.html
@@ -1,4 +1,3 @@
-
 <demo-tabs selected="0">
   <demo-tab heading="HTML">
 {% highlight html %}

diff --git a/_includes/samples/layout-elements/header-app.html b/_includes/samples/layout-elements/header-app.html
@@ -1,7 +1,3 @@
-<!-- <link rel="import" href="/samples/layout-elements/coreheader.html"> -->
-
-<!-- <link rel="import" href="/elements/demo-tabs.html"> -->
-
 <demo-tabs selected="0">
   <demo-tab heading="HTML">
 {% highlight html %}

diff --git a/_includes/samples/layout-elements/scaffold-app.html b/_includes/samples/layout-elements/scaffold-app.html
@@ -1,7 +1,3 @@
-<!-- <link rel="import" href="/samples/layout-elements/coreheader.html"> -->
-
-<!-- <link rel="import" href="/elements/demo-tabs.html"> -->
-
 <demo-tabs selected="0">
   <demo-tab heading="HTML">
 {% highlight html %}

diff --git a/_includes/samples/layout-elements/toolbar-sample.html b/_includes/samples/layout-elements/toolbar-sample.html
@@ -1,4 +1,3 @@
-
 <demo-tabs selected="0">
   <demo-tab heading="HTML">
 {% highlight html %}

diff --git a/docs/polymer/layout-elements.md b/docs/polymer/layout-elements.md
@@ -7,7 +7,7 @@ title: Layout elements
 subtitle: Guide
 ---
 
-<style>
+<style shim-shadowdom>
 .app-demo {
   border: 1px solid #eee;
   position: absolute;
@@ -92,7 +92,7 @@ Taller toolbars are useful when you want to create an app bar with tabs, for exa
 
 If the core-header-panel is in `waterfall-tall` mode, it controls the height of the toolbar automatically, so you shouldn't set `medium-tall` or `tall` on the toolbar yourself.
 
-**Tip:** For fancy scrolling effects where the toolbar animates between tall and condensed states, you can use [`<core-scroll-header-panel>`](doc link). See  the [demos](http://localhost:8080/components/core-scroll-header-panel/demo.html) here. You may need to look at the source for the demos to implement the more complicated effects.
+**Tip:** For fancy scrolling effects where the toolbar animates between tall and condensed states, you can use [`<core-scroll-header-panel>`](doc link). See  the [demos](/components/core-scroll-header-panel/demo.html) here. You may need to look at the source for the demos to implement the more complicated effects.
 {: .alert .alert-info }
 
 

diff --git a/samples/layout-elements/drawer-app.html b/samples/layout-elements/drawer-app.html
@@ -20,7 +20,7 @@
 <link rel="import" 
   href="/components/paper-icon-button/paper-icon-button.html">
 <!-- [END imports] -->
-<style>
+<style shim-shadowdom>
   /* [START styles] */
   body {
     font-family: sans-serif;
@@ -69,8 +69,7 @@
     <core-header-panel main>
       <core-toolbar id="mainheader">
         <paper-icon-button 
-          id="navicon" icon="menu">
-        </paper-icon-button>
+          id="navicon" icon="menu"></paper-icon-button>
         <span flex>Title</span>
       </core-toolbar>
       <div class="content">

diff --git a/samples/layout-elements/header-app.html b/samples/layout-elements/header-app.html
@@ -21,8 +21,9 @@
 }
 core-header-panel {
   background: white;
-  height: 100%;
-  width: 100%;
+  /* height: 100% fails here on some browsers */
+  height: 100vh;
+  width: 100vw;
 }
 core-toolbar {
   background-color: #03A9F4;
@@ -44,12 +45,10 @@
   <core-header-panel>
     <core-toolbar id="mainheader">
       <paper-icon-button id="navicon" 
-        icon="arrow-back">
-      </paper-icon-button>
+        icon="arrow-back"></paper-icon-button>
       <span flex>Title</span>
       <paper-icon-button id="searchbutton" 
-        icon="search" >
-      </paper-icon-button>
+        icon="search"></paper-icon-button>
     </core-toolbar>
     <p>Sample content.</p>
     <p>Sample content.</p>

diff --git a/samples/layout-elements/scaffold-app.html b/samples/layout-elements/scaffold-app.html
@@ -18,7 +18,7 @@
 <link rel="import" 
   href="/components/core-scaffold/core-scaffold.html">
 <!-- [END imports] -->
-<style>
+<style shim-shadowdom>
   /* [START styles] */
   body {
     font-family: sans-serif;

diff --git a/samples/layout-elements/toolbar-sample.html b/samples/layout-elements/toolbar-sample.html
@@ -25,8 +25,9 @@
 core-toolbar {
   background-color: #03A9F4;
 }
-paper-icon-button::shadow #clip {
+paper-icon-button {
   width: 40px;
+  height: 40px;
 }
 /* [END styles] */
 </style>
@@ -35,12 +36,10 @@
   <!-- [START html] -->
   <core-toolbar class="medium-tall"> 
     <paper-icon-button id="navicon" 
-      icon="menu">
-    </paper-icon-button>
+      icon="menu"></paper-icon-button>
     <span flex>Title</span>
     <paper-icon-button id="morebutton" 
-      icon="more-vert">
-    </paper-icon-button>
+      icon="more-vert"></paper-icon-button>
     <paper-tabs class="bottom fit">
       <paper-tab>ONE</paper-tab>
       <paper-tab>TWO</paper-tab>