docs: Fix many links and other issues. (#9360)

There are a few places in the docs that point to `/something/somewhere` which works on localhost, but fails on the live site because the live site adds `/latest` or `/HEAD` to the URL. - Update: Absolute links to be relative. - Update: Material Design links to use new url (material.goole.com) to avoid redirects (and potentially broken links in the future). Additionally, fix a few bugs with some of our doc-specific code. - Fix: Null pointer exception when sidenav is closed (i.e. on mobile). - Fix: `<hljs>` code snippets removed useful whitespace. Additionally, update the Getting Started page with formatting/styling improvements and new links. - Update: Formatting/styling/extra tags. - New: Add new links for Material Start. - Fix: Link titles all say `Link opens in a new window`. Finally, fix various typos/formatting issues including (but not limited to): - Update: Notes should look the same across pages. - Fix: Incorrect markdown support in panel docs. - Update: Add `<hljs>` snippet formatting to panel docs. - New: Add description to `$mdAriaProvider.disableWarnings()` method. This was mainly because it visually looked odd not to have one. Fixes #9352. Related to #9357.
angular · Aug 23, 2016 · 3cf220a · 3cf220a
1 parent fce551d
commit 3cf220a
Show file tree

Hide file tree

Showing 18 changed files with 183 additions and 115 deletions.
diff --git a/docs/app/js/app.js b/docs/app/js/app.js
@@ -514,7 +514,7 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES, $location, $rootScope, $http, $wind
 
                 // If we are open and the user has not scrolled the content div; scroll the active
                 // list item into view.
-                if (open && $li && $ul[0].scrollTop === 0) {
+                if (open && $li && $li.offsetParent && $ul[0].scrollTop === 0) {
                   $timeout(function() {
                     var activeHeight = $li.scrollHeight;
                     var activeOffset = $li.offsetTop;

diff --git a/docs/app/js/highlight-angular.js b/docs/app/js/highlight-angular.js
@@ -35,14 +35,12 @@ angular.module('docsApp')
         });
 
         function render(contents, parent) {
-
           var codeElement = parent.find('code');
-          var lines = contents.split('\n');
 
-          // Remove empty lines
-          lines = lines.filter(function(line) {
-            return line.trim().length;
-          });
+          // Strip excessive newlines and the leading/trailing newline (otherwise the whitespace
+          // calculations below are not correct).
+          var strippedContents = contents.replace(/\n{2,}/g, '\n\n').replace(/^\n/, '').replace(/\n$/, '');
+          var lines = strippedContents.split('\n');
 
           // Make it so each line starts at 0 whitespace
           var firstLineWhitespace = lines[0].match(/^\s*/)[0];
@@ -63,5 +61,4 @@ angular.module('docsApp')
       };
     }
   };
-}])
-;
+}]);
diff --git a/docs/app/partials/getting-started.tmpl.html b/docs/app/partials/getting-started.tmpl.html
@@ -1,87 +1,123 @@
 <div ng-controller="GuideCtrl" class="doc-content">
   <md-content>
-    <p><em>New to Angular? Before getting into Angular Material, it might be helpful to:</em>
+    <p><em>New to Angular? Before getting into Angular Material, it might be helpful to:</em></p>
+
     <ul>
-      <li>watch the videos about <a href="https://egghead.io/articles/new-to-angularjs-start-learning-here" target="_blank"
-               title="Link opens in a new window">Angular.js framework</a></li>
+      <li>
+        watch the videos about <a
+          href="https://egghead.io/articles/new-to-angularjs-start-learning-here" target="_blank"
+          title="AngularJS Framework">Angular.js framework</a></li>
       <li>
         read the
-          <a href="https://www.google.com/design/spec/material-design/introduction.html" target="_blank"
-                 title="Link opens in a new window">Material Design </a> specifications for components, animations, styles, and layouts.
+        <a href="https://material.google.com/" target="_blank"
+           title="Material Design">Material Design </a> specifications for components,
+        animations, styles, and layouts.
       </li>
     </ul>
 
-    <p></p>
     <h2>How do I start with Angular Material?</h2>
     <ul style="margin-bottom: 2em;">
-      <li>Visit the <a href="http://codepen.io/team/AngularMaterial/"
-             target="_blank"
-             title="Link opens in a new window">CodePen Community for Angular Material</a></li>
+      <li>
+        Visit the <a href="http://codepen.io/team/AngularMaterial/" target="_blank"
+                       title="Codepen Material Community">CodePen Community for Angular Material</a>
+      </li>
+
+      <li>
+        <a href="https://github.com/angular/material-start/tree/es6-tutorial" target="_blank"
+             title="Material-Start Tutorial">Learn with Material-Start: 10-step Tutorial (es6)</a>
+      </li>
 
-      <li><a href="https://github.com/angular/material-start/tree/es5-tutorial" target="_blank"
-                   title="Link opens in a new window">Learn with Material-Start: 8-step Tutorial (es5)</a></li>
-      <li><a href="https://github.com/angular/material-start/tree/master" target="_blank"
-                         title="Link opens in a new window">Learn with Material-Start: Completed (es5)</a></li>
-      <li><a href="https://github.com/angular/material-start/tree/es6" target="_blank"
-                               title="Link opens in a new window">Learn with Material-Start: Completed (es6)</a></li>
-      <li style="font-weight: 400;color: #106CC8;"><a href="http://codepen.io/team/AngularMaterial/pen/RrbXyW" target="_blank">Start with a blank CodePen Material Application</a></li>
-      <li style="margin-bottom: 30px;"><a href="https://github.com/angular/material-start" target="_blank"
-             title="Link opens in a new window">Use the Github Starter Project</a></li>
+      <li>
+        <a href="https://github.com/angular/material-start/tree/es6" target="_blank"
+             title="Material Start - ES6">Learn with Material-Start: Completed (es6)</a>
+      </li>
 
-      <li style="font-weight: 400;color: #106CC8;">Use 'Edit on CodePen' button on any of our Demos<br/>
-        <img src="https://cloud.githubusercontent.com/assets/210413/11568997/ed86795a-99b4-11e5-898e-1da172be80da.png" style="width:75%;margin: 10px 30px 0 0">
+      <li>
+        <a href="https://github.com/angular/material-start/tree/typescript" target="_blank"
+           title="Material Start - Typescript">Learn with Material-Start: Completed (Typescript)</a>
       </li>
 
+      <li>
+        <a href="https://github.com/angular/material-start/tree/master" target="_blank"
+           title="Material-Start - ES5">Learn with Material-Start: Completed (es5)</a>
+      </li>
+
+      <li>
+        <a href="http://codepen.io/team/AngularMaterial/pen/RrbXyW" target="_blank">Start with a
+        blank CodePen Material Application</a>
+      </li>
+
+      <li style="margin-bottom: 30px;">
+        <a href="https://github.com/angular/material-start" target="_blank"
+           title="GitHub Starter Project">Use the Github Starter Project</a>
+      </li>
+
+      <li>Use the "Edit on CodePen" button on any of our Demos<br/>
+        <img
+            src="https://cloud.githubusercontent.com/assets/210413/11568997/ed86795a-99b4-11e5-898e-1da172be80da.png"
+            style="width:75%;margin: 10px 30px 0 0">
+      </li>
 
     </ul>
 
-    <p></p>
     <h3>Build a Material Application (blank shell)</h3>
 
-    See this example application on CodePen that loads
-    the Angular Material library from the Google CDN:
-
-    <p></p>
+    <p>
+      See this example application on CodePen that loads
+      the Angular Material library from the Google CDN:
+    </p>
 
     <iframe height='777' scrolling='no'
             src='//codepen.io/team/AngularMaterial/embed/RrbXyW/?height=777&theme-id=21180&default-tab=html'
-            frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a
-        href='http://codepen.io/team/AngularMaterial/pen/RrbXyW/'>Angular Material - Blank Starter</a> by Angular
+            frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
+      See the Pen <a
+        href='http://codepen.io/team/AngularMaterial/pen/RrbXyW/'>Angular Material - Blank
+      Starter</a> by Angular
       Material (<a href='http://codepen.io/AngularMaterial'>@AngularMaterial</a>) on <a
-          href='http://codepen.io'>CodePen</a>.
+        href='http://codepen.io'>CodePen</a>.
     </iframe>
 
 
-    <p>Now just your add your Angular Material components and other HTML content to your Blank starter app.</p>
+    <p>
+      Now just your add your Angular Material components and other HTML content to your Blank
+      starter app.
+    </p>
 
     <br/>
 
-        <hr>
+    <hr>
 
-        <h3>Our CodePen Community</h3>
+    <h3>Our CodePen Community</h3>
     <p>
-      You can also visit our <a href="http://codepen.io/team/AngularMaterial/" target="_blank"
-                     title="Link opens in a new window">CodePen Community</a> to explore more samples and ideas.
+      You can also visit our
+      <a href="http://codepen.io/team/AngularMaterial/" target="_blank"
+         title="Codepen Community">CodePen Community</a> to explore more samples and ideas.
     </p>
-      <div layout-align="center" style="width: 100%">
-      <a href="http://codepen.io/collection/XExqGz/" target="_blank"
-                     title="Link opens in a new window" style="text-decoration:none; border: 0 none;">
-      <img  src="https://cloud.githubusercontent.com/assets/210413/11613879/544f0b1e-9bf6-11e5-9923-27dd0d891bfd.png" style="text-decoration:none; border: 0 none;width: 100%">
+    <div layout-align="center" style="width: 100%">
+      <a href="http://codepen.io/collection/XExqGz/" target="_blank" title="Codepen Community"
+         style="text-decoration:none; border: 0 none;">
+        <img
+            src="https://cloud.githubusercontent.com/assets/210413/11613879/544f0b1e-9bf6-11e5-9923-27dd0d891bfd.png"
+            style="text-decoration:none; border: 0 none;width: 100%">
       </a>
-      </div>
+    </div>
 
 
     <br/><br/>
     <hr>
 
     <h3>Installing the Angular Material Libraries</h3>
 
-    <br/>
-    You can install the Angular Material library (and its dependent libraries) in your local project using either
-    <a href="https://github.com/angular/bower-material/#installing-angular-material">NPM, JSPM, or Bower</a>.
+    <p>
+      You can install the Angular Material library (and its dependent libraries) in your local
+      project using either
+      <a href="https://github.com/angular/bower-material/#installing-angular-material"
+         target="_blank">NPM, JSPM, or Bower</a>.
+    </p>
 
     <p>
-      Angular Material also integrates with some additional, optional libraries which you may elect to include:
+      Angular Material also integrates with some additional, optional libraries which you may elect
+      to include:
     </p>
 
     <ul style="margin-bottom: 2em;">
@@ -91,7 +127,8 @@ <h3>Installing the Angular Material Libraries</h3>
       </li>
       <li>
         <a href="https://docs.angularjs.org/api/ngSanitize">ngSanitize</a>
-        - The ngSanitize module provides functionality to sanitize HTML content in Material components.
+        - The ngSanitize module provides functionality to sanitize HTML content in Material
+        components.
       </li>
 
       <li>
@@ -110,7 +147,8 @@ <h3>Unsupported Integrations</h3>
     <ul style="margin-bottom: 2em;">
       <li>
         <a href="https://docs.angularjs.org/api/ngTouch">ngTouch</a>
-        - ngMaterial conflicts with ngTouch for click, tap, and swipe support on touch-enabled devices.
+        - ngMaterial conflicts with ngTouch for click, tap, and swipe support on touch-enabled
+        devices.
       </li>
 
       <li>
@@ -123,26 +161,30 @@ <h3>Unsupported Integrations</h3>
     <br/>
     <h2>Contributing to Angular Material</h2>
     <ul style="margin-bottom: 2em;">
-      <li>Please read our <a href="https://github.com/angular/material#contributing">contributor guidelines</a>.</li>
-      <li>To contribute, fork our GitHub <a href="https://github.com/angular/material">repository</a>.</li>
-      <li>For problems,
-          <a href="https://github.com/angular/material/issues?q=is%3Aissue+is%3Aopen" target="_blank">
-              search the GitHub Issues
-          </a> and/or
-          <a href="https://github.com/angular/material/issues/new" target="_blank">
-              create a New Issue
-          </a>.
+      <li>
+        Please read our <a href="https://github.com/angular/material#contributing">contributor
+        guidelines</a>.
       </li>
+
+      <li>
+        To contribute, fork our GitHub <a href="https://github.com/angular/material">repository</a>.
+      </li>
+
+      <li>
+        For problems,
+        <a href="https://github.com/angular/material/issues?q=is%3Aissue+is%3Aopen"
+           target="_blank">search the GitHub Issues</a> and/or
+        <a href="https://github.com/angular/material/issues/new"
+           target="_blank">create a New Issue</a>.
+      </li>
+
       <li>For questions,
-          <a href="https://groups.google.com/forum/#!forum/ngmaterial" target="_blank">
-              search the Forum
-          </a> and/or post a new question.
+        <a href="https://groups.google.com/forum/#!forum/ngmaterial"
+           target="_blank">search the Forum</a> and/or post a new question.
       </li>
+
       <li>
-        Join the
-        <a href="https://gitter.im/angular/material" target="_blank">
-          Gitter Chat
-        </a>
+        Join the <a href="https://gitter.im/angular/material" target="_blank">Gitter Chat</a>.
       </li>
     </ul>
   </md-content>

diff --git a/docs/content/CSS/typography.md b/docs/content/CSS/typography.md
@@ -5,7 +5,9 @@
 Angular Material provides typography CSS classes you can use to create visual
 consistency across your application.
 
-[Reference the Material Design specification for Typography.](http://www.google.com/design/spec/style/typography.html)
+<p style="text-align: center;">
+  [Material Design Typography Specification](https://material.google.com/style/typography.html)
+</p>
 
 <section class="demo-container">
   <md-toolbar class="demo-toolbar">
@@ -15,26 +17,29 @@ consistency across your application.
   </md-toolbar>
   <div class="md-whiteframe-z1 docs-list">
     <p>
-      Angular Material is always using the [Roboto](https://www.google.com/fonts#UsePlace:use/Collection:Roboto)
-      font for its components.
+      Angular Material uses the [Roboto](https://fonts.google.com/?selection.family=Roboto)
+      font for all of its components.
     </p>
 
     <p>
-      The `Roboto` font will be <b>not</b> automatically loaded by Angular Material itself. The developer is responsible for loading all fonts used in their application. Shown below is a sample <i>link</i> markup used to load the `Roboto` font from a CDN.
+      The `Roboto` font will be <b>not</b> automatically loaded by Angular Material itself. The
+      developer is responsible for loading all fonts used in their application. Shown below is a
+      sample <i>link</i> markup used to load the `Roboto` font from a CDN.
     </p>
 
     <hljs lang="html">
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
     </hljs>
 
+    <h4 class="md-title">Notes</h4>
     <p>
-      <h4 class="md-title">Notes</h4>
-      When `Roboto` isn't loaded, then the typography will fallback to the following fonts:
-      <p>
-        - `Helvetica Neue`<br/>
-        - `sans-serif`
-      </p>
+      When `Roboto` isn't loaded, then the typography will fallback to the following fonts: 
     </p>
+
+    <ul>
+      <li>- `Helvetica Neue`</li>
+      <li>- `sans-serif`</li>
+    </ul>
   </div>
 </section>
 

diff --git a/src/components/autocomplete/js/autocompleteDirective.js b/src/components/autocomplete/js/autocompleteDirective.js
@@ -35,10 +35,10 @@ angular
  * There is an example below of how this should look.
  *
  * ### Notes
- * The `md-autocomplete` uses the the [VirtualRepeat](/api/directive/mdVirtualRepeatContainer)
+ * The `md-autocomplete` uses the the [VirtualRepeat](api/directive/mdVirtualRepeatContainer)
  * directive for displaying the results inside of the dropdown.<br/>
  * > When encountering issues regarding the item template please take a look at the
- *   [VirtualRepeatContainer](/api/directive/mdVirtualRepeatContainer) documentation.
+ *   [VirtualRepeatContainer](api/directive/mdVirtualRepeatContainer) documentation.
  *
  *
  * @param {expression} md-items An expression in the format of `item in items` to iterate over

diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -48,10 +48,11 @@ function MdAnchorDirective($mdTheming) {
  * @description
  * `<md-button>` is a button directive with optional ink ripples (default enabled).
  *
- * If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it will
- * become a `<button>` element. As per the [Material Design specifications](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
- * the FAB button background is filled with the accent color [by default]. The primary color palette may be used with
- * the `md-primary` class.
+ * If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it
+ * will become a `<button>` element. As per the
+ * [Material Design specifications](https://material.google.com/style/color.html#color-color-palette)
+ * the FAB button background is filled with the accent color [by default]. The primary color palette
+ * may be used with the `md-primary` class.
  *
  * Developers can also change the color palette of the button, by using the following classes
  * - `md-primary`

diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
@@ -16,7 +16,7 @@ angular
  * @description
  * The checkbox directive is used like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D).
  *
- * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
+ * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-color-schemes)
  * the checkbox is in the accent color by default. The primary color palette may be used with
  * the `md-primary` class.
  *

diff --git a/src/components/colors/demoBasicUsage/index.html b/src/components/colors/demoBasicUsage/index.html
@@ -1,9 +1,9 @@
 <div layout="column" ng-cloak class="md-padding">
   <p style="margin-bottom: 10px;">
-    Custom components implementations using Material elements often want to easily apply Theme colors
-    to their custom components.Consider the custom components <code>&lt;user-card&gt;</code> below
+    Custom component implementations using Material elements often want to easily apply Theme colors
+    to their custom components. Consider the custom <code>&lt;user-card&gt;</code> component below
     where the <code>md-colors</code> attribute is used to color the background and text colors
-    using the either the current or specified Theme palette colors.
+    using either the current or specified Theme palette colors.
   </p>
   <!-- Example 1 -->
   <span class="card-title"> <code>&lt;user-card&gt;</code> without md-color features</span>

diff --git a/src/components/colors/demoThemePicker/script.js b/src/components/colors/demoThemePicker/script.js
@@ -3,7 +3,7 @@ angular
   .controller('ThemeDemoCtrl', function ($scope, $mdColorPalette) {
     $scope.colors = Object.keys($mdColorPalette); 
 
-    $scope.mdURL = 'https://www.google.com/design/spec/style/color.html#color-color-palette';
+    $scope.mdURL = 'https://material.google.com/style/color.html#color-color-palette';
     $scope.primary = 'purple';
     $scope.accent = 'green';
 

diff --git a/src/components/datepicker/js/dateLocaleProvider.js b/src/components/datepicker/js/dateLocaleProvider.js
@@ -34,7 +34,7 @@
    *
    * @usage
    * <hljs lang="js">
-   *   myAppModule.config(function($mdDateLocaleProvider) {
+   * myAppModule.config(function($mdDateLocaleProvider) {
    *
    *     // Example of a French localization.
    *     $mdDateLocaleProvider.months = ['janvier', 'février', 'mars', ...];
@@ -72,12 +72,10 @@
    *
    *     $mdDateLocaleProvider.msgCalendar = 'Calendrier';
    *     $mdDateLocaleProvider.msgOpenCalendar = 'Ouvrir le calendrier';
-   *
    * });
    * </hljs>
    *
    */
-
   angular.module('material.components.datepicker').config(function($provide) {
     // TODO(jelbourn): Assert provided values are correctly formatted. Need assertions.