diff options
Diffstat (limited to 'Timeline/ClientApp/src/app/todo-list-page')
4 files changed, 23 insertions, 34 deletions
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css new file mode 100644 index 00000000..5e0d4ba9 --- /dev/null +++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css @@ -0,0 +1,7 @@ +.color-block-open { + background: red; +} + +.color-block-closed { + background: green; +} 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 ed260d5c..754b786e 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 @@ -5,29 +5,20 @@ .item-box { display: flex; width: 100%; - padding: 5px; box-sizing: border-box; } .first-item-box { justify-content: space-between; + padding: 0 0 5px 5px; } -.item-card { - display: flex; - align-items: center; -} - -.item-img { - padding: 1px; - background: white; - border-radius: 3px; +.non-first-item-box { + padding: 5px; } -.item-title { - padding-left: 5px; - color: black; - text-decoration: none; +.space { + flex: 1 4 20px; } .sample-box { @@ -35,7 +26,7 @@ align-self: flex-start; } -.sample-container { +.sample-item { display: flex; align-items: center; } @@ -46,11 +37,3 @@ height: 1em; margin-right: 2px; } - -.sample-color-block-open { - background: tomato; -} - -.sample-color-block-closed { - background: mediumspringgreen; -} 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 0dcc8a94..3b4809ae 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 @@ -2,18 +2,17 @@ <mat-list> <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="mat-elevation-z2 item-card" [style.background]="item.closed ? 'mediumspringgreen' : 'tomato'" - [class.align-self-bottom]="i === 0"> - <img class="item-img" width="18" height="18" [src]="item.iconUrl"> - <a class="mat-h3 item-title" [href]="item.detailUrl">{{item.id}} {{item.title}}</a> - </mat-card> + <div class="item-box" [class.first-item-box]="i === 0" [class.non-first-item-box]="i !== 0"> + <app-todo-item [class.align-self-bottom]="i === 0" [item]="item"></app-todo-item> + <div class="space"></div> <div class="sample-box" *ngIf="i === 0"> - <div class="mat-caption sample-container"> - <span class="sample-color-block sample-color-block-open"></span> means working now. + <div class="mat-caption sample-item"> + <span class="sample-color-block color-block-open"></span> + <span> means working now.</span> </div> - <div class="mat-caption sample-container"> - <span class="sample-color-block sample-color-block-closed"></span> means completed. + <div class="mat-caption sample-item"> + <span class="sample-color-block color-block-closed"></span> + <span> means completed.</span> </div> <div class="mat-caption">click on item to see details.</div> </div> 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 06f49923..e58cca7d 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 @@ -4,7 +4,7 @@ import { TodoListService, WorkItem } from './todo-list.service'; @Component({ selector: 'app-todo-list-page', templateUrl: './todo-list-page.component.html', - styleUrls: ['./todo-list-page.component.css'] + styleUrls: ['./todo-list-page.component.css', './todo-list-color-block.css'] }) export class TodoListPageComponent implements OnInit { |