Merge pull request #1649 from Human-Connection/improve-comments-styling

Fix bug where short comments scrub links
This commit is contained in:
Wolfgang Huß 2019-09-21 13:20:51 +02:00 committed by GitHub
commit ff933f7503
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -27,8 +27,6 @@
/> />
</client-only> </client-only>
</ds-space> </ds-space>
<ds-space margin-bottom="small" />
<div v-if="openEditCommentMenu"> <div v-if="openEditCommentMenu">
<hc-comment-form <hc-comment-form
:update="true" :update="true"
@ -40,12 +38,12 @@
</div> </div>
<div v-show="!openEditCommentMenu"> <div v-show="!openEditCommentMenu">
<content-viewer <content-viewer
v-if="comment.content.length < 180" v-if="comment.content.length < 400"
:content="comment.content" :content="comment.content"
class="padding-left" class="padding-left"
/> />
<div <div
v-show="comment.content !== comment.contentExcerpt && comment.content.length > 180" v-show="comment.content !== comment.contentExcerpt && comment.content.length > 400"
class="show-more-or-less-div" class="show-more-or-less-div"
> >
<content-viewer <content-viewer
@ -59,7 +57,11 @@
</a> </a>
</span> </span>
</div> </div>
<content-viewer v-if="!isCollapsed" :content="comment.content" class="padding-left" /> <content-viewer
v-if="!isCollapsed"
:content="comment.content"
class="padding-left text-align-left"
/>
<div class="show-more-or-less-div"> <div class="show-more-or-less-div">
<span class="show-more-or-less"> <span class="show-more-or-less">
<a v-if="!isCollapsed" @click="isCollapsed = !isCollapsed" class="padding-left"> <a v-if="!isCollapsed" @click="isCollapsed = !isCollapsed" class="padding-left">
@ -180,12 +182,11 @@ export default {
div.show-more-or-less-div { div.show-more-or-less-div {
text-align: right; text-align: right;
margin-right: 20px; margin-right: 20px;
margin-top: -12px;
} }
span.show-more-or-less { span.show-more-or-less {
display: block; display: block;
margin: 10px 20px; margin: 0px 20px;
cursor: pointer; cursor: pointer;
} }
</style> </style>