Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -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 comment = props.comment;
const isReply = props.isReply;
const hasReplies = comment.replies && comment.replies.length > 0; const hasReplies = comment.replies && comment.replies.length > 0;
const html = {__html: comment.html}; 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') { if (comment.status !== 'published') {
html.__html = '<i>This comment has been removed.</i>'; html.__html = '<i>This comment has been removed.</i>';
} }
@ -34,7 +46,7 @@ const Comment = (props) => {
); );
} else { } else {
return ( return (
<div className={`flex flex-col ${!hasReplies && 'mb-14'} last:mb-6`}> <div className={`flex flex-col ${commentMarginBottom}`}>
<div> <div>
<div className="flex mb-4 space-x-4 justify-start items-center"> <div className="flex mb-4 space-x-4 justify-start items-center">
<Avatar comment={comment} /> <Avatar comment={comment} />
@ -53,12 +65,12 @@ const Comment = (props) => {
</div> </div>
</div> </div>
{hasReplies && {hasReplies &&
<div className={`ml-14 ${isInReplyMode ? 'mt-8' : 'mt-14'}`}> <div className="ml-14 mt-14">
<Replies comment={comment} /> <Replies comment={comment} />
</div> </div>
} }
{isInReplyMode && {isInReplyMode &&
<div className={`ml-14 mt-8`}> <div className={`ml-14 ${!hasReplies && 'mt-10'}`}>
<ReplyForm parent={comment} toggle={toggleReplyMode} /> <ReplyForm parent={comment} toggle={toggleReplyMode} />
</div> </div>
} }

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

@ -5,7 +5,7 @@ const Replies = (props) => {
return ( return (
<div> <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> </div>
); );
}; };

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

@ -56,7 +56,7 @@ const ReplyForm = (props) => {
}; };
return ( return (
<form onSubmit={submitForm} className="comment-form"> <form onSubmit={submitForm} className="comment-form mb-4">
<div className="w-full"> <div className="w-full">
<div className="flex mb-4 space-x-4 justify-start items-center"> <div className="flex mb-4 space-x-4 justify-start items-center">
<Avatar /> <Avatar />
@ -75,11 +75,11 @@ const ReplyForm = (props) => {
onBlur={handleBlur} onBlur={handleBlur}
placeholder={focused ? '' : 'Reply to this comment'} 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'}`} 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"> type="submit">
Add your reply Add your reply
</button> </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'}`} 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}> disabled={true}>