From 649ece7a0bb499c60128d914d4a439cd3ad8d31f Mon Sep 17 00:00:00 2001
From: Lukas Kimpel <lukas.kimpel@mni.thm.de>
Date: Thu, 15 Mar 2018 11:39:42 +0100
Subject: [PATCH] Adjust template
---
.../comment-list/comment-list.component.html | 64 +++++++++----------
.../comment-list/comment-list.component.scss | 28 +-------
.../create-comment.component.html | 8 ++-
.../create-comment.component.scss | 9 ++-
4 files changed, 47 insertions(+), 62 deletions(-)
diff --git a/src/app/comment-list/comment-list.component.html b/src/app/comment-list/comment-list.component.html
index 40aa567fa..9f891d716 100644
--- a/src/app/comment-list/comment-list.component.html
+++ b/src/app/comment-list/comment-list.component.html
@@ -1,33 +1,31 @@
-<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">
+ <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>
diff --git a/src/app/comment-list/comment-list.component.scss b/src/app/comment-list/comment-list.component.scss
index d35df22ad..55258b9f0 100644
--- a/src/app/comment-list/comment-list.component.scss
+++ b/src/app/comment-list/comment-list.component.scss
@@ -1,29 +1,7 @@
mat-card {
- min-width: 800px;
+ margin: 10px;
}
-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: 16px;
}
diff --git a/src/app/create-comment/create-comment.component.html b/src/app/create-comment/create-comment.component.html
index 8d68d8f90..475acedd3 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" fxFill>
+ <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 46f8310b8..4f2d9ebe5 100644
--- a/src/app/create-comment/create-comment.component.scss
+++ b/src/app/create-comment/create-comment.component.scss
@@ -1,4 +1,11 @@
form {
- min-width: 800px;
+ display: block;
+ width: 100%;
+ max-width: 800px;
margin-bottom: 50px;
}
+
+app-comment-list {
+ width: 100%;
+ max-width: 800px;
+}
--
GitLab