Add basic styling for comment list

This commit is contained in:
Matt Rider 2019-07-02 19:14:18 -03:00
parent db3221cec6
commit 2407f0b0d1

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>