Set max width for component and guide viewers (#207)

Author: willshowell

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

@@ -1,12 +1,13 @@
-<!-- TODO(jelbourn): turn this into nav tabs -->
-<nav md-tab-nav-bar class="docs-component-viewer-tabbed-content">
-  <a md-tab-link class="docs-component-viewer-section-tab"
-      *ngFor="let section of ['Overview', 'API', 'Examples']"
-      [routerLink]="section.toLowerCase()"
-      routerLinkActive #rla="routerLinkActive"
-      [active]="rla.isActive">{{section}}</a>
-</nav>
+<div class="docs-component-viewer">
+  <nav md-tab-nav-bar class="docs-component-viewer-tabbed-content">
+    <a md-tab-link class="docs-component-viewer-section-tab"
+        *ngFor="let section of ['Overview', 'API', 'Examples']"
+        [routerLink]="section.toLowerCase()"
+        routerLinkActive #rla="routerLinkActive"
+        [active]="rla.isActive">{{section}}</a>
+  </nav>
 
-<div class="docs-component-viewer-content">
-  <router-outlet></router-outlet>
+  <div class="docs-component-viewer-content">
+    <router-outlet></router-outlet>
+  </div>
 </div>

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

@@ -2,7 +2,17 @@
 
 app-component-viewer {
   font-weight: 400;
-  margin: 20px 70px 50px 70px;
+  padding: 20px $content-padding-side 50px;
+
+  @media ($mat-xsmall) {
+    padding-left: $content-padding-side-xs;
+    padding-right: $content-padding-side-xs;
+  }
+}
+
+.docs-component-viewer {
+  margin: 0 auto;
+  max-width: 940px;
 }
 
 .docs-component-viewer-section-tab {

src/app/pages/guide-viewer/guide-viewer.html

@@ -2,6 +2,8 @@
   <h1>{{guide.name}}</h1>
 </div>
 
-<doc-viewer class="docs-guide-content" [documentUrl]="guide.document"></doc-viewer>
+<div class="docs-guide-wrapper">
+  <doc-viewer class="docs-guide-content" [documentUrl]="guide.document"></doc-viewer>
+</div>
 
 <app-footer></app-footer>

src/app/pages/guide-viewer/guide-viewer.scss

@@ -1,22 +1,22 @@
-@import "../../../../node_modules/@angular/material/theming";
-
-/* For desktop, the content should be aligned with the page title. */
-$guide-content-margin-side: 70px;
-$guide-content-margin-side-xs: 15px;
+@import '../../../styles/constants';
 
 :host {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
 
-.docs-guide-content {
-  display: block;
-  margin: 20px $guide-content-margin-side 0;
-  flex-grow: 1;
+.docs-guide-wrapper {
+  padding: 20px $content-padding-side 0;
 
   @media ($mat-xsmall) {
-    margin-left: $guide-content-margin-side-xs;
-    margin-right: $guide-content-margin-side-xs;
+    padding-left: $content-padding-side-xs;
+    padding-right: $content-padding-side-xs;
   }
 }
+
+.docs-guide-content {
+  display: block;
+  margin: 0 auto;
+  max-width: 940px;
+}

src/styles/_constants.scss

@@ -1 +1,7 @@
+@import '../../node_modules/@angular/material/theming';
+
 $small-breakpoint-width: 840px;
+
+/* For desktop, the content should be aligned with the page title. */
+$content-padding-side: 70px;
+$content-padding-side-xs: 15px;