Add footer to all pages (#64)

Author: andrewseguin

src/_app-theme.scss

@@ -29,6 +29,11 @@
     }
   }
 
+  .docs-footer {
+    background: md-color($primary);
+    color: md-color($primary, default-contrast);
+  }
+
   @include docs-site-typography-theme($theme);
   @include nav-bar-theme($theme);
   @include component-viewer-sidenav-theme($theme);

src/app/app-module.ts

@@ -15,6 +15,7 @@ import {ExampleModule} from './examples/example-module';
 import {SharedModule} from './shared/shared-module';
 import {ComponentCategoryList} from './pages/component-category-list/component-category-list';
 import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
+import {Footer} from './shared/footer/footer';
 import {ComponentPageTitle} from './pages/page-title/page-title';
 import {ComponentPageHeader} from './pages/component-page-header/component-page-header';
 
@@ -30,6 +31,7 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
     GuideList,
     GuideViewer,
     Homepage,
+    Footer
   ],
   imports: [
     BrowserModule,

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

@@ -15,6 +15,9 @@ <h3>{{category.name}}</h3>
     </nav>
   </md-sidenav>
 
-  <component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
-  <router-outlet></router-outlet>
+  <div class="docs-component-sidenav-content">   
+    <component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
+    <router-outlet></router-outlet>
+    <app-footer></app-footer>
+  </div>
 </md-sidenav-layout>

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

@@ -69,3 +69,14 @@ app-component-sidenav {
     }
   }
 }
+
+.docs-component-sidenav-content {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  // The rule will match the element following the router-outlet which will be the routed component.
+  router-outlet + * {
+    flex-grow: 1;
+  }
+}

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

@@ -8,3 +8,5 @@ <h1>Guides</h1>
       {{guide.name}}
   </a>
 </md-list>
+
+<app-footer></app-footer>

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

@@ -1,3 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
 .docs-guide-list-item {
   margin: 50px;
+  flex-grow: 1;
 }
+

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

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

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

@@ -1,4 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
 .docs-guide-content {
   display: block;
   margin: 20px 0 0 70px;
+  flex-grow: 1;
 }

src/app/pages/homepage/homepage.html

@@ -54,3 +54,5 @@ <h2>Optimized for Angular</h2>
     <a md-raised-button routerLink="guide/getting-started">Get started</a>
   </div>
 </div>
+
+<app-footer></app-footer>

src/app/shared/footer/footer.html

@@ -0,0 +1,4 @@
+<footer class="docs-footer">
+  Powered by Google ©2010-2016. Code licensed under an MIT-style License.
+  Documentation licensed under CC BY 4.0.
+</footer>

src/app/shared/footer/footer.scss

@@ -0,0 +1,5 @@
+.docs-footer {
+  margin-top: 40px;
+  padding: 20px;
+  text-align: center;
+}

src/app/shared/footer/footer.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.html',
+  styleUrls: ['./footer.scss']
+})
+export class Footer { }