Adding some sanity to components page

- Removing phantom index component
- Removing phantom index nav entry
- Moving index content to components page
- Reworking image to work better across screen sizes and browsers (Closes #624)

docs/_assets/components.css

@@ -2,10 +2,26 @@
   display: flex;
 }
 
+.mdl-components-index {
+  box-sizing: border-box;
+  position: relative;
+  padding-top: 64px;
+}
+
+.mdl-components-index-text {
+  max-width: 600px;
+}
+
 .mdl-components-img {
-  max-width: 100%;
-  height: auto;
-  width: auto; /* for ie9 */
+  position: absolute;
+  margin-top: 24px;
+  margin-left: auto;
+  margin-right: auto;
+  left: 5%;
+  height: 90%;
+  width: 90%;
+  max-height: 600px;
+  background: url('../assets/compindex_2x.png') no-repeat top center / contain;
 }
 
 .mdl-components-text {
@@ -30,16 +46,6 @@ mdl-components-dd {
   padding: 0 0 0.5em 0;
 }
 
-.mdl-components__nav .mdl-components__link:first-of-type {
-  /* The first component category is a virtual category used to display
-   * the index page of component categories. As such, we hide navigation
-   * of the index category using CSS display:none. Navigation is not
-   * needed because we display the index page by default when accessing
-   * the components tab.
-   */
-  display: none;
-}
-
 .mdl-components .mdl-components__nav {
   display: inline-block;
   background: #fff;

docs/_assets/components.js

@@ -20,7 +20,6 @@ function MaterialComponentsNav() {
   this.element_ = document.querySelector('.mdl-js-components');
   if (this.element_) {
     this.componentLinks = this.element_.querySelectorAll('.mdl-components__link');
-
     this.activeLink = null;
     this.activePage = null;
 
@@ -53,9 +52,6 @@ MaterialComponentsNav.prototype.CssClasses_ = {
 MaterialComponentsNav.prototype.init = function() {
   'use strict';
 
-  this.activeLink = this.componentLinks[0];
-  this.activePage = this.findPage(this.activeLink);
-
   for (var i = 0; i < this.componentLinks.length; i++) {
     this.componentLinks[i].addEventListener('click',
         this.clickHandler(this.componentLinks[i]));
@@ -86,10 +82,25 @@ MaterialComponentsNav.prototype.displaySectionForFragment = function(fragment) {
   if (fragment && this.linksMap_[fragment] && this.linksMap_[fragment].click) {
     this.linksMap_[fragment].click();
   } else if (!fragment || fragment === '' || fragment === '#') {
-    document.getElementsByClassName('mdl-components__link')[0].click();
+    this.displayIndexPage();
   }
 };
 
+/**
+ * Displays the index page for the components.
+ */
+MaterialComponentsNav.prototype.displayIndexPage = function() {
+  if (this.activeLink) {
+    this.activeLink.classList.remove(this.CssClasses_.ACTIVE);
+  }
+  this.activeLink = null;
+  if (this.activePage) {
+    this.activePage.classList.remove(this.CssClasses_.ACTIVE);
+  }
+  this.activePage = this.element_.querySelector('#index-section');
+  this.activePage.classList.add(this.CssClasses_.ACTIVE);
+}
+
 /**
  * Returns a clickHandler for a navigation link.
  * @param  {HTMLElement} link the navigation link
@@ -103,8 +114,12 @@ MaterialComponentsNav.prototype.clickHandler = function(link) {
   return function(e) {
     e.preventDefault();
     var page = ctx.findPage(link);
-    ctx.activePage.classList.remove(ctx.CssClasses_.ACTIVE);
-    ctx.activeLink.classList.remove(ctx.CssClasses_.ACTIVE);
+    if (ctx.activePage) {
+      ctx.activePage.classList.remove(ctx.CssClasses_.ACTIVE);
+    }
+    if (ctx.activeLink) {
+      ctx.activeLink.classList.remove(ctx.CssClasses_.ACTIVE);
+    }
 
     ctx.activePage = page;
     ctx.activeLink = link;
@@ -115,13 +130,7 @@ MaterialComponentsNav.prototype.clickHandler = function(link) {
     // Add an history entry and display the hash fragment in the URL.
     var section = window.location.hash.split('/')[0];
     if (section !== '#' + link.href.split('#')[1]) {
-      if (link !== document.getElementsByClassName('mdl-components__link')[0]) {
-        history.pushState(null, 'Material Design Lite', link);
-      } else if (section !== '' && section !== '#' &&
-          ctx.linksMap_[section]) {
-        history.pushState(null, 'Material Design Lite',
-            window.location.pathname + '#');
-      }
+      history.pushState(null, 'Material Design Lite', link);
     }
   };
 };

docs/_pages/components.md

@@ -4,9 +4,6 @@ title: Components
 bodyclass: components
 include_prefix: ../
 categories:
-  - name: index
-    components:
-      - name: index  
   - name: badges
     title: Badges
     description: Small status descriptors for UI elements.

docs/_templates/components.html

@@ -16,23 +16,30 @@
       </div>&nbsp;
       <span class="mdl-components__link-text">{{ category.title }}</span>
     </a>
-    {% if loop.first %}
-      <script>
-        // We're making the first page (the index) visible here via inline JS to:
-        // Have the first page displayed right away without waiting for the whole
-        // page to load (it's a large page).
-        // Only if we're not opening a deep-link (check the Hash is empty).
-        if (!window.location.hash ||
-            window.location.hash === '' ||
-            window.location.hash === '#') {
-          var link = document.getElementsByClassName('mdl-components__link')[0];
-          link.className = link.className + ' is-active';
-        }
-      </script>
-    {%- endif %}
     {%- endfor %}
   </aside>
   <main class="mdl-components__pages">
+    <section id="index-section" class="mdl-components-index mdl-components__page">
+      <div class="mdl-components-index-text mdl-grid">
+        <div class="mdl-components-text docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
+          <dl class="mdl-components-dl">
+            <dt class="mdl-components-dt">COMPONENTS</dt>
+            <dd class="mdl_components-dd">
+        Material Design Lite (MDL) is a library of components for web developers
+        based on Google's Material Design Philosophy: "A visual language for our
+        users that synthesizes the classic principles of good design with the
+        innovation and possibility of technology and science." Understanding the
+        goals and principles of Material Design is critical to the proper use of
+        the Material Design Lite components. If you have not yet read the
+        <a href="http://www.google.com/design/spec/material-design/introduction.html">Material Design Introduction</a>
+        you should do so before attempting to use the components.
+            </dd>
+          </dl>
+        </div>
+      </div>
+      <div class="mdl-components-img"></div>
+    </section>
+
     {% for category in page.categories -%}
     <section id="{{ category.name }}-section" class="mdl-components__page mdl-grid">
       <div class="mdl-cell mdl-cell--12-col">
@@ -81,23 +88,8 @@
             {% include doc ignore missing %}
           </div>
         {%- endfor %}
-        <img class="mdl-components-img" src="{{page.include_prefix}}/assets/compindex_2x.png">
       </div>
     </section>
-    {% if loop.first %}
-    <script>
-      // We're making the first page visible here via inline JS to:
-      // Have the first page displayed right away without waiting for the whole
-      // page to load (it's a large page).
-      // Only if we're not opening a deep-link (check the Hash is empty).
-      if (!window.location.hash ||
-          window.location.hash === '' ||
-          window.location.hash === '#') {
-        var page = document.getElementsByClassName('mdl-components__page')[0];
-        page.className = page.className + ' is-active';
-      }
-    </script>
-    {%- endif %}
     {%- endfor %}
 </main>
 </div>

src/index/README.md

@@ -1,15 +0,0 @@
-<section class="mdl-components-text docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
-  <dl class="mdl-components-dl">
-    <dt class="mdl-components-dt">COMPONENTS</dt>
-    <dd class="mdl_components-dd">
-Material Design Lite (MDL) is a library of components for web developers 
-based on Google's Material Design Philosophy: "A visual language for our 
-users that synthesizes the classic principles of good design with the 
-innovation and possibility of technology and science." Understanding the 
-goals and principles of Material Design is critical to the proper use of 
-the Material Design Lite components. If you have not yet read the 
-<a href="http://www.google.com/design/spec/material-design/introduction.html">Material Design Introduction</a> 
-you should do so before attempting to use the components.
-    </dd>
-  </dl>
-</section>