From a57473f820ffa194394af6d29542ae85d79f2153 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
<skjnldsv@protonmail.com>
Date: Wed, 21 Oct 2020 14:53:56 +0200
Subject: [PATCH] Hide long messages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
apps/comments/src/components/Comment.vue | 17 ++++++++++++++++-
1 file changed, 16 insertions(+), 1 deletion(-)
diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue
index 42915d84124..8324305873c 100644
--- a/apps/comments/src/components/Comment.vue
+++ b/apps/comments/src/components/Comment.vue
@@ -83,7 +83,11 @@
<!-- Message content -->
<!-- The html is escaped and sanitized before rendering -->
<!-- eslint-disable-next-line vue/no-v-html-->
- <div v-else class="comment__message" v-html="renderedContent" />
+ <div v-else
+ :class="{'comment__message--expanded': expanded}"
+ class="comment__message"
+ @click="onExpand"
+ v-html="renderedContent" />
</div>
</template>
@@ -153,6 +157,7 @@ export default {
data() {
return {
+ expanded: false,
// Only change data locally and update the original
// parent data when the request is sent and resolved
localMessage: '',
@@ -226,6 +231,10 @@ export default {
}
this.onEditComment(this.localMessage.trim())
},
+
+ onExpand() {
+ this.expanded = true
+ },
},
}
@@ -297,6 +306,12 @@ $comment-padding: 10px;
&__message {
white-space: pre-wrap;
word-break: break-word;
+ max-height: 70px;
+ overflow: hidden;
+ &--expanded {
+ max-height: none;
+ overflow: visible;
+ }
}
}
--
GitLab