diff --git a/src/app/comment-list/comment-list.component.html b/src/app/comment-list/comment-list.component.html index 9f891d7168093d986a3138c2fb54be373da52f1f..e850dbfab58ca3cf6a88a78a4c391bb2689d79db 100644 --- a/src/app/comment-list/comment-list.component.html +++ b/src/app/comment-list/comment-list.component.html @@ -1,31 +1,35 @@ -<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"> - <mat-icon *ngIf="comment.read" color="primary" matTooltip="Comment was read">speaker_notes</mat-icon> - <mat-icon *ngIf="!comment.read" color="warn" matTooltip="Comment was not read">speaker_notes_off</mat-icon> - </mat-card-actions> -</mat-card> +<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center"> + <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"> + <mat-icon *ngIf="comment.read" color="primary" matTooltip="Comment was read">speaker_notes</mat-icon> + <mat-icon *ngIf="!comment.read" color="warn" matTooltip="Comment was not read">speaker_notes_off</mat-icon> + </mat-card-actions> + </mat-card> + </div> +</div> diff --git a/src/app/comment-list/comment-list.component.scss b/src/app/comment-list/comment-list.component.scss index 55258b9f0515d7888cbae6a012903bf329ee5665..ff7d52066dd1469b56ca4550797c6eb8fd2dc357 100644 --- a/src/app/comment-list/comment-list.component.scss +++ b/src/app/comment-list/comment-list.component.scss @@ -1,4 +1,6 @@ mat-card { + width: 800px; + max-width: 100%; margin: 10px; } diff --git a/src/app/create-comment/create-comment.component.html b/src/app/create-comment/create-comment.component.html index 475acedd36877b84beb93e4bdc16f95d3ed8b52b..b27e4dff450a58ea11a6b3290b849b58a1e881c0 100644 --- a/src/app/create-comment/create-comment.component.html +++ b/src/app/create-comment/create-comment.component.html @@ -1,4 +1,4 @@ -<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill> +<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px"> <div fxLayout="row" fxLayoutAlign="center"> <form> <mat-form-field class="input-block">