diff options
| author | 杨宇千 <crupest@outlook.com> | 2019-02-19 16:22:07 +0000 |
|---|---|---|
| committer | 杨宇千 <crupest@outlook.com> | 2019-02-19 16:22:07 +0000 |
| commit | 35f8562f1f1db36a42c53ce42c39db3d615deb0f (patch) | |
| tree | 6fe1939721b1f20381225feac75f778f6822a865 /Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html | |
| parent | ddf2848df70c40f443773cd1b76d9db13cd1fa23 (diff) | |
| parent | 5afa4248c5ec67d361a8f75e0ec0f1d12778e266 (diff) | |
| download | timeline-35f8562f1f1db36a42c53ce42c39db3d615deb0f.tar.gz timeline-35f8562f1f1db36a42c53ce42c39db3d615deb0f.tar.bz2 timeline-35f8562f1f1db36a42c53ce42c39db3d615deb0f.zip | |
Merged PR 2: Add sample on todo page.
Add sample on todo page.
Diffstat (limited to 'Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html')
| -rw-r--r-- | Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html | 20 |
1 files changed, 16 insertions, 4 deletions
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> |