From 4df8d27604fef865a023d02a500335999d81f3c6 Mon Sep 17 00:00:00 2001
From: Lukas Haase <lukas.haase@mni.thm.de>
Date: Tue, 5 Oct 2021 15:39:21 +0200
Subject: [PATCH] fix expand button
---
.../shared/comment/comment.component.html | 18 ++++++++----------
.../shared/comment/comment.component.scss | 4 ++++
.../shared/comment/comment.component.ts | 18 ++++++++++--------
3 files changed, 22 insertions(+), 18 deletions(-)
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index 7ded0d2e6..ea2e4385d 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -262,7 +262,7 @@
role="button"
style="width:100%;"
tabindex="0">
- <ars-row #commentBody>
+ <ars-row #commentBody class="commentBody">
<ars-row #commentBodyInner>
<app-view-comment-data class="images" [currentData]="comment.body"></app-view-comment-data>
</ars-row>
@@ -306,17 +306,15 @@
}}">{{comment.score}}</span>
</div>
</div>
- <ars-row #commentExpander
- ars-flex-box
- [height]="37">
- <ars-fill></ars-fill>
- <ars-col>
- <button mat-button
+ <ars-row ars-flex-box #commentExpander>
+ <ars-fill>
+ <button mat-button style="width:100%;"
(click)="toggleExpand($event)"><span class="commentExpanderButton">
- {{ isExpanded ? ('comment-page.show-less' | translate) : ('comment-page.show-more' | translate) }}
- </span></button>
+ {{ isExpanded ? ('comment-page.show-less' | translate) : ('comment-page.show-more' | translate) }}
+ </span></button>
+ </ars-fill>
+ <ars-col [width]="16">
</ars-col>
- <ars-fill></ars-fill>
</ars-row>
<div fxLayout="row"
fxLayoutAlign="start center">
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index f88538849..54210399d 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -285,6 +285,10 @@ mat-card-content > :first-child {
color: var(--on-surface);
}
+.commentBody{
+ transition:height ease-in-out 0.2s;
+}
+
@keyframes upVote {
0% {
transform: scale3d(1, 1, 1);
diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts
index b80a72ead..d5a2f2b06 100644
--- a/src/app/components/shared/comment/comment.component.ts
+++ b/src/app/components/shared/comment/comment.component.ts
@@ -36,7 +36,7 @@ import { UserBonusTokenComponent } from '../../participant/_dialogs/user-bonus-t
export class CommentComponent implements OnInit, AfterViewInit {
- static COMMENT_MAX_HEIGHT = 200;
+ static COMMENT_MAX_HEIGHT = 150;
@Input() comment: Comment;
@Input() moderator: boolean;
@@ -121,13 +121,15 @@ export class CommentComponent implements OnInit, AfterViewInit {
}
ngAfterViewInit(): void {
- this.isExpandable = this.commentBody.getRenderedHeight() > CommentComponent.COMMENT_MAX_HEIGHT;
- if (!this.isExpandable) {
- this.commentExpander.ref.nativeElement.style.display = 'none';
- } else {
- this.commentBody.setPx(CommentComponent.COMMENT_MAX_HEIGHT);
- this.commentBody.setOverflow('hidden');
- }
+ setTimeout(()=>{
+ this.isExpandable = this.commentBody.getRenderedHeight() > CommentComponent.COMMENT_MAX_HEIGHT;
+ if (!this.isExpandable) {
+ this.commentExpander.ref.nativeElement.style.display = 'none';
+ } else {
+ this.commentBody.setPx(CommentComponent.COMMENT_MAX_HEIGHT);
+ this.commentBody.setOverflow('hidden');
+ }
+ });
}
sortKeywords(keywords: SpacyKeyword[]) {
--
GitLab