diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2020-10-21 15:53:56 +0300 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2020-10-28 12:26:08 +0300 |
commit | a57473f820ffa194394af6d29542ae85d79f2153 (patch) | |
tree | d8345369d50a4f63d621d7f73031adf5f61879b8 /apps/comments/src | |
parent | cf43b70db6332e02a85fe9d358f5ac68cd88db70 (diff) |
Hide long messages
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'apps/comments/src')
-rw-r--r-- | apps/comments/src/components/Comment.vue | 17 |
1 files changed, 16 insertions, 1 deletions
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; + } } } |