fix(docs-api): tables overflow screen width on mobile

- fix docs-api layouts to work down to 360px width
  - fixes Observers, Accessibility, Drag and Drop, Platform, and Overlay layouts
- fix DeprecatedconnectedTo to Deprecated connectedTo display issue
- update footer copyright
- fix exception trying to unsubscribe to undefined routeParamSubscription

Fixes #550

Author: Splaktar

src/app/pages/component-category-list/component-category-list.ts

@@ -38,7 +38,9 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.routeParamSubscription.unsubscribe();
+    if (this.routeParamSubscription) {
+      this.routeParamSubscription.unsubscribe();
+    }
   }
 }
 

src/app/pages/component-sidenav/component-sidenav.service.ts

@@ -3,11 +3,5 @@ import {MatSidenav} from '@angular/material/sidenav';
 
 @Injectable({providedIn : 'root'})
 export class ComponentSidenavService {
-  private _sidenav: MatSidenav;
-
-  constructor() {}
-
-  get sidenav(): MatSidenav { return this._sidenav; }
-
-  set sidenav(value: MatSidenav) { this._sidenav = value; }
+  sidenav: MatSidenav;
 }

src/app/pages/component-viewer/component-api.html

@@ -3,19 +3,17 @@
     API for {{docItem?.id}}
   </span>
 
-  <span>
-    <doc-viewer
-      documentUrl="/docs-content/api-docs/{{docItem?.packageName}}-{{docItem?.id}}.html"
-      class="docs-component-view-text-content docs-component-api"
-      (contentRendered)="updateTableOfContents(docItem!.name, $event)">
-    </doc-viewer>
+  <doc-viewer
+    documentUrl="/docs-content/api-docs/{{docItem?.packageName}}-{{docItem?.id}}.html"
+    class="docs-component-view-text-content docs-component-api"
+    (contentRendered)="updateTableOfContents(docItem!.name, $event)">
+  </doc-viewer>
 
-    <doc-viewer *ngFor="let additionalApiDoc of docItem!.additionalApiDocs"
-      documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
-      class="docs-component-view-text-content docs-component-api"
-      (contentRendered)="updateTableOfContents(additionalApiDoc.name, $event)">
-    </doc-viewer>
-  </span>
+  <doc-viewer *ngFor="let additionalApiDoc of docItem!.additionalApiDocs"
+    documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
+    class="docs-component-view-text-content docs-component-api"
+    (contentRendered)="updateTableOfContents(additionalApiDoc.name, $event)">
+  </doc-viewer>
 
   <table-of-contents #toc
       *ngIf="showToc | async"

src/app/pages/component-viewer/component-api.scss

@@ -11,6 +11,13 @@
   }
 }
 
+.docs-api-type-alias-name,
+.docs-api-class-name {
+  @media (max-width: 399px) {
+    word-break: break-word;
+  }
+}
+
 .docs-api-h3 {
   font-weight: 300;
   font-size: 24px;

src/app/shared/footer/footer.html

@@ -18,7 +18,7 @@
 
     <div class="docs-footer-copyright">
       <div>
-        <span>Powered by Google ©2010-2019.</span>
+        <span>Powered by Google ©2010-2020.</span>
         <a href="https://github.com/angular/components/blob/master/LICENSE">Code licensed under an MIT-style License.</a>
         <span>Documentation licensed under CC BY 4.0.</span>
       </div>

src/styles/_api.scss

@@ -1,5 +1,9 @@
 // Styles for API docs generated via dgeni from material2 source JsDocs.
 
+.docs-api {
+  max-width: 100%;
+}
+
 // Top header, e.g., "API documentation for dialog".
 .docs-api-h2 {
   font-size: 30px;
@@ -62,6 +66,10 @@
   font-size: 12px;
 }
 
+.docs-api-deprecated-marker {
+  margin-right: 8px;
+}
+
 .docs-api-module-import,
 .docs-api-class-selector-name,
 .docs-api-class-export-name {

src/styles/_tables.scss

@@ -22,6 +22,16 @@
 .docs-markdown-td {
   font-weight: 400;
   padding: 8px 16px;
+
+  @media (max-width: $extra-small-breakpoint-width) {
+    &.docs-api-properties-name-cell,
+    &.docs-api-method-parameter-cell,
+    &.docs-api-method-returns-type-cell,
+    &.docs-api-method-description-cell {
+      min-width: 80px;
+      word-break: break-word;
+    }
+  }
 }