diff --git a/src/client/i18n/cn.json b/src/client/i18n/cn.json index 308a2fc..17f8b70 100644 --- a/src/client/i18n/cn.json +++ b/src/client/i18n/cn.json @@ -19,6 +19,7 @@ "pleaseLogin": "请登录后再使用管理员邮箱评论", "sendError": "评论失败~", "more": "更多评论", + "moreCommentsChild": "展开剩余的$counter条回复评论", "notComments": "没有评论", "commentsAudit": "您的评论可能需要通过审核后才能显示", "commentsError": "获取评论失败~", diff --git a/src/client/i18n/en.json b/src/client/i18n/en.json index 836535f..503caa5 100644 --- a/src/client/i18n/en.json +++ b/src/client/i18n/en.json @@ -19,6 +19,7 @@ "pleaseLogin": "Please log in and then use the admin email to comment", "sendError": "Comment failed~", "more": "More", + "moreCommentsChild": "Expand the remaining $counter reply comments", "notComments": "Not Comments", "commentsAudit": "Your comment may need to be moderated before it can be displayed", "commentsError": "Failed to get comments~", diff --git a/src/client/view/comment.svelte b/src/client/view/comment.svelte index 39302ca..012c204 100644 --- a/src/client/view/comment.svelte +++ b/src/client/view/comment.svelte @@ -86,7 +86,7 @@ {#if replying === comment.id} {/if} - {#if comment.replys} + {#if comment.replys && comment.replys.length}
@@ -96,7 +96,29 @@ child: on:onReply -> comment.svelte -> comments.svelte --> - + + {#if !comment.isMore && comment.replys.length > 3} + +
{ + comment.isMore = true + }} + > + {translate('moreCommentsChild').replace('$counter', comment.replys.length - 3)} + +
+ {/if}
{/if} @@ -112,7 +134,7 @@ .D-comments { margin-top: 20px; position: relative; - padding: 15px 15px 6px; + padding: 15px; border-radius: 10px; border: solid 1px var(--D-Low-Color); @@ -136,7 +158,7 @@ border: 0; border-radius: 0; margin-left: 40px; - padding: 15px 0 10px; + padding-top: 15px; border-top: dashed 1px var(--D-Low-Color); } @@ -150,6 +172,32 @@ } } + .D-comments-child-more { + cursor: pointer; + color: #818181; + margin-left: 40px; + padding-left: 30px; + font-size: 12px; + position: relative; + + &::after { + content: ''; + top: 50%; + left: 0; + width: 26px; + height: 1px; + position: absolute; + background: rgba(129, 129, 129, 0.5); + } + + svg { + width: 13px; + height: 13px; + fill: currentColor; + vertical-align: middle; + } + } + .D-headers { display: flex; align-items: center;