From 9bb41243f2fa6d042ebf1ed09bc55c841e729d0a Mon Sep 17 00:00:00 2001
From: Fatima Remtullah <fatima.remtullah@rangle.io>
Date: Sat, 7 Jan 2017 17:34:37 -0500
Subject: [PATCH 1/2] add logo and link to angular in footer

---
 src/_app-theme.scss                           |  2 ++
 .../pages/guide-list/_guide-list-theme.scss   | 27 +++++++++++++++++++
 src/app/pages/guide-list/guide-list.html      | 25 +++++++++++++----
 src/app/pages/guide-list/guide-list.scss      | 27 ++++++++++++++++++-
 4 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 src/app/pages/guide-list/_guide-list-theme.scss

diff --git a/src/_app-theme.scss b/src/_app-theme.scss
index 8c8ad3ab1..46c56bef6 100644
--- a/src/_app-theme.scss
+++ b/src/_app-theme.scss
@@ -4,6 +4,7 @@
 @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/pages/guide-list/guide-list-theme';
 
 @import './styles/api-theme';
 @import './styles/markdown-theme';
@@ -50,4 +51,5 @@
   @include nav-bar-theme($theme);
   @include example-viewer-theme($theme);
   @include footer-theme($theme);
+  @include guide-list-theme($theme);
 }
diff --git a/src/app/pages/guide-list/_guide-list-theme.scss b/src/app/pages/guide-list/_guide-list-theme.scss
new file mode 100644
index 000000000..61bd35b7e
--- /dev/null
+++ b/src/app/pages/guide-list/_guide-list-theme.scss
@@ -0,0 +1,27 @@
+@import '~@angular/material/core/theming/theming';
+
+@mixin guide-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);
+
+  app-guides {
+
+    .docs-guide-list-item {
+      table {
+        box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
+      }
+
+      th {
+        color: md-color($foreground, secondary-text);
+        background: rgba(md-color($foreground, secondary-text), .03);
+      }
+
+      td a {
+        color: md-color($primary);
+      }
+    }
+  }
+}
diff --git a/src/app/pages/guide-list/guide-list.html b/src/app/pages/guide-list/guide-list.html
index 642bcef48..0b613b05a 100644
--- a/src/app/pages/guide-list/guide-list.html
+++ b/src/app/pages/guide-list/guide-list.html
@@ -1,12 +1,27 @@
 <div class="docs-primary-header">
   <h1>Guides</h1>
 </div>
+
 <md-list class="docs-guide-list-item">
-  <a md-list-item
-     *ngFor="let guide of guideItems.getAllItems()"
-     [routerLink]="['/guide/', guide.id]">
-      {{guide.name}}
-  </a>
+  <table>
+    <tbody>
+      <tr>
+        <th>Core Guides</th>
+      </tr>
+
+      <tr>
+        <td>
+          <a md-list-item
+             *ngFor="let guide of guideItems.getAllItems()"
+             [routerLink]="['/guide/', guide.id]">
+              {{guide.name}}
+          </a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+
 </md-list>
 
 <app-footer></app-footer>
diff --git a/src/app/pages/guide-list/guide-list.scss b/src/app/pages/guide-list/guide-list.scss
index 8d57d6045..daef474d8 100644
--- a/src/app/pages/guide-list/guide-list.scss
+++ b/src/app/pages/guide-list/guide-list.scss
@@ -7,5 +7,30 @@
 .docs-guide-list-item {
   margin: 50px;
   flex-grow: 1;
-}
 
+  table {
+    border-collapse: collapse;
+    border-radius: 2px;
+    border-spacing: 0;
+    margin: 0 0 32px 0;
+    width: 100%;
+  }
+
+  table tbody th {
+    font-weight: 400;
+    padding: 13px 32px;
+    text-align: left;
+  }
+
+  td {
+    padding: 8px 20px;
+
+    a {
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

From 9ec37ff483fc6f3e9ceb49676bcf7c8bd3e8cc34 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Sat, 8 Apr 2017 12:59:22 -0600
Subject: [PATCH 2/2] avoid using a table for the guide list

---
 .../pages/guide-list/_guide-list-theme.scss   | 20 ++-----------
 src/app/pages/guide-list/guide-list.html      | 28 +++++------------
 src/app/pages/guide-list/guide-list.scss      | 30 +++----------------
 3 files changed, 14 insertions(+), 64 deletions(-)

diff --git a/src/app/pages/guide-list/_guide-list-theme.scss b/src/app/pages/guide-list/_guide-list-theme.scss
index 61bd35b7e..dbe5eb8fc 100644
--- a/src/app/pages/guide-list/_guide-list-theme.scss
+++ b/src/app/pages/guide-list/_guide-list-theme.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/core/theming/theming';
+@import '~@angular/material/theming';
 
 @mixin guide-list-theme($theme) {
   $primary: map-get($theme, primary);
@@ -7,21 +7,7 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  app-guides {
-
-    .docs-guide-list-item {
-      table {
-        box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
-      }
-
-      th {
-        color: md-color($foreground, secondary-text);
-        background: rgba(md-color($foreground, secondary-text), .03);
-      }
-
-      td a {
-        color: md-color($primary);
-      }
-    }
+  .docs-guide-list .docs-guide-item {
+    color: mat-color($primary);
   }
 }
diff --git a/src/app/pages/guide-list/guide-list.html b/src/app/pages/guide-list/guide-list.html
index 0b613b05a..915304a7d 100644
--- a/src/app/pages/guide-list/guide-list.html
+++ b/src/app/pages/guide-list/guide-list.html
@@ -2,26 +2,12 @@
   <h1>Guides</h1>
 </div>
 
-<md-list class="docs-guide-list-item">
-  <table>
-    <tbody>
-      <tr>
-        <th>Core Guides</th>
-      </tr>
-
-      <tr>
-        <td>
-          <a md-list-item
-             *ngFor="let guide of guideItems.getAllItems()"
-             [routerLink]="['/guide/', guide.id]">
-              {{guide.name}}
-          </a>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
-
-</md-list>
+<md-nav-list class="docs-guide-list">
+  <a md-list-item *ngFor="let guide of guideItems.getAllItems()"
+      class="docs-guide-item"
+      [routerLink]="['/guide/', guide.id]">
+    {{guide.name}}
+  </a>
+</md-nav-list>
 
 <app-footer></app-footer>
diff --git a/src/app/pages/guide-list/guide-list.scss b/src/app/pages/guide-list/guide-list.scss
index daef474d8..e39f0e49a 100644
--- a/src/app/pages/guide-list/guide-list.scss
+++ b/src/app/pages/guide-list/guide-list.scss
@@ -4,33 +4,11 @@
   flex-grow: 1;
 }
 
-.docs-guide-list-item {
+.docs-guide-list {
   margin: 50px;
   flex-grow: 1;
+}
 
-  table {
-    border-collapse: collapse;
-    border-radius: 2px;
-    border-spacing: 0;
-    margin: 0 0 32px 0;
-    width: 100%;
-  }
-
-  table tbody th {
-    font-weight: 400;
-    padding: 13px 32px;
-    text-align: left;
-  }
-
-  td {
-    padding: 8px 20px;
-
-    a {
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
+.docs-guide-item, .docs-guide-item:hover {
+  text-decoration: none;
 }