docs(aio): api page cleanup

aio/src/styles/1-layouts/_api-pages.scss

@@ -1,5 +1,4 @@
 .api-body {
-
     max-width: 1200px;
 
     table {
@@ -19,6 +18,12 @@
             vertical-align: middle;
         }
 
+        tbody > tr > td tr td:first-child {
+          @media screen and (max-width: 480px) {
+            background-color: inherit;
+          }
+        }
+
         hr {
             margin: 16px 0;
         }
@@ -42,5 +47,217 @@
         .short-description {
             margin-left: 0;
         }
+
+        &.parameters-table {
+          margin-top: 0;
+          font-size: 14px;
+          box-shadow: none;
+
+          tr {
+            border: 0;
+
+            @media screen and (max-width: 480px) {
+              display: flex;
+              flex-direction: column;
+            }
+
+            td:first-child {
+              font-weight: 600;
+            }
+          }
+
+          td {
+            padding: 8px 8px 8px 0;
+            border: 0;
+            vertical-align: top;
+          }
+
+          td:nth-child(1) {
+            width: 20%;
+          }
+        }
     }
-}
+
+    .class-overview {
+      position: relative;
+
+      code-example {
+          clear: left;
+      }
+    }
+
+    .icon-action-header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .method-table th {
+      display: flex;
+    }
+
+    .method-table, .option-table {
+      th {
+
+        .action-icons {
+          a {
+            color: $mediumgray;
+
+            .material-icons:hover {
+              background: none;
+              color: $blue;
+            }
+          }
+        }
+      }
+
+      h3 {
+        margin: 6px 0;
+        font-weight: bold;
+        clear: left;
+      }
+
+      h4 {
+        font-size: 14px;
+        font-weight: bold;
+        margin-top: 12px;
+      }
+    }
+
+    .api-heading {
+      padding: 5px 0;
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+    .short-description {
+      margin: 6px 0 0 10px;
+    }
+
+    .properties-table {
+      font-size: 14px;
+
+      thead th {
+        &:nth-child(1) {
+          width: 20%;
+        }
+        &:nth-child(2) {
+          width: 20%;
+        }
+      }
+    }
+
+    details.overloads {
+      box-shadow: none;
+
+      .icon-action-header a {
+        display: flex;
+      }
+
+      .detail-contents {
+        padding: 0;
+        border: 1px solid $lightgray;
+        border-radius: 2px;
+        box-shadow: none;
+
+        > *:not(hr) {
+          margin: 16px 24px;
+        }
+      }
+
+      summary {
+        height: inherit;
+        padding: 0 8px 8px;
+
+        h4 {
+          margin: 0;
+        }
+      }
+
+      table {
+        &.is-full-width {
+          width: auto;
+        }
+      }
+  }
+
+    .from-constructor, .read-only-property {
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.5px;
+      font-style: italic;
+      background-color: $lightgray;
+      border-radius: 4px;
+      padding: 4px 6px;
+    }
+}
+
+.breadcrumb-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.github-links {
+  .material-icons {
+    border-radius: 4px;
+    padding: 4px;
+    font-size: 20px;
+    &:hover {
+      background-color: $mist;
+    }
+  }
+}
+
+.api-header {
+  display: flex;
+  align-items: center;
+
+  @media screen and (max-width: 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+// ____________________________________________
+
+/*
+ * General styling to make detail/summary tags look a bit more material
+ * To get the best out of it you should structure your usage like this:
+ *
+ * ```
+ * <details>
+ *   <summary>Some title</summary>
+ *   <div class="details-content">
+ *     Some content
+ *   </div>
+ *  </details>
+ *
+ */
+
+ summary {
+  cursor: pointer;
+  font-size: 16px;
+  position: relative;
+  padding: 16px 24px;
+  color: $black;
+  height: 16px;
+  display: block; // Remove the built in details marker in FF
+
+  &::-webkit-details-marker {
+    display: none; // Remove the built in details marker in webkit
+  }
+}
+
+details {
+  box-shadow: 0 1px 4px 0 rgba($black, 0.37);
+
+  .detail-contents {
+    padding: 16px 24px;
+  }
+
+  &[open] > i.material-icons {
+    @include rotate(180deg); // Rotate the icon
+  }
+}

aio/src/styles/2-modules/_api-pages.scss

@@ -1,114 +0,0 @@
-.github-links {
-  float: right;
-  .material-icons {
-    border-radius: 4px;
-    padding: 4px;
-    font-size: 20px;
-    &:hover {
-      background-color: $mist;
-    }
-  }
-}
-
-.api-header {
-  display: flex;
-  align-items: center;
-
-  @media screen and (max-width: 600px) {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-
-.api-body {
-
-  .class-overview {
-    position: relative;
-
-    code-example {
-        clear: left;
-    }
-  }
-
-  .method-table, .option-table, .list-table {
-    th {
-      display: flex;
-      align-items: center;
-
-      h3 {
-        flex: 1;
-      }
-
-      .github-links {
-        a {
-          color: $mediumgray;
-          .material-icons:hover {
-            background: none;
-            color: $blue;
-          }
-        }
-      }
-    }
-
-    h3 {
-      margin: 6px 0;
-      font-weight: bold;
-      clear: left;
-    }
-
-    h4 {
-      font-size: 14px;
-      font-weight: bold;
-      margin-top: 12px;
-    }
-  }
-
-  .api-heading {
-    padding: 5px 0;
-    font-size: 16px;
-    font-weight: bold;
-  }
-
-  .short-description {
-    margin: 6px 0 0 10px;
-  }
-
-  .properties-table {
-    font-size: 14px;
-
-    thead th {
-      &:nth-child(1) {
-        width: 20%;
-      }
-      &:nth-child(2) {
-        width: 20%;
-      }
-    }
-  }
-
-  .parameters-table {
-    margin-top: 0;
-    font-size: 14px;
-    td:nth-child(1) {
-      width: 20%;
-    }
-  }
-
-  details.overloads {
-    margin-left: -8px;
-
-    summary {
-      height: inherit;
-      padding: 8px 12px;
-      h4 {
-        margin: 0;
-        clear: left;
-      }
-    }
-}
-
-  .from-constructor, .read-only-property {
-    font-style: italic;
-    color: $blue;
-  }
-}

aio/src/styles/2-modules/_details.scss

@@ -1,48 +0,0 @@
-/*
- * General styling to make detail/summary tags look a bit more material
- * To get the best out of it you should structure your usage like this:
- *
- * ```
- * <details>
- *   <summary>Some title</summary>
- *   <div class="details-content">
- *     Some content
- *   </div>
- *  </details>
- *
- */
-
-summary {
-  cursor: pointer;
-  font-size: 16px;
-  position: relative;
-  padding: 16px 24px;
-  color: $black;
-  height: 16px;
-  display: block; // Remove the built in details marker in FF
-
-  &::-webkit-details-marker {
-    display: none; // Remove the built in details marker in webkit
-  }
-
-  &::before {
-    content: '\E5CE'; // See https://material.io/icons/#ic_expand_less
-    font-family: 'Material Icons';
-    font-size: 24px;
-    -webkit-font-smoothing: antialiased;
-    @include rotate(0deg); // We will rotate 180 degrees when details is open
-    float: right;
-  }
-}
-
-details {
-  box-shadow: 0 1px 4px 0 rgba($black, 0.37);
-
-  .detail-contents {
-    padding: 16px 24px;
-  }
-
-  &[open] > summary::before {
-    @include rotate(180deg); // Rotate the icon
-  }
-}

aio/src/styles/2-modules/_hr.scss

@@ -3,12 +3,3 @@ hr {
     background: $lightgray;
     height: 1px;
 }
-
-.hr-margin {
-    display: block;
-    height: 1px;
-    border: 0;
-    margin-top: 16px;
-    margin-bottom: 16px;
-    padding: 0;
-}

aio/src/styles/2-modules/_modules-dir.scss

@@ -3,7 +3,6 @@
    ============================== */
 
    @import 'alert';
-   @import 'api-pages';
    @import 'api-list';
    @import 'buttons';
    @import 'callout';
@@ -11,7 +10,6 @@
    @import 'code';
    @import 'contribute';
    @import 'contributor';
-   @import 'details';
    @import 'edit-page-cta';
    @import 'features';
    @import 'filetree';

aio/tools/transforms/templates/api/base.template.html

@@ -2,19 +2,21 @@
 {% set comma = joiner(',') %}
 {% set slash = joiner('/') %}
 <article>
-  {$ github.githubLinks(doc, versionInfo) $}
+  <div class="breadcrumb-container">
-  <div class="breadcrumb">
+    <div class="breadcrumb">
-    <script type="application/ld+json">
+      <script type="application/ld+json">
-      {
+        {
-        "@context": "http://schema.org",
+          "@context": "http://schema.org",
-        "@type": "BreadcrumbList",
+          "@type": "BreadcrumbList",
-        "itemListElement": [
+          "itemListElement": [
-          {%- for crumb in doc.breadCrumbs %}{$ comma() $}
+            {%- for crumb in doc.breadCrumbs %}{$ comma() $}
-          { "@type": "ListItem", "position": {$ loop.index $}, "item": { "@id": "https://angular.io/{$ crumb.path $}", "name": "{$ crumb.text $}" } }{% endfor %}
+            { "@type": "ListItem", "position": {$ loop.index $}, "item": { "@id": "https://angular.io/{$ crumb.path $}", "name": "{$ crumb.text $}" } }{% endfor %}
-        ]
+          ]
-      }
+        }
-    </script>
+      </script>
-    {% for crumb in doc.breadCrumbs %}{% if not loop.last %} {$ slash() $} {% if crumb.path %}<a href="{$ crumb.path $}">{$ crumb.text $}</a>{% else %}{$ crumb.text $}{% endif %}{% endif %}{% endfor %}
+      {% for crumb in doc.breadCrumbs %}{% if not loop.last %} {$ slash() $} {% if crumb.path %}<a href="{$ crumb.path $}">{$ crumb.text $}</a>{% else %}{$ crumb.text $}{% endif %}{% endif %}{% endfor %}
+    </div>
+    {$ github.githubLinks(doc, versionInfo) $}
   </div>
   <header class="api-header">
     <h1>{$ doc.name $}</h1>

aio/tools/transforms/templates/api/lib/githubLinks.html

@@ -16,4 +16,4 @@ https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInf
   <a href="{$ githubEditHref(doc, versionInfo) $}" aria-label="Suggest Edits" title="Suggest Edits"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a>
   <a href="{$ githubViewHref(doc, versionInfo) $}" aria-label="View Source" title="View Source"><i class="material-icons" aria-hidden="true" role="img">code</i></a>
 </div>
-{%- endmacro -%}
+{%- endmacro -%}

aio/tools/transforms/templates/api/lib/memberHelpers.html

@@ -47,17 +47,17 @@
 
 <code-example language="ts" hideCopy="true" linenums="false" class="no-box api-heading">{$ renderMemberSyntax(overload) $}</code-example>
 
-<h4 class="no-anchor">Parameters</h4>
+<h6 class="no-anchor">Parameters</h6>
 {$ params.renderParameters(overload.parameterDocs, cssClass + '-parameters', cssClass + '-parameter') $}
 
 {% if overload.type or overload.returns.type %}
-<h4 class="no-anchor">Returns</h4>
+<h6 class="no-anchor">Returns</h6>
 {% marked %}`{$ (overload.type or overload.returns.type) $}`{% if overload.returns %}: {$ overload.returns.description $}{% endif %}{% endmarked %}
 {% endif %}
 
 
 {% if overload.throws.length %}
-<h4 class="no-anchor">Throws</h4>
+<h6 class="no-anchor">Throws</h6>
 {% for error in overload.throws %}
 {% marked %}`{$ (error.typeList or 'Error') $}` {$ error.description $}{% endmarked %}
 {% endfor %}
@@ -73,7 +73,7 @@
 {%- macro renderMethodDetail(versionInfo, method, cssClass) -%}
 <a id="{$ method.anchor $}"></a>
 <table class="is-full-width method-table {$ cssClass $}">
-  {% if method.name !== 'constructor' %}<thead><tr><th>
+  {% if method.name !== 'constructor' %}<thead><tr><th class="icon-action-header">
     <h3>
       {% if method.isCallMember %}<i>call signature</i>
       {% elseif method.isNewMember %}<i>construct signature</i>
@@ -106,12 +106,22 @@
     <tr>
       <td>
         <details class="overloads">
-          <summary><h4 class="no-anchor">{$ method.overloads.length $} overloads...</h4></summary>
+          <summary>
+            <div class="icon-action-header">
+                <h4 class="no-anchor">Overloads</h4>
+                <a>Show All <i class="material-icons">expand_more</i></a>
+              </div>
+          </summary>
           <div class="detail-contents">
-              {% for overload in method.overloads %}
+            {% for overload in method.overloads %}
+              <div>
+                <h5 class="icon-action-header no-anchor">
+                  <span>Overload #_ of {$ method.overloads.length $}</span>
+                  <i class="material-icons">expand_more</i></h5>
                 {$ renderOverloadInfo(overload, cssClass + '-overload', method) $}
-                {% if not loop.last %}<hr class="hr-margin fullwidth">{% endif %}
+                {% if not loop.last %}<hr class="hr-margin">{% endif %}
               {% endfor %}
+              </div>
           </div>
         </details>
       </td>
@@ -170,10 +180,10 @@
         <td><a id="{$ property.anchor $}"></a>{$ property.name $}</td>
         {% if hasTypes %}<td><label class="property-type-label"><code>{$ property.type | escape $}</code></label></td>{% endif %}
         <td>
-          {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}<span class='read-only-property'>Read-only.</span>{% endif %}
+          {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}<span class='read-only-property'>Read Only</span>{% endif %}
           {% if property.shortDescription %}{$ property.shortDescription | marked $}{% endif %}
           {$ (property.description or property.constructorParamDoc.description) | marked $}
-          {% if property.constructorParamDoc %} <span class='from-constructor'>Declared in constructor.</span>{% endif %}
+          {% if property.constructorParamDoc %} <span class='from-constructor'>Declared in Constructor</span>{% endif %}
         </td>
     </tr>
     {% endfor %}