From 066cc766032ce5f84a3adc82e2e8b154704e8c1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Thu, 2 Jul 2015 18:33:08 +0100 Subject: [PATCH] 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 | 32 ++++++++++++--------- docs/_assets/components.js | 37 +++++++++++++++--------- docs/_pages/components.md | 3 -- docs/_templates/components.html | 50 ++++++++++++++------------------- src/index/README.md | 15 ---------- 5 files changed, 63 insertions(+), 74 deletions(-) delete mode 100755 src/index/README.md diff --git a/docs/_assets/components.css b/docs/_assets/components.css index 1e355199..39fe0275 100644 --- a/docs/_assets/components.css +++ b/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; diff --git a/docs/_assets/components.js b/docs/_assets/components.js index d17b290c..4cd2045a 100644 --- a/docs/_assets/components.js +++ b/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); } }; }; diff --git a/docs/_pages/components.md b/docs/_pages/components.md index faf0f3bf..b6fc254b 100644 --- a/docs/_pages/components.md +++ b/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. diff --git a/docs/_templates/components.html b/docs/_templates/components.html index 5d93b1eb..4376f6fa 100644 --- a/docs/_templates/components.html +++ b/docs/_templates/components.html @@ -16,23 +16,30 @@   {{ category.title }} - {% if loop.first %} - - {%- endif %} {%- endfor %}
+
+
+
+
+
COMPONENTS
+
+ 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 + Material Design Introduction + you should do so before attempting to use the components. +
+
+
+
+
+
+ {% for category in page.categories -%}
@@ -81,23 +88,8 @@ {% include doc ignore missing %}
{%- endfor %} -
- {% if loop.first %} - - {%- endif %} {%- endfor %}
diff --git a/src/index/README.md b/src/index/README.md deleted file mode 100755 index ce91d530..00000000 --- a/src/index/README.md +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
COMPONENTS
-
-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 -Material Design Introduction -you should do so before attempting to use the components. -
-
-