From eb196830587df51e5084dbd52f05de6b573820e6 Mon Sep 17 00:00:00 2001
From: Hagen <hagen.dressler@mni.thm.de>
Date: Mon, 12 Mar 2018 12:47:45 +0100
Subject: [PATCH] Edit html template and css style
---
.../comment-list/comment-list.component.html | 48 +++++++++++--------
.../comment-list/comment-list.component.scss | 38 ++++++++++++++-
2 files changed, 65 insertions(+), 21 deletions(-)
diff --git a/src/app/comment-list/comment-list.component.html b/src/app/comment-list/comment-list.component.html
index ade843312..236a706de 100644
--- a/src/app/comment-list/comment-list.component.html
+++ b/src/app/comment-list/comment-list.component.html
@@ -1,24 +1,32 @@
-<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10">
- <div *ngFor="let comment of comments">
- <mat-card>
- <mat-card-content>
- <div class="comment-body">
- <h3>{{comment.subject}}</h3><br>
+<div fxLayout="row" fxLayoutAlign="center">
+ <div fxLayout="column" fxLayoutGap="20">
+ <div *ngFor="let comment of comments">
+ <mat-card>
+ <mat-card-content>
+ <div class="comment-body">
+ <h3>{{comment.subject}}</h3><br>
- {{comment.body}}
+ {{comment.body}}
- <div class="trash-icon">
- <i class="material-icons" (click)="delete(comment)">delete</i>
- </div>
- </div>
- </mat-card-content>
- <mat-card-footer>
- <div class="date">
- <i> Submitted on {{comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' : format}} </i>
- </div>
- </mat-card-footer>
- </mat-card><br>
+ <div *ngIf="!comment.read" class="not-check-icon" matTooltip="Is not read">
+ <i class="material-icons">clear</i>
+ </div>
+ <div *ngIf="comment.read" class="check-icon" matTooltip="Is read">
+ <i class="material-icons">check</i>
+ </div>
+ <div class="trash-icon" matTooltip="Delete">
+ <i class="material-icons" (click)="delete(comment)">delete</i>
+ </div>
+ </div>
+ </mat-card-content>
+ <mat-card-footer>
+ <div class="date">
+ <i> Submitted on {{comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' : format}} </i>
+ </div>
+ </mat-card-footer>
+ </mat-card><br>
+ </div>
+
+ <button mat-raised-button color="primary" (click)="goBack()">Back</button>
</div>
</div>
-
-<button mat-raised-button color="primary" (click)="goBack()">Back</button>
diff --git a/src/app/comment-list/comment-list.component.scss b/src/app/comment-list/comment-list.component.scss
index 22a513126..54979bf2f 100644
--- a/src/app/comment-list/comment-list.component.scss
+++ b/src/app/comment-list/comment-list.component.scss
@@ -1,7 +1,43 @@
+mat-card {
+ min-width: 800px;
+ justify-content: center;
+}
+
+button {
+ min-width: 800px;
+}
+
+.not-check-icon {
+ color: red;
+ position: absolute;
+ top: 30%;
+ left: 96%;
+ border-radius: 50%;
+ width: 25px;
+ height: 25px;
+ background: lightcoral;
+}
+
+.check-icon {
+ color: green;
+ position: absolute;
+ top: 30%;
+ left: 96%;
+ border-radius: 50%;
+ width: 25px;
+ height: 25px;
+ background: lightgreen;
+}
+
.trash-icon {
+ color: red;
position: absolute;
top: 50%;
- left: 98%;
+ left: 96%;
+ border-radius: 50%;
+ width: 25px;
+ height: 25px;
+ background: lightcoral;
}
.date {
--
GitLab