Hide long messages

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2020-10-21 14:53:56 +02:00
parent cf43b70db6
commit a57473f820
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
1 changed files with 16 additions and 1 deletions

View File

@ -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;
}
}
}