Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Quick visual fixes for replies

Browse source
This commit is contained in:
James Morris 2022-07-07 12:34:09 +02:00
parent e582f8723a
commit 6948b1222b
3 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
apps/comments-ui/src/components/Comment.js
View file

@ -21,9 +21,21 @@ const Comment = (props) => {
};
const comment = props.comment;
const isReply = props.isReply;
const hasReplies = comment.replies && comment.replies.length > 0;
const html = {__html: comment.html};
let commentMarginBottom;
if (!hasReplies) {
commentMarginBottom = 'mb-10';
}
if (hasReplies) {
commentMarginBottom = 'mb-4';
}
if (isReply) {
commentMarginBottom = 'mb-10';
}
if (comment.status !== 'published') {
html.__html = '<i>This comment has been removed.</i>';
}
@ -34,7 +46,7 @@ const Comment = (props) => {
);
} else {
return (
<div className={`flex flex-col ${!hasReplies && 'mb-14'} last:mb-6`}>
<div className={`flex flex-col ${commentMarginBottom}`}>
<div>
<div className="flex mb-4 space-x-4 justify-start items-center">
<Avatar comment={comment} />
@ -53,12 +65,12 @@ const Comment = (props) => {
</div>
</div>
{hasReplies &&
<div className={`ml-14 ${isInReplyMode ? 'mt-8' : 'mt-14'}`}>
<div className="ml-14 mt-14">
<Replies comment={comment} />
</div>
}
{isInReplyMode &&
<div className={`ml-14 mt-8`}>
<div className={`ml-14 ${!hasReplies && 'mt-10'}`}>
<ReplyForm parent={comment} toggle={toggleReplyMode} />
</div>
}

2
apps/comments-ui/src/components/Replies.js
View file

@ -5,7 +5,7 @@ const Replies = (props) => {
return (
<div>
{comment.replies.map((reply => <Comment comment={reply} parent={comment} key={reply.id} />))}
{comment.replies.map((reply => <Comment comment={reply} parent={comment} key={reply.id} isReply={true} />))}
</div>
);
};

6
apps/comments-ui/src/components/ReplyForm.js
View file

@ -56,7 +56,7 @@ const ReplyForm = (props) => {
};
return (
<form onSubmit={submitForm} className="comment-form">
<form onSubmit={submitForm} className="comment-form mb-4">
<div className="w-full">
<div className="flex mb-4 space-x-4 justify-start items-center">
<Avatar />
@ -75,11 +75,11 @@ const ReplyForm = (props) => {
onBlur={handleBlur}
placeholder={focused ? '' : 'Reply to this comment'}
/>
<button
{focused && <button
className={`transition-[opacity] duration-150 rounded-md border py-2 px-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800 ${focused ? 'opacity-100' : 'opacity-0'}`}
type="submit">
Add your reply
</button>
</button>}
<button
className={`transition-[opacity] duration-100 absolute top-2 right-2 rounded-md border py-1 px-2 font-sans text-sm text-center bg-black font-semibold text-white pointer-events-none dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800 ${focused ? 'opacity-0' : 'opacity-100'}`}
disabled={true}>