From a57473f820ffa194394af6d29542ae85d79f2153 Mon Sep 17 00:00:00 2001
From: "John Molakvoæ (skjnldsv)" <skjnldsv@protonmail.com>
Date: Wed, 21 Oct 2020 14:53:56 +0200
Subject: 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(-)

(limited to 'apps/comments')

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;
+		}
 	}
 }
 
-- 
cgit v1.2.3