diff --git a/frontend_nuxt/components/CommentItem.vue b/frontend_nuxt/components/CommentItem.vue index aba727162..03cb6e910 100644 --- a/frontend_nuxt/components/CommentItem.vue +++ b/frontend_nuxt/components/CommentItem.vue @@ -23,9 +23,12 @@ >{{ getMedalTitle(comment.medal) }} - + - {{ comment.parentUserName }} + + + {{ comment.parentUserName }} +
{{ comment.time }}
@@ -250,6 +253,7 @@ const submitReply = async (parentUserName, text, clear) => { medal: data.author.displayMedal, text: data.content, parentUserName: parentUserName, + parentUserAvatar: props.comment.avatar, reactions: [], reply: (data.replies || []).map((r) => ({ id: r.id, @@ -376,7 +380,21 @@ const handleContentClick = (e) => { justify-content: space-between; } +.reply-item, .reply-info { + display: inline-flex; + flex-direction: row; + align-items: center; +} + +.reply-avatar { + width: 20px; + height: 20px; + border-radius: 50%; + margin-right: 5px; +} + .reply-icon { + color: var(--primary-color); margin-right: 10px; margin-left: 10px; opacity: 0.5; diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue index abfece495..d15fc75a1 100644 --- a/frontend_nuxt/pages/posts/[id]/index.vue +++ b/frontend_nuxt/pages/posts/[id]/index.vue @@ -411,7 +411,7 @@ const gatherPostItems = () => { } } -const mapComment = (c, parentUserName = '', level = 0) => ({ +const mapComment = (c, parentUserName = '', parentUserAvatar = '', level = 0) => ({ id: c.id, userName: c.author.username, medal: c.author.displayMedal, @@ -421,11 +421,12 @@ const mapComment = (c, parentUserName = '', level = 0) => ({ text: c.content, reactions: c.reactions || [], pinned: Boolean(c.pinned ?? c.pinnedAt ?? c.pinned_at), - reply: (c.replies || []).map((r) => mapComment(r, c.author.username, level + 1)), + reply: (c.replies || []).map((r) => mapComment(r, c.author.username, c.author.avatar, level + 1)), openReplies: level === 0, src: c.author.avatar, iconClick: () => navigateTo(`/users/${c.author.id}`, { replace: true }), parentUserName: parentUserName, + parentUserAvatar: parentUserAvatar, }) const getTop = (el) => {