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