From 9ca9f78530ed437a0173157de7c1a5ca54a1486e Mon Sep 17 00:00:00 2001
From: Hagen <hagen.dressler@mni.thm.de>
Date: Thu, 15 Mar 2018 12:33:34 +0100
Subject: [PATCH] Fix html component and style sheet
---
.../comment-list/comment-list.component.html | 66 ++++++++++---------
.../comment-list/comment-list.component.scss | 2 +
.../create-comment.component.html | 2 +-
3 files changed, 38 insertions(+), 32 deletions(-)
diff --git a/src/app/comment-list/comment-list.component.html b/src/app/comment-list/comment-list.component.html
index 9f891d716..e850dbfab 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 55258b9f0..ff7d52066 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 475acedd3..b27e4dff4 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">
--
GitLab