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-proxy.ts

@@ -0,0 +1,7 @@
+import {Injectable} from '@angular/core';
+import {MatSidenav} from '@angular/material/sidenav';
+
+@Injectable({providedIn : 'root'})
+export class ComponentSidenavProxy {
+  sidenav: MatSidenav;
+}

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

@@ -37,10 +37,17 @@ import {HttpClientModule} from '@angular/common/http';
 import {StackBlitzButtonModule} from '../../shared/stack-blitz';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {ExampleModule} from '@angular/components-examples';
-import {ComponentSidenavService} from './component-sidenav.service';
+import {ComponentSidenavProxy} from './component-sidenav-proxy';
 import {MatDrawerToggleResult} from '@angular/material/sidenav/drawer';
 import {MatListModule} from '@angular/material/list';
 
+// These constants are used by the ComponentSidenav for orchestrating the MatSidenav in a responsive
+// way. This includes hiding the sidenav, defaulting it to open, changing the mode from over to
+// side, determining the size of the top gap, and whether the sidenav is fixed in the viewport.
+// The values were determined through the combination of Material Design breakpoints and careful
+// testing of the application across a range of common device widths (360px+).
+// These breakpoint values need to stay in sync with the related Sass variables in
+// src/styles/_constants.scss.
 const EXTRA_SMALL_WIDTH_BREAKPOINT = 720;
 const SMALL_WIDTH_BREAKPOINT = 959;
 
@@ -58,7 +65,7 @@ export class ComponentSidenav implements OnInit {
 
   constructor(public docItems: DocumentationItems,
               private _route: ActivatedRoute,
-              private componentSidenavService: ComponentSidenavService,
+              private componentSidenavProxy: ComponentSidenavProxy,
               zone: NgZone,
               breakpoints: BreakpointObserver) {
     this.isExtraScreenSmall =
@@ -75,8 +82,8 @@ export class ComponentSidenav implements OnInit {
   }
 
   toggleSidenav(sidenav: MatSidenav): Promise<MatDrawerToggleResult> {
-    this.componentSidenavService.sidenav = sidenav;
-    return this.componentSidenavService.sidenav.toggle();
+    this.componentSidenavProxy.sidenav = sidenav;
+    return this.componentSidenavProxy.sidenav.toggle();
   }
 }
 
@@ -98,7 +105,7 @@ export class ComponentNav implements OnInit, OnDestroy {
   private _onDestroy = new Subject<void>();
 
   constructor(public docItems: DocumentationItems, private _router: Router,
-              private componentSidenavService: ComponentSidenavService) {}
+              private componentSidenavProxy: ComponentSidenavProxy) {}
 
   ngOnInit() {
     this._router.events.pipe(
@@ -154,8 +161,8 @@ export class ComponentNav implements OnInit, OnDestroy {
    * @param path component.id sub-path to use for navigation
    */
   selectNavItem(path: string): void {
-    if (this.componentSidenavService.sidenav) {
-      this.componentSidenavService.sidenav.close().then(() => this.openNavItem(path));
+    if (this.componentSidenavProxy.sidenav) {
+      this.componentSidenavProxy.sidenav.close().then(() => this.openNavItem(path));
     } else {
       this.openNavItem(path);
     }

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

@@ -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.html

@@ -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/pages/component-viewer/component-api.scss

@@ -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/app/shared/footer/footer.html

@@ -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/_api.scss

@@ -1,6 +1,13 @@
 @import '../../node_modules/@angular/material/theming';
 
+// The values were determined through the combination of Material Design breakpoints and careful
+// testing of the application across a range of common device widths (360px+).
+// These breakpoint values need to stay in sync with the related constants in
+// src/app/pages/component-sidenav/component-sidenav.ts.
+// The extra small breakpoint is used for styling the guides and certain aspects of the tables.
 $extra-small-breakpoint-width: 720px;
+// The small breakpoint is used for the component category and component list pages, the component
+// pages, the component sidenav, and certain aspects of the tables.
 $small-breakpoint-width: 959px;
 
 /* For desktop, the content should be aligned with the page title. */

src/styles/_constants.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;
+    }
+  }
 }