Styles for the category list and component list (angular#48)

* make sidenav shell look like mocks

* toolbar shadow

* fix lint

* category list styles

* component list styles

src/_app-theme.scss

@@ -2,6 +2,9 @@
 @import './app/pages/homepage/homepage-theme';
 @import './app/pages/component-sidenav/component-sidenav-theme';
 @import './app/pages/component-viewer/component-viewer-theme';
+@import './app/pages/component-list/component-list-theme';
+@import './app/pages/component-category-list/component-category-list-theme';
+
 @import './app/shared/navbar/navbar-theme';
 @import './app/shared/example-viewer/example-viewer-theme';
 
@@ -21,6 +24,8 @@
   @include component-viewer-sidenav-theme($theme);
   @include home-page-theme($theme);
   @include component-viewer-theme($theme);
+  @include component-list-theme($theme);
+  @include component-category-list-theme($theme);
   @include nav-bar-theme($theme);
   @include example-viewer-theme($theme);
 }

src/app/material-docs-app.html

@@ -1,2 +1,2 @@
-<app-navbar></app-navbar>
+<app-navbar [class.md-elevation-z6]="showShadow"></app-navbar>
 <router-outlet></router-outlet>

src/app/material-docs-app.scss

@@ -0,0 +1,18 @@
+material-docs-app {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+material-docs-app > app-component-sidenav {
+  flex: 1 1 auto;
+}
+
+app-navbar {
+  position: relative;
+  z-index: 10;
+}

src/app/material-docs-app.ts

@@ -1,4 +1,5 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
+import {Router} from '@angular/router';
 
 
 @Component({
@@ -7,8 +8,16 @@ import {Component} from '@angular/core';
   styleUrls: ['./material-docs-app.scss'],
   host: {
     '[class.docs-dark-theme]': 'isDarkTheme',
-  }
+  },
+  encapsulation: ViewEncapsulation.None,
 })
 export class MaterialDocsApp {
-  isDarkTheme: boolean = false;
+  isDarkTheme = false;
+  showShadow = false;
+
+  constructor(router: Router) {
+    router.events.subscribe(data => {
+      this.showShadow = data.url.startsWith('/components');
+    });
+  }
 }

src/app/pages/component-category-list/_component-category-list-theme.scss

@@ -0,0 +1,19 @@
+@mixin component-category-list-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .docs-component-category-list-header {
+    background: md-color($primary);
+
+    h1 {
+      color: md-color($primary, default-contrast);
+    }
+  }
+
+  .docs-component-category-list-card-summary {
+    color: md-color($foreground, secondary-text);
+  }
+}

src/app/pages/component-category-list/component-category-list.html

@@ -1,8 +1,16 @@
-<md-card
-    *ngFor="let category of docItems.getItemsInCategories()"
-    class="docs-component-category-list-category"
-    [routerLink]="['/components/category/', category.id]">
-  <md-card-title>{{category.name}}</md-card-title>
-  <p>{{category.summary}}</p>
-  <img md-card-image src="../../../assets/img/component-categories/{{category.id}}.svg">
-</md-card>
+<div class="docs-component-category-list-header">
+  <h1>Component Library</h1>
+</div>
+
+<div class="docs-component-category-list">
+  <md-card
+      *ngFor="let category of docItems.getItemsInCategories()"
+      class="docs-component-category-list-card"
+      [routerLink]="['/components/category/', category.id]">
+    <md-card-title>{{category.name}}</md-card-title>
+    <p class="docs-component-category-list-card-summary">{{category.summary}}</p>
+    <div class="docs-component-category-list-card-image"
+         [style.backgroundImage]="'url(\'../../../assets/img/component-categories/' + category.id +'.svg\')'">
+    </div>
+  </md-card>
+</div>

src/app/pages/component-category-list/component-category-list.scss

@@ -1,4 +1,34 @@
-.docs-component-category-list-category {
+.docs-component-category-list {
+  padding: 20px;
+}
+
+.docs-component-category-list-card {
   display: inline-block;
-  width: 300px;
+  width: 260px;
+  margin: 20px;
+  vertical-align: top;
+  cursor: pointer;
+}
+
+.docs-component-category-list-card-image {
+  width: 100%;
+  height: 160px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.docs-component-category-list-card-summary {
+  height: 2.4em;
+}
+
+.docs-component-category-list-header {
+  padding-left: 20px;
+
+  h1 {
+    font-size: 30px;
+    font-weight: 300;
+    margin: 0;
+    padding: 50px;
+  }
 }

src/app/pages/component-category-list/component-category-list.ts

@@ -1,7 +1,5 @@
 import {Component} from '@angular/core';
-import {
-  DocumentationItems
-} from '../../shared/documentation-items/documentation-items';
+import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 
 
 @Component({

src/app/pages/component-list/_component-list-theme.scss

@@ -0,0 +1,19 @@
+@mixin component-list-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .docs-component-list-header {
+    background: md-color($primary);
+
+    h1 {
+      color: md-color($primary, default-contrast);
+    }
+  }
+
+  .docs-component-list-item {
+    color: md-color($foreground, secondary-text);
+  }
+}

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

@@ -1,11 +1,15 @@
+<div class="docs-component-list-header">
+  <h1> {{category.name}} </h1>
+</div>
+
 <div class="docs-component-list-category">
-  <h2>{{category.name}}</h2>
   <a *ngFor="let component of category.items"
       class="docs-component-list-item"
       [routerLink]="['/components/component/', component.id]">
-    <img src="../../../assets/img/components/{{component.id}}.svg"
-        class="docs-component-list-item-icon"
-        [alt]="component.name">
+    <div class="docs-component-list-item-icon"
+         [attr.aria-label]="component.name"
+         [style.backgroundImage]="'url(\'../../../assets/img/components/' + component.id + '.svg\')'">
+    </div>
     {{component.name}}
   </a>
 </div>

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

@@ -2,16 +2,33 @@
 
 
 .docs-component-list-category {
-  margin: 50px;
+  margin: 20px;
 }
 
 .docs-component-list-item {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  margin: 16px;
+  margin: 30px;
+  text-decoration: none;
 }
 
 .docs-component-list-item-icon {
-  margin-bottom: 8px;
+  margin-bottom: 20px;
+  width: 100px;
+  height: 100px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.docs-component-list-header {
+  padding-left: 20px;
+
+  h1 {
+    font-size: 30px;
+    font-weight: 300;
+    margin: 0;
+    padding: 50px;
+  }
 }

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

@@ -1,4 +1,4 @@
-<md-sidenav-layout>
+<md-sidenav-layout class="docs-component-viewer-sidenav-container">
   <md-sidenav opened mode="side" class="docs-component-viewer-sidenav">
     <nav *ngFor="let category of docItems.getItemsInCategories()">
       <h3>{{category.name}}</h3>

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

@@ -1,12 +1,21 @@
 $sidenav-spacing-unit: 8px;
 $sidenav-width: 240px;
 
+app-component-sidenav {
+  display: flex;
+}
+
+.docs-component-viewer-sidenav-container {
+  width: 100%;
+}
+
 .docs-component-viewer-sidenav {
   box-shadow: 3px 0 6px rgba(0, 0, 0, .24);
   padding-bottom: 72px;
   width: $sidenav-width;
   bottom: 0;
   overflow: auto;
+  height: 100%;
 
   &.md-sidenav-opened {
     box-shadow: 3px 0 6px rgba(0, 0, 0, .24);