docs(class overview): list instance and static members with in-page hyperlinks. Also link constructor when present. Focus member on click. Badges look better in viewports of 600px or less

Author: Eric Jimenez

public/_includes/_hero.jade

@@ -8,7 +8,7 @@ if current.path[4] && current.path[3] == 'api'
   - var textFormat = 'is-standard-case'
 
 header(class="hero background-sky")
-  span(class="hero-title-with-badges" layout="row" layout-align="start center")
+  span(class="hero-title-with-badges" layout="row" layout-xs="column" layout-align="start center" layout-align-xs="start start")
     h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
     if useBadges
       span(class="badges")

public/resources/css/base/_type.scss

@@ -110,9 +110,7 @@ p code {
     opacity: 0.87;
   }
   h2 {
-    font-size: 15px;
-    text-transform: uppercase;
-    color: #78909C;
+    font-size: 20px;
   }
   h3 {
     font-size: 16px;

public/resources/css/module/_api.scss

@@ -76,6 +76,32 @@ input.api-filter {
 }
 
 .docs-content {
+  .anchor-offset {
+    display: block;
+    position: relative;
+    top: -250px;
+    visibility: hidden;
+  }
+
+  .anchor-focused {
+    background-color: transparent !important;
+
+    -moz-animation: fade 1s linear; /* Firefox */
+    -webkit-animation: fade 1s linear; /* Safari and Chrome */
+    -o-animation: fade 1s linear; /* Opera */
+    animation: fade 1s linear;
+  }
+
+  @keyframes fade {
+    0% { background-color: $sunshine }
+  }
+
+  .h2-api-docs {
+    font-size: 15px !important;
+    text-transform: uppercase !important;
+    color: #78909C !important;
+  }
+
   .api-list {
     list-style: none;
     padding: 0 0 ($unit * 4);
@@ -113,7 +139,7 @@ input.api-filter {
     color: #1a2326;
 
     &.selector {
-      margin: 0 0 8px 0;
+      margin: 0;
     }
 
     &.location-badge {
@@ -155,6 +181,32 @@ input.api-filter {
     padding: 0;
   }
 
+  .no-bg-with-indent {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: 16px;
+    margin-top: 6px;
+    margin-bottom: 0;
+    background: none;
+  }
+
+  .code-background {
+    padding: 0 5px 0;
+
+    span.pln {
+      color: #1E88E5 !important;
+    }
+  }
+
+  .code-anchor {
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   code {
     font-size: 14px;
     color: #1a2326;

public/resources/css/module/_hero.scss

@@ -37,7 +37,7 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
     padding-top: 40px;
 
     .badges {
-      margin-top: 48px;
+      margin-top: $unit * 6;
     }
   }
 
@@ -65,6 +65,21 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
       border-radius: 2px;
       line-height: 20px;
       display: inline-block;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  @media screen and (max-width: 599px) {
+    .badges {
+      margin-top: $unit;
+      padding-left: 0;
+    }
+
+    .hero-title-with-badges {
+      margin-bottom: $unit * 2;
     }
   }
 

public/resources/js/controllers/app-controller.js

@@ -34,6 +34,13 @@ angularIO.controller('AppCtrl', ['$mdDialog', '$timeout', '$http', '$sce', funct
     userfeedback.api.startFeedback(configuration);
   };
 
+  // URL hash keeps track of which method the user wants to view in the API doc.
+  // Refer to _api.scss (.anchor-focused) and class.template.html (where ng-class is used) for details.
+  vm.isApiDocMemberFocused = function(memberName) {
+    var apiDocFocusedMember = window.location.hash.replace('#!#', '').replace('-anchor', '');
+    return apiDocFocusedMember === memberName;
+  };
+
   /*
    * Prettify Code
    *

tools/api-builder/angular.io-package/templates/class.template.html

@@ -7,7 +7,7 @@
 
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 What it does
+    h2(class="h2-api-docs") What it does
   div(flex="80" flex-xs="100")
     :marked
     {%- if doc.whatItDoes %}
@@ -18,7 +18,7 @@
 
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 How to use
+    h2(class="h2-api-docs") How to use
   div(flex="80" flex-xs="100")
     :marked
     {%- if doc.howToUse %}
@@ -27,12 +27,46 @@
       *Not yet documented*
     {% endif %}
 
+.div(class="row-margin" layout="row" layout-xs="column")
+  div(flex="20" flex-xs="100")
+    h2(class="h2-api-docs") Class Overview
+  div(flex="80" flex-xs="100")
+    code.no-bg class {$ doc.name $} {
+
+    {% if doc.statics.length %}
+    .div(layout="column")
+      {% for member in doc.statics %}{% if not member.internal %}
+        pre(class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }")
+          a(class="code-anchor" href="#{$ member.name $}-anchor")
+            code(class="code-background") {$ member.name | indent(6, false) | trim $}
+          code {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
+      {% endif %}{% endfor %}
+    {% endif %}
+    {% if doc.constructorDoc.name %}
+    .div(layout="column")
+      pre(class="prettyprint no-bg-with-indent")
+        a(class="code-anchor" href="#constructor")
+          code(class="code-background") {$ doc.constructorDoc.name $}
+        code {$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+    {% endif %}
+    {% if doc.members.length %}
+    .div(layout="column")
+      {% for member in doc.members %}{% if not member.internal %}
+        pre(class="prettyprint no-bg-with-indent")
+          a(class="code-anchor" href="#{$ member.name $}-anchor")
+            code(class="code-background") {$ member.name | indent(6, false) | trim $}
+          code {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
+      {% endif %}{% endfor %}
+    {% endif %}
+    p.selector
+      code.no-bg }
+
 {% block additional %}
 {% endblock %}
 
 .div(class="row-margin" layout="row" layout-xs="column")
   div(flex="20" flex-xs="100")
-    h2 Class Description
+    h2(class="h2-api-docs") Class Description
   div(class="class-description-content" flex="80" flex-xs="100")
     :marked
     {%- if doc.description.length > 2 %}
@@ -43,7 +77,7 @@
 
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Class Export
+    h2(class="h2-api-docs") Class Export
   div(flex="80" flex-xs="100")
     pre.prettyprint.no-bg
       code.no-pln.
@@ -53,7 +87,7 @@
 {% block annotations %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Annotations
+    h2(class="h2-api-docs") Annotations
   div(flex="80" flex-xs="100")
     {%- for decorator in doc.decorators %}
       pre.prettyprint.no-bg
@@ -72,9 +106,10 @@
 {%- if doc.constructorDoc and not doc.constructorDoc.internal %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Constructor
+    h2(class="h2-api-docs") Constructor
   div(flex="80" flex-xs="100")
-    pre.prettyprint.no-bg
+    a(name="constructor" class="anchor-offset")
+    pre(class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }")
       code.
         {$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
     :marked
@@ -88,7 +123,7 @@
 {% if doc.statics.length %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Static Members
+    h2(class="h2-api-docs") Static Members
   div(flex="80" flex-xs="100")
   {% for member in doc.statics %}{% if not member.internal %}
     pre.prettyprint.no-bg
@@ -111,10 +146,11 @@
 {% if doc.members.length %}
 .div(layout="row" layout-xs="column" class="instance-members" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Instance Members
+    h2(class="h2-api-docs") Class Details
   div(flex="80" flex-xs="100")
     {% for member in doc.members %}{% if not member.internal %}
-    pre.prettyprint.no-bg
+    a(name="{$ member.name $}-anchor" class="anchor-offset")
+    pre(class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }")
       code.
         {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
 

tools/api-builder/angular.io-package/templates/directive.template.html

@@ -10,7 +10,7 @@
 {%- if doc.directiveOptions.selector.split(',').length %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Selectors
+    h2(class="h2-api-docs") Selectors
   div(flex="80" flex-xs="100")
     {% for selector in doc.directiveOptions.selector.split(',') %}
     p.selector
@@ -21,7 +21,7 @@
 {% if doc.outputs %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Outputs
+    h2(class="h2-api-docs") Outputs
   div(flex="80" flex-xs="100")
   {% for binding, property in doc.outputs %}
     div(class="code-margin")
@@ -36,7 +36,7 @@
 {% if doc.inputs %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Inputs
+    h2(class="h2-api-docs") Inputs
   div(flex="80" flex-xs="100")
     {% for binding, property in doc.inputs %}
     div(class="code-margin")
@@ -51,7 +51,7 @@
 {%- if doc.directiveOptions.exportAs %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Exported as
+    h2(class="h2-api-docs") Exported as
   div(flex="80" flex-xs="100")
     p.input
       code {$ doc.directiveOptions.exportAs $}

tools/api-builder/angular.io-package/templates/var.template.html

@@ -7,7 +7,7 @@
 
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Variable Export
+    h2(class="h2-api-docs") Variable Export
   div(flex="80" flex-xs="100")
     pre.prettyprint.no-bg
       code.