From 5afa4248c5ec67d361a8f75e0ec0f1d12778e266 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 20 Feb 2019 00:12:18 +0800
Subject: Add sample on todo page.

---
 .../app/todo-list-page/todo-list-page.component.html | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

(limited to 'Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html')

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 3a80e4eb..ce6eb2ed 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,9 +1,21 @@
 <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 *ngFor="let item of items; let i = index" style="height:unset;">
+    <div class="item-box" [class.first-item-box]="i === 0">
+      <mat-card [class.align-self-bottom]="i === 0">
+        <span class="item-id" [class.item-id-closed]="item.closed"
+          [class.item-id-open]="!item.closed">{{item.id}}</span>
+        {{item.title}}
+      </mat-card>
+      <div class="sample-box" *ngIf="i === 0">
+          <div class="mat-caption">
+            <span class="item-id-sample item-id-open"></span> means working now.
+          </div>
+          <div class="mat-caption">
+            <span class="item-id-sample item-id-closed"></span> means completed.
+          </div>
+        </div>
+    </div>
   </mat-list-item>
 </mat-list>
-- 
cgit v1.2.3