Beautify the todo page.

3 files changed, 19 insertions, 5 deletions

diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
index e69de29b..43bd26d8 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
@@ -0,0 +1,8 @@
+.item-id {
+  display: inline-block;
+  text-align: center;
+  background: skyblue;
+  border-radius: 0.2rem;
+  width: 1.2rem;
+  height: 1.2rem;
+}
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
index 6287c14e..3a80e4eb 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
@@ -1,3 +1,9 @@
-<p *ngFor="let item of items">
-  {{item}}
-</p>
+<mat-progress-bar *ngIf="!items" mode="indeterminate"></mat-progress-bar>
+
+<mat-list>
+  <mat-list-item *ngFor="let item of items">
+    <mat-card>
+        <span class="item-id">{{item.id}}</span> {{item.title}}
+    </mat-card>
+  </mat-list-item>
+</mat-list>
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
index 6037e1ea..722ecbdc 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { TodoListService } from '../todo-list.service';
+import { TodoListService, WorkItem } from '../todo-list.service';
 
 @Component({
   selector: 'app-todo-list-page',
@@ -8,7 +8,7 @@ import { TodoListService } from '../todo-list.service';
 })
 export class TodoListPageComponent implements OnInit {
 
-  items: string[];
+  items: WorkItem[];
 
   constructor(private todoService: TodoListService) {
     todoService.getWorkItemList().subscribe(result => this.items = result);