diff --git a/src/app/comment-list/comment-list.component.html b/src/app/comment-list/comment-list.component.html
index 40aa567fa57c3d910a6e52b3ec515eaef5617384..79ade9f83af464774ab782a49b871ec9917f8937 100644
--- a/src/app/comment-list/comment-list.component.html
+++ b/src/app/comment-list/comment-list.component.html
@@ -1,33 +1,37 @@
-<div fxLayout="row" fxLayoutAlign="center">
- <div fxLayout="column" fxLayoutGap="20px">
- <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
- <div *ngFor="let comment of comments">
- <mat-card>
- <mat-card-content>
- <h3>{{comment.subject}}</h3>
-
- {{comment.body}}
-
- <div class="body-buttons">
- <button *ngIf="!comment.read" mat-fab color="warn" matTooltip="Is not read" (click)="userRole === userRoleTemp && setRead(comment)">
- <mat-icon>clear</mat-icon>
- </button>
- <button *ngIf="comment.read" mat-fab color="primary" matTooltip="Is read" (click)="userRole === userRoleTemp && setRead(comment)">
- <mat-icon>check</mat-icon>
- </button>
- <button *ngIf="userRole === userRoleTemp" class="trash-icon" mat-fab color="primary" matTooltip="Delete" (click)="delete(comment)">
- <mat-icon>delete</mat-icon>
- </button>
- </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 *ngIf="userRole === userRoleTemp" mat-raised-button color="primary" (click)="goBack()">Back</button>
- </div>
-</div>
+<mat-card *ngFor="let comment of comments">
+ <mat-card-header>
+ <mat-card-title>{{comment.subject}}</mat-card-title>
+ <mat-card-subtitle>
+ <span class="mat-caption">Submitted on {{ comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' }}</span>
+ </mat-card-subtitle>
+ </mat-card-header>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <p>{{comment.body}}</p>
+ </mat-card-content>
+ <mat-divider></mat-divider>
+ <mat-card-actions *ngIf="userRole === userRoleTemp">
+ <button mat-icon-button *ngIf="comment.read" color="primary" matTooltip="Mark as read"
+ (click)="setRead(comment)">
+ <mat-icon>speaker_notes</mat-icon>
+ </button>
+ <button mat-icon-button *ngIf="!comment.read" color="warn" matTooltip="Mark as unread"
+ (click)="setRead(comment)">
+ <mat-icon>speaker_notes_off</mat-icon>
+ </button>
+ <button mat-icon-button color="warn" matTooltip="Delete comment"
+ (click)="delete(comment)">
+ <mat-icon>delete</mat-icon>
+ </button>
+ </mat-card-actions>
+ <mat-card-actions *ngIf="userRole !== userRoleTemp">
+ <button mat-icon-button *ngIf="comment.read" color="primary" matTooltip="Mark as read"
+ (click)="setRead(comment)" disabled>
+ <mat-icon>speaker_notes</mat-icon>
+ </button>
+ <button mat-icon-button *ngIf="!comment.read" color="warn" matTooltip="Mark as unread"
+ (click)="setRead(comment)" disabled>
+ <mat-icon>speaker_notes_off</mat-icon>
+ </button>
+ </mat-card-actions>
+</mat-card>
diff --git a/src/app/comment-list/comment-list.component.scss b/src/app/comment-list/comment-list.component.scss
index 0d4877e4dc4ae6d404ac0687f79aa18ea06898c2..54dc90c341033023d58d89f8c1089584866fb5c3 100644
--- a/src/app/comment-list/comment-list.component.scss
+++ b/src/app/comment-list/comment-list.component.scss
@@ -1,30 +1,7 @@
mat-card {
- min-width: 800px;
- justify-content: center;
+ margin-bottom: 20px;
}
-mat-card-content {
- min-height: 100px;
-}
-
-mat-card:hover {
- box-shadow: 0 6px 6px 6px rgba(0,0,0,.2), 0 6px 6px 0 rgba(0,0,0,.14), 0 6px 6px 0 rgba(0,0,0,.12) !important;
- transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 300ms cubic-bezier(.3,0,.2,1);
-}
-
-.trash-icon:hover {
- background: #F44336;
-}
-
-.body-buttons {
- position: absolute;
- top: 10%;
- left: 92%;
-}
-
-.date {
- text-align: right;
- font-size: 80%;
- margin-right: 10px;
- margin-bottom: 3px;
+mat-card-content>:first-child {
+ margin-top: 20px;
}
diff --git a/src/app/comment-list/comment-list.component.ts b/src/app/comment-list/comment-list.component.ts
index 0a015a2b0a3da0f3fe242a85d93c0cfd36b4c43d..f952012f1d8438bcc30b938c4e4750a36a8f7768 100644
--- a/src/app/comment-list/comment-list.component.ts
+++ b/src/app/comment-list/comment-list.component.ts
@@ -21,13 +21,12 @@ export class CommentListComponent implements OnInit {
comments: Comment[];
isLoading = true;
- constructor(
- protected authenticationService: AuthenticationService,
- private route: ActivatedRoute,
- private roomService: RoomService,
- private location: Location,
- private commentService: CommentService,
- private notification: NotificationService) {
+ constructor(protected authenticationService: AuthenticationService,
+ private route: ActivatedRoute,
+ private roomService: RoomService,
+ private location: Location,
+ private commentService: CommentService,
+ private notification: NotificationService) {
}
ngOnInit() {
diff --git a/src/app/create-comment/create-comment.component.html b/src/app/create-comment/create-comment.component.html
index 8d68d8f90fdbea5f7dffd87b577218ad3a0421af..b27e4dff450a58ea11a6b3290b849b58a1e881c0 100644
--- a/src/app/create-comment/create-comment.component.html
+++ b/src/app/create-comment/create-comment.component.html
@@ -1,5 +1,5 @@
-<div fxLayout="row" fxLayoutAlign="center">
- <div fxLayout="column" fxLayoutGap="20">
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
+ <div fxLayout="row" fxLayoutAlign="center">
<form>
<mat-form-field class="input-block">
<input matInput #commentSubject type="text" maxlength="24" placeholder="Choose a title">
@@ -13,6 +13,8 @@
<button mat-raised-button color="primary" (click)="send(commentSubject.value, commentBody.value)">Send</button>
</form>
</div>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <app-comment-list></app-comment-list>
+ </div>
</div>
-<app-comment-list></app-comment-list>
diff --git a/src/app/create-comment/create-comment.component.scss b/src/app/create-comment/create-comment.component.scss
index 086556915ce665c4afe7ea59451348bd45a53ed2..4f2d9ebe54123d95a7e61e3dc185d7c3b2213e67 100644
--- a/src/app/create-comment/create-comment.component.scss
+++ b/src/app/create-comment/create-comment.component.scss
@@ -1,5 +1,11 @@
form {
- min-width: 800px;
- justify-content: center;
+ display: block;
+ width: 100%;
+ max-width: 800px;
margin-bottom: 50px;
}
+
+app-comment-list {
+ width: 100%;
+ max-width: 800px;
+}