From bde00e967d90e8108e473725b189257bf654692d Mon Sep 17 00:00:00 2001
From: Hagen <hagen.dressler@mni.thm.de>
Date: Tue, 13 Mar 2018 10:56:28 +0100
Subject: [PATCH] Edit html and style of comment-list
---
.../comment-list/comment-list.component.html | 28 +++++++-------
.../comment-list/comment-list.component.scss | 37 +++++--------------
2 files changed, 23 insertions(+), 42 deletions(-)
diff --git a/src/app/comment-list/comment-list.component.html b/src/app/comment-list/comment-list.component.html
index 23ceb3301..c7fea105d 100644
--- a/src/app/comment-list/comment-list.component.html
+++ b/src/app/comment-list/comment-list.component.html
@@ -1,22 +1,22 @@
<div fxLayout="row" fxLayoutAlign="center">
<div fxLayout="column" fxLayoutGap="20">
<div *ngFor="let comment of comments">
- <mat-card (click)="setRead(comment)">
+ <mat-card>
<mat-card-content>
- <div class="comment-body">
- <h3>{{comment.subject}}</h3><br>
+ <h3>{{comment.subject}}</h3>
- {{comment.body}}
+ {{comment.body}}
- <div *ngIf="!comment.read" class="not-check-icon" matTooltip="Is not read">
- <i class="material-icons">clear</i>
- </div>
- <div *ngIf="comment.read" class="check-icon" matTooltip="Is read">
- <i class="material-icons">check</i>
- </div>
- <div class="trash-icon" matTooltip="Delete">
- <i class="material-icons" (click)="delete(comment)">delete</i>
- </div>
+ <div class="body-buttons">
+ <button *ngIf="!comment.read" mat-fab color="warn" matTooltip="Is not read" (click)="setRead(comment)">
+ <mat-icon>clear</mat-icon>
+ </button>
+ <button *ngIf="comment.read" mat-fab color="primary" matTooltip="Is read" (click)="setRead(comment)">
+ <mat-icon>check</mat-icon>
+ </button>
+ <button 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>
@@ -27,6 +27,6 @@
</mat-card><br>
</div>
- <button mat-raised-button color="primary" (click)="goBack()">Back</button>
+ <button class="back-button" mat-raised-button color="primary" (click)="goBack()">Back</button>
</div>
</div>
diff --git a/src/app/comment-list/comment-list.component.scss b/src/app/comment-list/comment-list.component.scss
index 78e71021f..45057a771 100644
--- a/src/app/comment-list/comment-list.component.scss
+++ b/src/app/comment-list/comment-list.component.scss
@@ -3,8 +3,8 @@ mat-card {
justify-content: center;
}
-button {
- min-width: 800px;
+mat-card-content {
+ min-height: 100px;
}
mat-card:hover {
@@ -12,37 +12,18 @@ mat-card:hover {
transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 300ms cubic-bezier(.3,0,.2,1);
}
-.not-check-icon {
- color: red;
- position: absolute;
- top: 30%;
- left: 96%;
- border-radius: 50%;
- width: 25px;
- height: 25px;
- background: lightcoral;
+.trash-icon:hover {
+ background: #F44336;
}
-.check-icon {
- color: green;
- position: absolute;
- top: 30%;
- left: 96%;
- border-radius: 50%;
- width: 25px;
- height: 25px;
- background: lightgreen;
+.back-button {
+ min-width: 800px;
}
-.trash-icon {
- color: red;
+.body-buttons {
position: absolute;
- top: 50%;
- left: 96%;
- border-radius: 50%;
- width: 25px;
- height: 25px;
- background: lightcoral;
+ top: 10%;
+ left: 92%;
}
.date {
--
GitLab