Improve mobile experience across the site (#265)

josephperrott · jelbourn · commit 62706dce30a8 · 2017-09-19T09:38:31.000-07:00
- Give elevation to navbar on all pages
- Make navbar "sticky" on all pages
- Show table of contents (non-sticky) at the top of pages on mobile
- Shrink landing page spacing on mobile to increase density
- Move navbar to a two row version on mobile
- Use md-icon for angular and github icons in navbar
- Enforce word breaks for p tags in docs, preventing x axis overflows
- Decrease height of Guides subheader to match other pages
- Shrink docs-api table spacing on mobile to increase density
diff --git a/src/app/material-docs-app.html b/src/app/material-docs-app.html
@@ -1,2 +1,2 @@
-<app-navbar [class.mat-elevation-z6]="showShadow"></app-navbar>
+<app-navbar class="mat-elevation-z6"></app-navbar>
 <router-outlet></router-outlet>
diff --git a/src/app/material-docs-app.scss b/src/app/material-docs-app.scss
@@ -12,6 +12,11 @@ material-docs-app > app-component-sidenav {
   flex: 1 1 auto;
 }
 
+// Target last-child as it will be the output of the router-outlet within the app's container.
+material-docs-app > :last-child {
+  overflow-y: auto;
+}
+
 app-navbar {
   position: relative;
   z-index: 10;
diff --git a/src/app/material-docs-app.ts b/src/app/material-docs-app.ts
@@ -10,19 +10,13 @@ import 'rxjs/add/operator/filter';
   encapsulation: ViewEncapsulation.None,
 })
 export class MaterialDocsApp {
-  showShadow = false;
 
   constructor(router: Router) {
-    const routesWithNavbarShadow = ['/categories', '/components'];
-
     let previousRoute = router.routerState.snapshot.url;
 
     router.events
       .filter(event => event instanceof NavigationEnd )
       .subscribe((data: NavigationEnd) => {
-        this.showShadow = !!routesWithNavbarShadow
-            .find(route => data.urlAfterRedirects.startsWith(route));
-
         // We want to reset the scroll position on navigation except when navigating within
         // the documentation for a single component.
         if (!isNavigationWithinComponentView(previousRoute, data.urlAfterRedirects)) {
diff --git a/src/app/pages/component-viewer/component-overview.scss b/src/app/pages/component-viewer/component-overview.scss
@@ -0,0 +1,8 @@
+@import '../../../styles/constants';
+
+component-overview {
+  @media (max-width: $small-breakpoint-width) {
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/src/app/pages/component-viewer/component-viewer.scss b/src/app/pages/component-viewer/component-viewer.scss
@@ -32,7 +32,10 @@ app-component-viewer {
     top: 35px;
 
     @media (max-width: $small-breakpoint-width) {
-      display: none;
+      display: flex;
+      order: -1;
+      position: inherit;
+      width: auto;
     }
   }
 }
diff --git a/src/app/pages/component-viewer/component-viewer.ts b/src/app/pages/component-viewer/component-viewer.ts
@@ -35,6 +35,7 @@ export class ComponentViewer {
 @Component({
   selector: 'component-overview',
   templateUrl: './component-overview.html',
+  styleUrls: ['./component-overview.scss'],
   encapsulation: ViewEncapsulation.None,
 })
 export class ComponentOverview {
diff --git a/src/app/pages/guide-viewer/guide-viewer.scss b/src/app/pages/guide-viewer/guide-viewer.scss
@@ -23,7 +23,7 @@ $guide-content-margin-side-xs: 15px;
 }
 
 .docs-guide-toc-and-content {
-  display: inline-block;
+  display: block;
   text-align: left;
   max-width: 940px;
 }
diff --git a/src/app/pages/homepage/homepage.scss b/src/app/pages/homepage/homepage.scss
@@ -1,22 +1,22 @@
 // The margin between two sections
 $margin-promotion-sections: 60px;
+$margin-promotion-sections-small: 15px;
 
 .docs-header-background {
-  height: 300px;
-  margin-bottom: 40px;
+  overflow: hidden;
 }
 
 .docs-header-section {
   text-align: center;
-  padding-top: 60px;
+  padding-top: $margin-promotion-sections;
 }
 
 .docs-header-headline {
   h1 {
     font-size: 56px;
     font-weight: 300;
     line-height: 56px;
-    margin: 15px 0 15px 0;
+    margin: 15px 5px;
   }
 
   h2 {
@@ -85,3 +85,22 @@ $margin-promotion-sections: 60px;
   flex-direction: column;
   justify-content: center;
 }
+
+
+/**
+  * Rules for when the device is detected to be a small screen.
+  */
+@media (max-width: 720px) {
+  .docs-header-section {
+    padding-top: $margin-promotion-sections-small;
+  }
+
+  .docs-header-start,
+  .docs-homepage-bottom-start {
+    margin: $margin-promotion-sections-small 0;
+  }
+
+  .docs-homepage-row {
+    margin: $margin-promotion-sections-small 0;
+  }
+}
diff --git a/src/app/shared/navbar/_navbar-theme.scss b/src/app/shared/navbar/_navbar-theme.scss
@@ -8,7 +8,7 @@
   app-navbar {
     color: mat-color($primary, default-contrast);
 
-    .docs-navbar {
+    .docs-navbar, .docs-navbar-header {
       background: mat-color($primary);
     }
   }
diff --git a/src/app/shared/navbar/navbar.html b/src/app/shared/navbar/navbar.html
@@ -1,19 +1,30 @@
 <!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
-<nav class="docs-navbar">
+<nav class="docs-navbar-header">
   <a md-button class="docs-button" routerLink="/" aria-label="Angular Material">
     <img class="docs-angular-logo"
-      src="../../../assets/img/homepage/angular-white-transparent.svg"
-      alt="angular">
+         src="../../../assets/img/homepage/angular-white-transparent.svg"
+         alt="angular">
     <span>Material</span>
   </a>
-  <a md-button class="docs-button" routerLink="components">Components</a>
-  <a md-button class="docs-button" routerLink="guides">Guides</a>
+  <a md-button class="docs-navbar-hide-small docs-button" routerLink="components">Components</a>
+  <a md-button class="docs-navbar-hide-small docs-button" routerLink="guides">Guides</a>
   <div class="flex-spacer"></div>
   <theme-picker></theme-picker>
-  <a md-button class="docs-button" href="https://github.com/angular/material2" aria-label="GitHub Repository">
-    <img class="docs-github-logo"
-      src="../../../assets/img/homepage/github-circle-white-transparent.svg"
-      alt="GitHub">
+  <a md-button class="docs-button docs-navbar-hide-small" href="https://github.com/angular/material2"
+     aria-label="GitHub Repository">
+    <img class="docs-angular-logo"
+         src="../../../assets/img/homepage/github-circle-white-transparent.svg"
+         alt="angular">
     GitHub
   </a>
+  <a md-icon-button class="docs-button docs-navbar-show-small"
+     href="https://github.com/angular/material2" aria-label="GitHub Repository">
+    <img class="docs-angular-logo"
+         src="../../../assets/img/homepage/github-circle-white-transparent.svg"
+         alt="angular">
+  </a>
+</nav>
+<nav class="docs-navbar docs-navbar-show-small">
+  <a md-button class="docs-navbar-link" routerLink="components">Components</a>
+  <a md-button class="docs-navbar-link" routerLink="guides">Guides</a>
 </nav>
diff --git a/src/app/shared/navbar/navbar.scss b/src/app/shared/navbar/navbar.scss
@@ -1,4 +1,4 @@
-.docs-navbar {
+.docs-navbar-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -26,3 +26,38 @@
   margin: 0 7px 2px 0;
   vertical-align: middle;
 }
+
+.docs-navbar-link {
+  text-decoration: inherit;
+  flex: 1;
+}
+
+.docs-navbar {
+  display: none;
+}
+
+.docs-navbar-show-small {
+  display: none;
+}
+
+/**
+  * Rules for when the device is detected to be a small screen.
+  * Moves content two rows instead of one.
+  */
+@media (max-width: 720px) {
+  .docs-navbar-hide-small {
+    display: none;
+  }
+
+  .docs-navbar-show-small {
+    display: block;
+  }
+
+  .docs-navbar {
+    display: flex;
+  }
+
+  .docs-navbar--github-logo {
+    margin: 0;
+  }
+}
diff --git a/src/app/shared/navbar/navbar.spec.ts b/src/app/shared/navbar/navbar.spec.ts
@@ -20,11 +20,5 @@ describe('NavBar', () => {
     fixture.detectChanges();
   });
 
-  it('should have a link to material github', () => {
-    const githublink = 'https://github.com/angular/material2';
-    const links = fixture
-      .nativeElement.querySelectorAll('.docs-navbar .mat-button');
-    const link  = links[links.length - 1];
-    expect(link.getAttribute('href')).toEqual(githublink);
-  });
+  // Note: Add tests is logic is added to navbar class.
 });
diff --git a/src/app/shared/navbar/navbar.ts b/src/app/shared/navbar/navbar.ts
@@ -1,5 +1,6 @@
 import {Component, NgModule} from '@angular/core';
-import {MdButtonModule} from '@angular/material';
+import {DomSanitizer} from '@angular/platform-browser';
+import {MdButtonModule, MdMenuModule} from '@angular/material';
 import {RouterModule} from '@angular/router';
 import {ThemePickerModule} from '../theme-picker/theme-picker';
 
@@ -11,7 +12,7 @@ import {ThemePickerModule} from '../theme-picker/theme-picker';
 export class NavBar {}
 
 @NgModule({
-  imports: [MdButtonModule, RouterModule, ThemePickerModule],
+  imports: [MdButtonModule, MdMenuModule, RouterModule, ThemePickerModule],
   exports: [NavBar],
   declarations: [NavBar],
 })
diff --git a/src/styles/_api-theme.scss b/src/styles/_api-theme.scss
@@ -25,6 +25,11 @@
     display: none !important;
   }
 
+  // Prevent p tags from not breaking, causing x axis overflows.
+  .docs-api > p {
+    word-break: break-word;
+  }
+
   .docs-api-class-name,
   .docs-api-module-import,
   .docs-api-class-selector-name,
diff --git a/src/styles/_constants.scss b/src/styles/_constants.scss
@@ -1,7 +1,7 @@
 @import '../../node_modules/@angular/material/theming';
 
-$small-breakpoint-width: 840px;
+$small-breakpoint-width: 720px;
 
 /* For desktop, the content should be aligned with the page title. */
 $content-padding-side: 70px;
-$content-padding-side-xs: 15px;
+$content-padding-side-xs: 15px;
diff --git a/src/styles/_general.scss b/src/styles/_general.scss
@@ -25,7 +25,8 @@ pre {
     font-size: 30px;
     font-weight: 300;
     margin: 0;
-    padding: 50px;
+    padding: 28px 8px;
+    font-size: 20px;
   }
 }
 
diff --git a/src/styles/_markdown.scss b/src/styles/_markdown.scss
@@ -41,8 +41,9 @@
 
 .docs-markdown-pre {
   border-radius: 5px;
-  margin: 16px auto;
   display: block;
+  margin: 16px auto;
+  overflow-x: auto;
   padding: 20px;
 
   .docs-markdown-code {
diff --git a/src/styles/_tables.scss b/src/styles/_tables.scss
@@ -1,3 +1,5 @@
+@import './constants';
+
 .docs-api table,
 .docs-markdown-table {
   border-collapse: collapse;
@@ -21,3 +23,21 @@
   font-weight: 400;
   padding: 8px 16px;
 }
+
+
+@media (max-width: $small-breakpoint-width) {
+  .docs-api table,
+  .docs-markdown-table {
+    margin: 0 0 32px 0;
+  }
+
+  .docs-api th,
+  .docs-markdown-th {
+    padding: 6px 16px;
+  }
+
+  .docs-api td,
+  .docs-markdown-td {
+    padding: 4px 8px;
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-<app-navbar [class.mat-elevation-z6]="showShadow"></app-navbar>`
	`1`	`+<app-navbar class="mat-elevation-z6"></app-navbar>`
`2`	`2`	`<router-outlet></router-outlet>`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,10 @@ app-component-viewer {`
`32`	`32`	`top: 35px;`
`33`	`33`
`34`	`34`	`@media (max-width: $small-breakpoint-width) {`
`35`		`- display: none;`
	`35`	`+ display: flex;`
	`36`	`+ order: -1;`
	`37`	`+ position: inherit;`
	`38`	`+ width: auto;`
`36`	`39`	`}`
`37`	`40`	`}`
`38`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ $guide-content-margin-side-xs: 15px;`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`.docs-guide-toc-and-content {`
`26`		`- display: inline-block;`
	`26`	`+ display: block;`
`27`	`27`	`text-align: left;`
`28`	`28`	`max-width: 940px;`
`29`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`app-navbar {`
`9`	`9`	`color: mat-color($primary, default-contrast);`
`10`	`10`
`11`		`- .docs-navbar {`
	`11`	`+ .docs-navbar, .docs-navbar-header {`
`12`	`12`	`background: mat-color($primary);`
`13`	`13`	`}`
`14`	`14`	`}`