From 191dc4285756c66a0588e1a033842e1fbd53afab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Fri, 22 Mar 2019 00:29:59 +0100
Subject: [PATCH] Fix comment view
---
.../shared/comment/comment.component.html | 31 +++++++++----------
.../shared/comment/comment.component.scss | 20 ++++++++++--
2 files changed, 33 insertions(+), 18 deletions(-)
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index 461683546..a517917a9 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -1,26 +1,25 @@
<mat-card class="card-container">
<div fxLayout="row" fxLayoutAlign="center center">
- <div *ngIf="comment.createdFromLecturer !== false" mat-card-avatar class="proffesor-icon" matTooltip="created from lecturer"><mat-icon>record_voice_over</mat-icon></div>
- <mat-card-content>
- <p (click)="openPresentDialog(comment.body)">{{comment.body}}</p>
- </mat-card-content>
+ <div fxLayout="column">
+ <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
+ <mat-icon [ngClass]="{true : 'correct-icon', false: 'incorrect-icon'}[comment.correct]">check_circle</mat-icon>
+ </button>
+ <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent" (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
+ <mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-favorite-icon'}[comment.favorite]">star</mat-icon>
+ </button>
+ <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)" [matTooltip]="comment.read ? 'Mark as unread' : 'Mark as read'">
+ <mat-icon [ngClass]="{true: 'read-icon', false: 'unread-icon'}[comment.read]">visibility</mat-icon>
+ </button>
+ </div>
+ <div class="body" (click)="openPresentDialog(comment.body)">{{comment.body}}</div>
<span class="fill-remaining-space"></span>
- <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
- <mat-icon [ngClass]="{true : 'correct-icon', false: 'incorrect-icon'}[comment.correct]">check_circle</mat-icon>
- </button>
- <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent" (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
- <mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-favorite-icon'}[comment.favorite]">star</mat-icon>
- </button>
- <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)" [matTooltip]="comment.read ? 'Mark as unread' : 'Mark as read'">
- <mat-icon [ngClass]="{true: 'read-icon', false: 'unread-icon'}[comment.read]">visibility</mat-icon>
- </button>
<div fxLayout="column">
<button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)">
- <mat-icon>keyboard_arrow_up</mat-icon>
+ <mat-icon class="voting-icon">keyboard_arrow_up</mat-icon>
</button>
- <h3>{{comment.score}}</h3>
+ <h2>{{comment.score}}</h2>
<button mat-icon-button [disabled]="!isStudent" (click)="voteDown(comment)">
- <mat-icon>keyboard_arrow_down</mat-icon>
+ <mat-icon class="voting-icon">keyboard_arrow_down</mat-icon>
</button>
</div>
</div>
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index 7430c26ca..b0e94796f 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -14,6 +14,13 @@ mat-toolbar {
background-color: #bbdefb;
}
+.voting-icon {
+ width: 100%;
+ height: 100%;
+ font-size: 35px;
+ line-height: 100%!important;
+}
+
.incorrect-icon {
color: #c8e6c9;
}
@@ -44,8 +51,17 @@ mat-toolbar {
margin-top: 10px;
}
-
-h3 {
+h2 {
text-align: center;
margin: 0;
}
+
+.body {
+ min-width: 200px;
+ min-height: 100px;
+ text-align: start;
+ font-size: large;
+ max-height: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
--
GitLab