fix(categories): make list items anchors like component list items (a…

…ngular#224)
andrewseguin · Aug 29, 2017 · 35659f7 · 35659f7
1 parent a64482f
commit 35659f7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/app/pages/component-category-list/component-category-list.html b/src/app/pages/component-category-list/component-category-list.html
@@ -1,9 +1,10 @@
 <div class="docs-component-category-list">
-  <md-card
-      *ngFor="let category of docItems.getItemsInCategories()"
-      class="docs-component-category-list-card"
-      [routerLink]="['/categories/', category.id]">
-    <md-card-title>{{category.name}}</md-card-title>
-    <p class="docs-component-category-list-card-summary">{{category.summary}}</p>
-  </md-card>
+  <a *ngFor="let category of docItems.getItemsInCategories()"
+    class="docs-component-category-list-item"
+    [routerLink]="['/categories/', category.id]">
+    <md-card class="docs-component-category-list-card">
+      <md-card-title>{{category.name}}</md-card-title>
+      <p class="docs-component-category-list-card-summary">{{category.summary}}</p>
+    </md-card>
+  </a>
 </div>
diff --git a/src/app/pages/component-category-list/component-category-list.scss b/src/app/pages/component-category-list/component-category-list.scss
@@ -10,8 +10,7 @@
   }
 }
 
-.docs-component-category-list-card {
-  cursor: pointer;
+.docs-component-category-list-item {
   display: inline-block;
   margin: 20px;
   vertical-align: top;
@@ -20,6 +19,10 @@
   .mat-card-title {
     font-size: 20px;
   }
+
+  &, &:active, &:hover, &:focus {
+    text-decoration: none;
+  }
 }
 
 .docs-component-category-list-card-summary {