fix(material-docs-app): remove absolute positioning of all content (#840)

- preserve behavior of not having a scrollbar next to the toolbar
- hide theme picker on small devices (iPhone 5) so that navbar doesn't wrap

Author: Splaktar

material.angular.io/src/app/material-docs-app.scss

@@ -1,11 +1,7 @@
 material-docs-app {
   display: flex;
   flex-direction: column;
-  position: absolute;
-  top: 56px;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  height: 100vh;
 }
 
 app-navbar {
@@ -20,21 +16,16 @@ material-docs-app > app-component-sidenav {
   flex: 1;
 }
 
-material-docs-app > app-homepage,
-material-docs-app > app-guides,
-material-docs-app > guide-viewer {
+material-docs-app > router-outlet + .main-content,
+material-docs-app > router-outlet + app-component-sidenav {
+  margin-top: 56px;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
 @media (max-width: 720px) {
-  material-docs-app {
-    top: 92px;
-  }
-
-  material-docs-app > app-homepage,
-  material-docs-app > app-guides,
-  material-docs-app > guide-viewer {
-    overflow-y: visible;
+  material-docs-app > router-outlet + .main-content,
+  material-docs-app > router-outlet + app-component-sidenav {
+    margin-top: 92px;
   }
 }

material.angular.io/src/app/pages/guide-list/guide-list.ts

@@ -1,4 +1,4 @@
-import {Component, NgModule, OnInit} from '@angular/core';
+import {Component, HostBinding, NgModule, OnInit} from '@angular/core';
 import {GuideItems} from '../../shared/guide-items/guide-items';
 import {MatListModule} from '@angular/material/list';
 import {RouterModule, Routes} from '@angular/router';
@@ -14,6 +14,8 @@ import {MatCardModule} from '@angular/material/card';
   styleUrls: ['./guide-list.scss']
 })
 export class GuideList implements OnInit {
+  @HostBinding('class.main-content') readonly mainContentClass = true;
+
   constructor(public guideItems: GuideItems, public _componentPageTitle: ComponentPageTitle) {}
 
   ngOnInit(): void {

material.angular.io/src/app/pages/guide-viewer/guide-viewer.ts

@@ -1,4 +1,4 @@
-import {Component, NgModule, OnInit} from '@angular/core';
+import {Component, HostBinding, NgModule, OnInit} from '@angular/core';
 import {ActivatedRoute, Router, RouterModule, Routes} from '@angular/router';
 import {GuideItem, GuideItems} from '../../shared/guide-items/guide-items';
 import {FooterModule} from '../../shared/footer/footer';
@@ -14,6 +14,7 @@ import {NavigationFocusModule} from '../../shared/navigation-focus/navigation-fo
   styleUrls: ['./guide-viewer.scss'],
 })
 export class GuideViewer implements OnInit {
+  @HostBinding('class.main-content') readonly mainContentClass = true;
   guide: GuideItem | undefined;
 
   constructor(_route: ActivatedRoute,

material.angular.io/src/app/pages/homepage/homepage.ts

@@ -1,4 +1,4 @@
-import {Component, NgModule, OnInit} from '@angular/core';
+import {Component, HostBinding, NgModule, OnInit} from '@angular/core';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {MatButtonModule} from '@angular/material/button';
 import {FooterModule} from '../../shared/footer/footer';
@@ -20,6 +20,7 @@ const TOP_COMPONENTS = ['datepicker', 'input', 'slide-toggle', 'slider', 'button
   styleUrls: ['./homepage.scss']
 })
 export class Homepage implements OnInit {
+  @HostBinding('class.main-content') readonly mainContentClass = true;
   isNextVersion = location.hostname.startsWith('next.material.angular.io');
 
   constructor(public _componentPageTitle: ComponentPageTitle, public guideItems: GuideItems) {

material.angular.io/src/app/pages/not-found/not-found.ts

@@ -1,4 +1,4 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, HostBinding, NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {FooterModule} from '../../shared/footer/footer';
 import {RouterModule, Routes} from '@angular/router';
@@ -9,6 +9,7 @@ import {RouterModule, Routes} from '@angular/router';
   styleUrls: ['./not-found.scss']
 })
 export class NotFound {
+  @HostBinding('class.main-content') readonly mainContentClass = true;
 }
 
 const routes: Routes = [{path: '', component: NotFound}];

material.angular.io/src/app/shared/navbar/navbar.scss

@@ -69,3 +69,11 @@
     margin: 0;
   }
 }
+
+theme-picker {
+  display: none;
+
+  @media (min-width: 328px) {
+    display: block;
+  }
+}

material.angular.io/src/styles/_general.scss

@@ -1,3 +1,8 @@
+html,
+body {
+  height: 100vh;
+}
+
 body {
   font-family: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
   margin: 0;

material.angular.io/tools/audit-docs-a11y.js

@@ -28,8 +28,8 @@ const MIN_SCORES_PER_PAGE = {
   'components/categories' : 91,
   'cdk/categories' : 91,
   'guides' : 100,
-  'guide/creating-a-custom-form-field-control' : 99,
-  'guide/getting-started' : 98,
+  'guide/creating-a-custom-form-field-control' : 97,
+  'guide/getting-started' : 96,
   'cdk/a11y/overview' : 85,
   'cdk/a11y/api' : 89,
   'cdk/a11y/examples' : 85,