Page is selected in top app-bar

ScottBeeson · Feb 11, 2014 · 7babcfd · 7babcfd
1 parent 01d386a
commit 7babcfd
Show file tree

Hide file tree

Showing 35 changed files with 71 additions and 25 deletions.
diff --git a/_includes/top-nav.html b/_includes/top-nav.html
@@ -7,9 +7,9 @@
 {% endcapture %}
 
 <app-bar theme="{{theme | trim }}" class="bar">
-  <a href="/getting-started.html" class="paper-button" borderless sink>Start</a>
-  <a href="/docs/polymer/polymer.html" class="paper-button" borderless sink>Docs</a>
-  <a href="/faq.html" class="paper-button" borderless sink>Resources</a>
-  <a href="/discuss.html" class="paper-button" borderless sink>Community</a>
+  <a href="/getting-started.html" class="paper-button {% if page.navgroup == 'start' %}active{% endif %}" borderless sink>Start</a>
+  <a href="/docs/polymer/polymer.html" class="paper-button {% if page.navgroup == 'docs' %}active{% endif %}" borderless sink>Docs</a>
+  <a href="/faq.html" class="paper-button {% if page.navgroup == 'resources' %}active{% endif %}" borderless sink>Resources</a>
+  <a href="/discuss.html" class="paper-button {% if page.navgroup == 'community' %}active{% endif %}" borderless sink>Community</a>
   <!-- <a href="#" class="paper-button" borderless sink>News</a> -->
 </app-bar>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -13,9 +13,6 @@
       <polymer-ui-icon id="dropdown-toggle" size="35" src="/images/picons/ic_arrowDropDown_dark_.png">
       </polymer-ui-icon>
     </polymer-flex-layout>
-
-{{site.data.pagetypes[page.type].menu}}
-{{page.type}}
 
     <polymer-ui-menu id="dropdown-panel">
       <polymer-ui-arrow id="dropdown-arrow" direction="up" size="9">
@@ -45,7 +42,7 @@
   </aside>
   <page-scrim></page-scrim>
   <scroll-area sidebar>
-    <site-banner type="{{page.type}}" shortname="{{page.shortname}}">
+    <site-banner type="{{page.type}}" navgroup="{{page.navgroup}}" shortname="{{page.shortname}}">
       {% include top-nav.html %}
       <header>
         <h1>{{page.title}}</h1>

diff --git a/articles/communication.md b/articles/communication.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: core
+navgroup: docs
 shortname: Articles
 title: "Communication & Message Passing"
 subtitle: Common techniques for sharing information between custom elements

diff --git a/articles/concatenating-web-components.md b/articles/concatenating-web-components.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: core
+navgroup: docs
 shortname: Articles
 title: "Concatenating Web Components with Vulcanize"
 subtitle: Reduce network requests by flattening HTML Imports

diff --git a/articles/index.md b/articles/index.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: core
+navgroup: docs
 shortname: Docs
 title: Articles
 subtitle: Core concepts of build apps on top of Polymer and web components

diff --git a/articles/styling-elements.md b/articles/styling-elements.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: core
+navgroup: docs
 shortname: Articles
 title: A Guide to Styling Elements
 

diff --git a/build/index.md b/build/index.md
@@ -2,6 +2,7 @@
 layout: default
 title: Build status
 type: resources
+navgroup: resources
 shortname: Resources
 
 add_permalinks: false

diff --git a/changelog.md b/changelog.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: resources
+navgroup: resources
 shortname: Resources
 title: Releases
 ---

diff --git a/compatibility.md b/compatibility.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: resources
+navgroup: resources
 shortname: Resources
 title: Browser Compatibility
 ---

diff --git a/css/elements/app-bar.css b/css/elements/app-bar.css
@@ -59,44 +59,48 @@ code, pre { color: #9f499b; }
 /* line 16, ../../sass/elements/app-bar.scss */
 :host([theme="light"]) { color: inherit; }
 
-/* line 20, ../../sass/elements/app-bar.scss */
+/* line 21, ../../sass/elements/app-bar.scss */
+:ancestor(site-banner[navgroup="start"], site-banner[navgroup="resources"], site-banner[navgroup="community"]) ::content .active, :ancestor(site-banner[navgroup="start"], site-banner[navgroup="resources"], site-banner[navgroup="community"]) ::content .paper-button:hover { box-shadow: 0 1px 1px black inset, 0 -1px 1px black inset, 0 2px 0px black inset; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%); background: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%); }
+
+/* @polyfill-unscoped-rule site-banner[navgroup="start"] app-bar .active, site-banner[navgroup="resources"] app-bar .active, site-banner[navgroup="community"] app-bar .active { box-shadow: 0 1px 1px rgba(0, 0, 0, 1) inset, 0 -1px 1px rgba(0, 0, 0, 1) inset, 0 2px 0px rgba(0, 0, 0, 1) inset  !important; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%)  !important; background: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%) !important; }*/
+/* line 35, ../../sass/elements/app-bar.scss */
 :host(.search-on) { left: 0; background: inherit; }
 
-/* line 25, ../../sass/elements/app-bar.scss */
+/* line 40, ../../sass/elements/app-bar.scss */
 :host([theme="dark"].search-on) { border-bottom: 1px solid rgba(0, 0, 0, 0.14902); box-shadow: #cccccc 0px 1px 5px; }
 
-/* line 30, ../../sass/elements/app-bar.scss */
+/* line 45, ../../sass/elements/app-bar.scss */
 :ancestor(site-banner) { right: 0; top: 0; position: absolute; }
 
-/* line 36, ../../sass/elements/app-bar.scss */
+/* line 51, ../../sass/elements/app-bar.scss */
 :host(.fixed) { position: fixed; }
 
-/* line 40, ../../sass/elements/app-bar.scss */
+/* line 55, ../../sass/elements/app-bar.scss */
 polymer-ui-icon { width: 24px !important; height: 24px !important; background-size: 48px !important; opacity: 0.6; }
 
 /* @polyfill :host a */
-/* line 49, ../../sass/elements/app-bar.scss */
+/* line 64, ../../sass/elements/app-bar.scss */
 ::content a { opacity: 0.6; }
 
-/* line 53, ../../sass/elements/app-bar.scss */
+/* line 68, ../../sass/elements/app-bar.scss */
 #search { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; width: 24px; margin-left: 16px; box-sizing: border-box; background-color: inherit; }
-/* line 63, ../../sass/elements/app-bar.scss */
+/* line 78, ../../sass/elements/app-bar.scss */
 #search[show] { width: 100%; height: 100%; position: absolute; left: 0; top: 0; padding: 0 16px; margin-left: 0; }
-/* line 72, ../../sass/elements/app-bar.scss */
+/* line 87, ../../sass/elements/app-bar.scss */
 #search[show] input { padding: 10px; }
 
-/* line 79, ../../sass/elements/app-bar.scss */
+/* line 94, ../../sass/elements/app-bar.scss */
 input { background-color: inherit; border: none; font-size: 20px; outline: none; padding: 0; color: inherit; -webkit-box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; }
 
-/* line 90, ../../sass/elements/app-bar.scss */
+/* line 105, ../../sass/elements/app-bar.scss */
 #menu { display: none; }
 
-@media only screen and (max-width: 800px) { /* line 95, ../../sass/elements/app-bar.scss */
+@media only screen and (max-width: 800px) { /* line 110, ../../sass/elements/app-bar.scss */
   :host { -webkit-box-pack: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; width: 100%; background: initial; }
   /* @polyfill :host a */
-  /* line 102, ../../sass/elements/app-bar.scss */
+  /* line 117, ../../sass/elements/app-bar.scss */
   ::content a { display: none; }
-  /* line 106, ../../sass/elements/app-bar.scss */
+  /* line 121, ../../sass/elements/app-bar.scss */
   polymer-ui-icon { margin: 0; }
-  /* line 110, ../../sass/elements/app-bar.scss */
+  /* line 125, ../../sass/elements/app-bar.scss */
   #menu { display: inline-block; } }
diff --git a/discuss.md b/discuss.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: resources
+navgroup: community
 shortname: Community
 title: Discussion
 ---

diff --git a/docs/elements/index.md b/docs/elements/index.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: elements
+navgroup: docs
 shortname: Elements
 #title: Elements
 

diff --git a/docs/elements/other.md b/docs/elements/other.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: elements
+navgroup: docs
 shortname: Elements
 title: Misc elements
 ---

diff --git a/docs/elements/polymer-elements.md b/docs/elements/polymer-elements.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: elements
+navgroup: docs
 shortname: Elements
 title: Polymer elements
 subtitle: Utility elements that do not render UI

diff --git a/docs/elements/polymer-ui-elements.md b/docs/elements/polymer-ui-elements.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: elements
+navgroup: docs
 shortname: Elements
 title: Polymer UI elements
 subtitle: Basic UI components

diff --git a/docs/polymer/databinding.md b/docs/polymer/databinding.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: core
+navgroup: docs
 shortname: Docs
 title: Data-binding
 ---

diff --git a/docs/polymer/expressions.md b/docs/polymer/expressions.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: core
+navgroup: docs
 shortname: Docs
 title: Expressions
 ---

diff --git a/docs/polymer/filters.md b/docs/polymer/filters.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: core
+navgroup: docs
 shortname: Docs
 title: Filters
 ---

diff --git a/docs/polymer/polymer.md b/docs/polymer/polymer.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: core
+navgroup: docs
 shortname: Docs
 title: API reference
 ---

diff --git a/docs/polymer/runtime-config.md b/docs/polymer/runtime-config.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: core
+navgroup: docs
 shortname: Docs
 title: Runtime configuration
 ---

diff --git a/docs/polymer/styling.md b/docs/polymer/styling.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: core
+navgroup: docs
 shortname: Docs
 title: Styling reference
 ---

diff --git a/elements/site-banner.html b/elements/site-banner.html
@@ -2,7 +2,7 @@
 <!-- <link rel="import" href="../components/polymer-flex-layout/polymer-flex-layout.html"> -->
 <link rel="import" href="../components/polymer-media-query/polymer-media-query.html">
 
-<polymer-element name="site-banner" attributes="type shortname">
+<polymer-element name="site-banner" attributes="shortname">
   <template>
     <link rel="stylesheet" href="../css/elements/site-banner.css">
     <polymer-media-query query="max-width: 581px" queryMatches="{{isPhone}}"></polymer-media-query>
@@ -17,7 +17,7 @@ <h2>{{shortname}}</h2>
   (function() {
     Polymer('site-banner', {
       shortname: '',
-      type: 'default',
+      // type: 'default',
       isPhone: false,
       isPhoneChanged: function() {
         this.parentElement.classList.toggle('mobile', this.isPhone);

diff --git a/faq.md b/faq.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: resources
+navgroup: resources
 shortname: Resources
 title: FAQ
 ---

diff --git a/getting-started.md b/getting-started.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: start
+navgroup: start
 shortname: Start
 title: Getting started
 

diff --git a/getting-the-code.md b/getting-the-code.md
@@ -2,6 +2,7 @@
 layout: default
 type: start
 shortname: Start
+navgroup: start
 title: Getting the code
 ---
 

diff --git a/platform/custom-elements.md b/platform/custom-elements.md
@@ -2,6 +2,7 @@
 layout: default
 title: Custom Elements
 type: platform
+navgroup: docs
 shortname: Platform
 subtitle: polyfill
 

diff --git a/platform/html-imports.md b/platform/html-imports.md
@@ -2,6 +2,7 @@
 layout: default
 title: HTML Imports
 type: platform
+navgroup: docs
 shortname: Platform
 subtitle: polyfill
 

diff --git a/platform/mutation-observers.md b/platform/mutation-observers.md
@@ -2,6 +2,7 @@
 layout: default
 title: Mutation Observers
 type: platform
+navgroup: docs
 shortname: Platform
 subtitle: polyfill
 

diff --git a/platform/node_bind.md b/platform/node_bind.md
@@ -2,6 +2,7 @@
 layout: default
 title: Node.bind()
 type: platform
+navgroup: docs
 shortname: Platform
 subtitle: <a href="http://prollyfill.org/" target="_blank">prollyfill</a>
 

diff --git a/platform/pointer-events.md b/platform/pointer-events.md
@@ -2,6 +2,7 @@
 layout: default
 title: Pointer Events
 type: platform
+navgroup: docs
 shortname: Platform
 subtitle: polyfill
 

diff --git a/platform/shadow-dom.md b/platform/shadow-dom.md
@@ -2,6 +2,7 @@
 layout: default
 title: Shadow DOM
 type: platform
+navgroup: docs
 shortname: Platform
 subtitle: polyfill
 

diff --git a/platform/template.md b/platform/template.md
@@ -2,6 +2,7 @@
 layout: default
 title: Template Binding
 type: platform
+navgroup: docs
 shortname: Platform
 subtitle: <a href="http://prollyfill.org/" target="_blank">prollyfill</a>
 

diff --git a/platform/web-animations.md b/platform/web-animations.md
@@ -2,6 +2,7 @@
 layout: default
 title: Web Animations
 type: platform
+navgroup: docs
 shortname: Platform
 subtitle: polyfill
 

diff --git a/sass/elements/app-bar.scss b/sass/elements/app-bar.scss
@@ -17,6 +17,21 @@
   color: inherit;
 }
 
+:ancestor(site-banner[navgroup="start"], site-banner[navgroup="resources"], site-banner[navgroup="community"]) ::content .active,
+:ancestor(site-banner[navgroup="start"], site-banner[navgroup="resources"], site-banner[navgroup="community"]) ::content .paper-button:hover {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 1) inset, 0 -1px 1px rgba(0, 0, 0, 1) inset, 0 2px 0px rgba(0, 0, 0, 1) inset;
+  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%);
+  background: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%);
+}
+
+/* @polyfill-unscoped-rule site-banner[navgroup="start"] app-bar .active,
+                           site-banner[navgroup="resources"] app-bar .active,
+                           site-banner[navgroup="community"] app-bar .active {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 1) inset, 0 -1px 1px rgba(0, 0, 0, 1) inset, 0 2px 0px rgba(0, 0, 0, 1) inset  !important;
+    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%)  !important;
+    background: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%) !important;
+  }*/
+
 :host(.search-on) {
   left: 0;
   background: inherit;

diff --git a/tooling-strategy.md b/tooling-strategy.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 type: resources
+navgroup: resources
 shortname: Resources
 title: Tools & Testing
 ---