feat(aio): api pages styling

- Banner class code consolidation for API pages
- Set up temporary table of contents class and file
- API pages title styling
- Add color styling to doc-type listed on each API details page
- Classes and SCSS variables refactor
- Mobile optimization on headers, info-banner, and API pages
- API page table custom styling
- API Class Overview template code overview into table format

aio/src/app/app.component.html

@@ -28,6 +28,7 @@
 
 </md-sidenav-container>
 
+
 <aio-search-results #searchResults></aio-search-results>
 
 

aio/src/app/embedded/api/api-list.component.html

@@ -1,4 +1,4 @@
-<div class="l-flex-wrap banner is-plain l-content-small api-filter">
+<div class="l-flex-wrap info-banner api-filter">
 
   <div class="form-select-menu">
     <button class="form-select-button has-symbol" (click)="toggleTypeMenu()">

aio/src/styles/0-base/_typography.scss

@@ -58,6 +58,17 @@
       margin: 8px 0px;
     }
 
+    h1, h2 {
+      @media screen and (max-width: 600px) {
+        margin: 16px 0;
+      }
+    }
+
+    h3, h4, h5, h6 {
+      @media screen and (max-width: 600px) {
+        margin: 8px 0;
+      }
+    }
 
     .mat-tab-body-wrapper h2 {
       margin-top: 0;

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

@@ -4,4 +4,48 @@
     pre {
         white-space: pre-line;
     }
+
+    table.api-table {
+        min-width: 680px;
+        
+        tbody {
+            pre {
+                white-space: normal;
+                margin: 4px;
+                padding: 4px 16px;
+            }
+
+            td, th {
+                padding: 0;
+            }
+        }
+
+    }
+}
+
+.api-type-label {
+    border-radius: 4px;
+    padding: 4px 16px;
+    background-color: $accentblue;
+    display: inline;
+    margin: 0 16px;
+
+    @each $name, $symbol in $api-symbols {
+        &.#{$name} {
+            background: map-get($symbol, background);
+        }
+    }
+
+    @media screen and (max-width: 600px) {
+        display: block;
+        margin: 8px 0;
+    }
+
+    label {
+        font-size: 14px;
+        color: white;
+        font-weight: 500;
+        text-transform: uppercase;
+    }
+
 }

aio/src/styles/1-layouts/_layouts-dir.scss

@@ -11,3 +11,4 @@
 @import 'layout-global';
 @import 'not-found';
 @import 'api-page';
+@import 'table-of-contents';

aio/src/styles/1-layouts/_table-of-contents.scss

@@ -0,0 +1,10 @@
+nav#main-table-of-contents {
+    width: 200px;
+    height: 900px;
+    position: fixed;
+    right: 0;
+    top: 50px;
+    bottom: 100px;
+    margin-left: 32px;
+    background-color: $blue;
+}

aio/src/styles/2-modules/_api-info-bar.scss

@@ -1,5 +1,13 @@
-.info-bar {
+.api-info-bar {
-    padding: 32px;
+    max-width: 800px;
-    border-radius: 4px;
+    text-align: center;
-    background-color: rgba($blue, 0.1);
+
+    span {
+        margin: 0 16px;
+
+        @media screen and (max-width: 600px) {
+            display: block;
+        }
+
+    }
 }

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

@@ -1,8 +1,11 @@
 /* API EDIT ICON */
 #api {
-  .info-bar .material-icons {
+  .info-banner .material-icons {
-    top: 24px;
     right: 48px;
+
+    @media screen and (max-width: 600px) {
+        left: 50px;
+    }
   }
 }
 
@@ -18,11 +21,6 @@ aio-api-list {
         width: 182px;
     }
 
-    .api-filter.banner {
-        border: 1px solid rgba($lightgray, 0.5);
-        border-radius: 4px;
-    }
-
     .api-list-container {
       display: flex;
       flex-direction: column;
@@ -33,8 +31,10 @@ aio-api-list {
 aio-api-list > div {
     display: flex;
     margin: 32px auto;
+    
     @media (max-width: 600px) {
         flex-direction: column;
+        margin: 16px auto;
     }
 
     > div {
@@ -45,32 +45,6 @@ aio-api-list > div {
 $phone-breakpoint: 480px;
 $tablet-breakpoint: 800px;
 
-$layer-1: 1;
-$layer-2: 2;
-$layer-3: 3;
-$layer-4: 4;
-$layer-5: 5;
-
-
-$amber-700: #FFA000;
-$blue-400: #42A5F5;
-$blue-500: #2196F3;
-$blue-600: #1E88E5;
-$blue-800: #1565C0;
-$blue-grey-50: #ECEFF1;
-$blue-grey-100: #CFD8DC;
-$blue-grey-500: #607D8B;
-$blue-grey-600: #546E7A;
-$green-500: #4CAF50;
-$green-800: #2E7D32;
-$light-green-600: #7CB342;
-$pink-600: #D81B60;
-$purple-600: #8E24AA;
-$teal-500: #009688;
-
-$lightgrey: #F5F6F7;
-
-
 /* LAYOUT */
 
 .docs-content {
@@ -219,51 +193,6 @@ $form-select-width: 200px;
 
 /* API SYMBOLS */
 
-/* VARIABLES */
-
-$api-symbols: (
-  all: (
-    content: ' ',
-    background: $white
-  ),
-  decorator: (
-    content: '@',
-    background: $blue-800
-  ),
-  directive: (
-    content: 'D',
-    background: $pink-600
-  ),
-  pipe: (
-    content: 'P',
-    background: $blue-grey-600
-  ),
-  class: (
-    content: 'C',
-    background: $blue-500
-  ),
-  interface: (
-    content: 'I',
-    background: $teal-500
-  ),
-  function: (
-    content: 'F',
-    background: $green-500
-  ),
-  enum: (
-    content: 'E',
-    background: $amber-700
-  ),
-  const: (
-    content: 'K',
-    background: $purple-600
-  ),
-  type-alias: (
-    content: 'T',
-    background: $light-green-600
-  )
-);
-
 /* SYMBOL CLASS */
 
 .symbol {
@@ -278,6 +207,7 @@ $api-symbols: (
   width: 16px;
 
   // SYMBOL TYPES
+  // Symbol mapping variables in *constants*
   @each $name, $symbol in $api-symbols {
     &.#{$name} {
       background: map-get($symbol, background);
@@ -311,6 +241,10 @@ $api-symbols: (
   padding: 0;
   overflow: hidden;
 
+  @media screen and (max-width: 600px) {
+        margin: 0;
+    }
+
   li {
     font-size: 14px;
     margin: 0 0 16px 0;
@@ -396,16 +330,6 @@ p {
   margin-bottom: $unit;
 }
 
-.hr-margin {
-  display: block;
-  height: 1px;
-  border: 0;
-  border-top: 1px solid $lightgrey;
-  margin-top: 15px;
-  margin-bottom: 20px;
-  padding: 0;
-}
-
 .no-bg {
   background: none;
   padding: 0;

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

@@ -1,25 +1,19 @@
-/* Banner */
+/* BANNER */
 
-.banner {
+.info-banner {
     justify-content: center;
     background: $white;
+    border: 1px solid rgba($lightgray, 0.5);
+    border-radius: 4px;
     box-sizing: border-box;
-    font-size: 18px;
-    font-weight: 200;
     padding: 16px;
-    min-height: 97px;
-
-
-    @media (max-width: 480px) {
-        padding: 16px;
-    }
-
-    &.is-plain {
     background: $white;
     height: auto;
     overflow: visible;
-    }
 
+    @media screen and (max-width: 600px) {
+        text-align: center;
+    }
 
     p, .text-body {
         color: $darkgray;

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

@@ -114,19 +114,6 @@ aio-code.headed-code {
   transform: none;
 }
 
-$blue-grey-50: #ECEFF1;
-$blue-grey-100: #CFD8DC;
-$blue-grey-200: #B0BEC5;
-$blue-grey-300: #90A4AE;
-$blue-grey-400: #78909C;
-$blue-grey-500: #607D8B;
-$blue-grey-600: #546E7A;
-$blue-grey-700: #455A64;
-$blue-grey-800: #37474F;
-$blue-grey-900: #263238;
-
-$white: #FFFFFF;
-
 /* SCREEN COLORS */
 
   .pnk,

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

@@ -8,7 +8,6 @@ hr {
     display: block;
     height: 1px;
     border: 0;
-    border-top: 1px solid $lightgray;
     margin-top: 16px;
     margin-bottom: 16px;
     padding: 0;

aio/src/styles/_constants.scss

@@ -5,6 +5,13 @@ $unit: 8px;
 $main-font: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
 $code-font: "Droid Sans Mono", monospace;
 
+// Z-LAYER
+$layer-1: 1;
+$layer-2: 2;
+$layer-3: 3;
+$layer-4: 4;
+$layer-5: 5;
+
 // COLOR PALETTE
 $blue: #1976D2;
 $accentblue: #1E88E5;
@@ -18,11 +25,78 @@ $mist: #ECEFF1;
 $mediumgray: #7E7E7E;
 $darkgray: #333;
 $black: #0A1014;
-$codegreen: #17ff0b;
-$green-800: #2E7D32;
 $orange: #FF9800;
 $anti-pattern: $brightred;
 
+// API & CODE COLORS
+$amber-700: #FFA000;
+$blue-400: #42A5F5;
+$blue-500: #2196F3;
+$blue-600: #1E88E5;
+$blue-800: #1565C0;
+$blue-grey-50: #ECEFF1;
+$blue-grey-100: #CFD8DC;
+$blue-grey-200: #B0BEC5;
+$blue-grey-300: #90A4AE;
+$blue-grey-400: #78909C;
+$blue-grey-500: #607D8B;
+$blue-grey-600: #546E7A;
+$blue-grey-700: #455A64;
+$blue-grey-800: #37474F;
+$blue-grey-900: #263238;
+$codegreen: #17ff0b;
+$green-500: #4CAF50;
+$green-800: #2E7D32;
+$light-green-600: #7CB342;
+$pink-600: #D81B60;
+$purple-600: #8E24AA;
+$teal-500: #009688;
+$lightgrey: #F5F6F7;
+
 // GRADIENTS
 $bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);
 $redgradient: linear-gradient(145deg,$darkred,$brightred);
+
+// API LABEL COLOR AND SYMBOLS MAP
+$api-symbols: (
+  all: (
+    content: ' ',
+    background: $white
+  ),
+  decorator: (
+    content: '@',
+    background: $blue-800
+  ),
+  directive: (
+    content: 'D',
+    background: $pink-600
+  ),
+  pipe: (
+    content: 'P',
+    background: $blue-grey-600
+  ),
+  class: (
+    content: 'C',
+    background: $blue-500
+  ),
+  interface: (
+    content: 'I',
+    background: $teal-500
+  ),
+  function: (
+    content: 'F',
+    background: $green-500
+  ),
+  enum: (
+    content: 'E',
+    background: $amber-700
+  ),
+  const: (
+    content: 'K',
+    background: $purple-600
+  ),
+  type-alias: (
+    content: 'T',
+    background: $light-green-600
+  )
+);

aio/tools/transforms/templates/includes/_class-overview.html

@@ -1,40 +1,76 @@
 <section class="class-overview api-section">
-  <h2>Class Overview</h2>
+  <h2>Properties and Methods</h2>
   <div class="api-doc-code">
 
-    <code class="no-bg openParens">class {$ doc.name $} {</code>
+  <table class="api-table">
+      <thead>
+      <tr>
+        <th>{$ doc.name $} Properties</th>
+        <th></th>
+      </tr>
+      </thead>
+      <tbody>
         
+      <!-- STATISTICS -->
       {% if doc.statics.length %}
-    <div class="statics">
+        {% for member in doc.statics %}{% if not member.internal %}>
-      {% for member in doc.statics %}{% if not member.internal %}
+          <tr class="statics">
-        <pre class="prettyprint no-bg-with-indent"><code>static
+            <th>
-          <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
+              <pre>
+                <code><a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name $}</a></code>
+              </pre>
+            </th>
+            <td>
+              <pre class="prettyprint">
+                <code>
                   {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
-        </code></pre>
+                </code>
+              </pre>
+            </td>
+          </tr>
         {% endif %}{% endfor %}
-    </div>
       {% endif %}
 
-
+      <!-- CONSTRUCTOR -->
       {% if doc.constructorDoc.name %}
-    <div class="constructor">
+        <tr class="constructor">
-      <pre class="prettyprint no-bg-with-indent"><code>
+          <th>
-        <a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a>
+            <pre class="prettyprint">
-          {$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+              <code><a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a></code>
-      </code></pre>
+            </pre>
-    </div>
+          </th>
+          <td>
+            <pre>
+              <code>{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}</code>
+            </pre>
+          </td>
+        </tr>
       {% endif %}
 
+      <!-- MEMBERS -->
       {% if doc.members.length %}
-    <div class="members">
         {% for member in doc.members %}{% if not member.internal %}
-        <pre class="prettyprint no-bg-with-indent"><code>
+          <tr class="members">
+            <th>
+              <pre class="prettyprint">
+                <code>
                   <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
+                </code>
+              </pre>
+            </th>
+            <td>
+              <pre>
+                <code>
                   {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
-        </code></pre>
+                </code>
+              </pre>
+            </td>
+          </tr>
         {% endif %}{% endfor %}
     {% endif %}
+    </tbody>
+    </table>
 
-    <code class="endParens api-doc-code no-bg">}</code>
   </div>
+
 </section>

aio/tools/transforms/templates/includes/_description.html

@@ -1,4 +1,4 @@
-<div class="api-section">
+<div class="description api-section">
   <h2 class="text-display-1" id="api-description">Description<a href="#api-description" class="header-link"><i class="material-icons">link</i></a></h2>
   {%- if doc.description.length > 2 %}
   {$ doc.description | trimBlankLines | marked $}

aio/tools/transforms/templates/includes/_info-bar.html

@@ -1,16 +1,16 @@
 {% import "lib/githubLinks.html" as github -%}
 
 <!-- INFO BAR -->
-<div class="info-bar">
+<div class="info-banner api-info-bar">
-  <span class="info-bar-item is-left">
+  <span class="info-bar-item">
     npm package: <a href="#">{$ doc.package $}</a>
   </span>
 
-  <span class="info-bar-item is-left">
+  <span class="info-bar-item">
     NgModule: <a href="#">{$ doc.moduleDoc.name $}</a>
   </span>
 
-  <span class="info-bar-item is-right">
+  <span class="info-bar-item">
     {$ github.githubViewLink(doc, versionInfo) $}
   </span>
 </div>

aio/tools/transforms/templates/includes/_members.html

@@ -1,4 +1,6 @@
-{% if doc.members.length %}
+<!-- **** This is being duplicated - already in class overview content **** -->
+
+<!--{% if doc.members.length %}
 <div class="instance-members api-section">
   <h2>Class Details</h2>
   {% for member in doc.members %}{% if not member.internal %}
@@ -14,4 +16,4 @@
   {% if not loop.last %}<hr class="hr-margin">{% endif %}
   {% endif %}{% endfor %}
 </div>
-{% endif %}
+{% endif %}-->

aio/tools/transforms/templates/includes/_title.html

@@ -1,6 +1,8 @@
 <!-- PAGE HERO -->
 <header class="api-header">
   <h1>{$ doc.name $}</h1>
-  <h2>{$ doc.docType $}</h2>
+  <div class="api-type-label {$ doc.docType $}">
+    <label>{$ doc.docType $}</label>
+  </div>
   <span class="version">{$ angular.version $}</span>
 </header>