Comments improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-10-01 18:53:42 +02:00
parent 75b3a52077
commit bd581d896e
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
1 changed files with 26 additions and 11 deletions

View File

@ -46,16 +46,17 @@
<br /> <br />
<div v-if="!comment.deletedAt" v-html="comment.text" /> <div v-if="!comment.deletedAt" v-html="comment.text" />
<div v-else>{{ $t("[This comment has been deleted]") }}</div> <div v-else>{{ $t("[This comment has been deleted]") }}</div>
<span class="load-replies" v-if="comment.totalReplies"> <div class="load-replies" v-if="comment.totalReplies">
<span v-if="!showReplies" @click="fetchReplies"> <p v-if="!showReplies" @click="fetchReplies">
{{ <b-icon icon="chevron-down" /><span>{{
$tc("View a reply", comment.totalReplies, { totalReplies: comment.totalReplies }) $tc("View a reply", comment.totalReplies, { totalReplies: comment.totalReplies })
}} }}</span>
</span> </p>
<span v-else-if="comment.totalReplies && showReplies" @click="showReplies = false"> <p v-else-if="comment.totalReplies && showReplies" @click="showReplies = false">
{{ $t("Hide replies") }} <b-icon icon="chevron-up" />
</span> <span>{{ $t("Hide replies") }}</span>
</span> </p>
</div>
</div> </div>
<nav <nav
class="reply-action level is-mobile" class="reply-action level is-mobile"
@ -66,11 +67,15 @@
" "
> >
<div class="level-left"> <div class="level-left">
<span style="cursor: pointer" class="level-item" @click="createReplyToComment(comment)"> <span
style="cursor: pointer"
class="level-item reply-btn"
@click="createReplyToComment(comment)"
>
<span class="icon is-small"> <span class="icon is-small">
<b-icon icon="reply" /> <b-icon icon="reply" />
</span> </span>
{{ $t("Reply") }} <span>{{ $t("Reply") }}</span>
</span> </span>
</div> </div>
</nav> </nav>
@ -397,6 +402,16 @@ form.reply {
.load-replies { .load-replies {
cursor: pointer; cursor: pointer;
& > p > span {
font-weight: bold;
color: $primary;
}
}
.level-item.reply-btn {
font-weight: bold;
color: $primary;
} }
article { article {