From e457d569198bcf5b42400e3bf2d30e2c6b60d32b Mon Sep 17 00:00:00 2001
From: Lukas Kimpel <lukas.kimpel@mni.thm.de>
Date: Tue, 20 Mar 2018 13:08:20 +0100
Subject: [PATCH] Fix component layout
---
.../comment-list/comment-list.component.html | 72 ++++++++++---------
.../comment-list/comment-list.component.scss | 6 +-
.../comment-list/comment-list.component.ts | 13 ++--
3 files changed, 45 insertions(+), 46 deletions(-)
diff --git a/src/app/comment-list/comment-list.component.html b/src/app/comment-list/comment-list.component.html
index e850dbfab..79ade9f83 100644
--- a/src/app/comment-list/comment-list.component.html
+++ b/src/app/comment-list/comment-list.component.html
@@ -1,35 +1,37 @@
-<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>
+<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 ff7d52066..54dc90c34 100644
--- a/src/app/comment-list/comment-list.component.scss
+++ b/src/app/comment-list/comment-list.component.scss
@@ -1,9 +1,7 @@
mat-card {
- width: 800px;
- max-width: 100%;
- margin: 10px;
+ margin-bottom: 20px;
}
mat-card-content>:first-child {
- margin-top: 16px;
+ margin-top: 20px;
}
diff --git a/src/app/comment-list/comment-list.component.ts b/src/app/comment-list/comment-list.component.ts
index 0a015a2b0..f952012f1 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() {
--
GitLab