Merge pull request #955 from Human-Connection/717-comment-display-and-design

Add basic styling for comment list
This commit is contained in:
Robert Schäfer 2019-07-03 00:48:49 +02:00 committed by GitHub
commit a4dd65ab40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,30 +1,38 @@
<template> <template>
<div v-if="(comment.deleted || comment.disabled) && !isModerator"> <div v-if="(comment.deleted || comment.disabled) && !isModerator" :class="{ comment: true }">
<ds-text style="padding-left: 40px; font-weight: bold;" color="soft"> <ds-card>
<ds-icon name="ban" /> <ds-space margin-bottom="base" />
{{ this.$t('comment.content.unavailable-placeholder') }} <ds-text style="padding-left: 40px; font-weight: bold;" color="soft">
</ds-text> <ds-icon name="ban" />
{{ this.$t('comment.content.unavailable-placeholder') }}
</ds-text>
<ds-space margin-bottom="base" />
</ds-card>
</div> </div>
<div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }"> <div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }">
<ds-space margin-bottom="x-small"> <ds-card>
<hc-user :user="author" :date-time="comment.createdAt" /> <ds-space margin-bottom="small" />
</ds-space> <ds-space margin-bottom="small">
<!-- Content Menu (can open Modals) --> <hc-user :user="author" :date-time="comment.createdAt" />
<no-ssr> </ds-space>
<content-menu <!-- Content Menu (can open Modals) -->
placement="bottom-end" <no-ssr>
resource-type="comment" <content-menu
:resource="comment" placement="bottom-end"
:modalsData="menuModalsData" resource-type="comment"
style="float-right" :resource="comment"
:is-owner="isAuthor(author.id)" :modalsData="menuModalsData"
/> style="float-right"
</no-ssr> :is-owner="isAuthor(author.id)"
<!-- eslint-disable vue/no-v-html --> />
<!-- TODO: replace editor content with tiptap render view --> </no-ssr>
<ds-space margin-bottom="small" /> <!-- eslint-disable vue/no-v-html -->
<div style="padding-left: 40px;" v-html="comment.contentExcerpt" /> <!-- TODO: replace editor content with tiptap render view -->
<!-- eslint-enable vue/no-v-html --> <ds-space margin-bottom="small" />
<div style="padding-left: 40px;" v-html="comment.contentExcerpt" />
<!-- eslint-enable vue/no-v-html -->
<ds-space margin-bottom="x-small" />
</ds-card>
</div> </div>
</template> </template>