Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Adding in a subtle border for the comments when it has replies

Browse source 
refs https://github.com/TryGhost/Team/issues/1777
This commit is contained in:
James Morris 2022-08-11 11:54:28 +01:00
parent 9a306a2db2
commit 5e8ebe44b8
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -86,12 +86,12 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className={`flex flex-row w-full ${hasReplies ? 'mb-2 sm:mb-2' : 'mb-6 sm:mb-10'}`}> <div className={`flex flex-row w-full ${hasReplies ? 'mb-0' : 'mb-10'}`}>
<div className="mr-3 flex flex-col justify-start items-center"> <div className="mr-3 flex flex-col justify-start items-center">
<div className="flex-0 mb-4"> <div className="flex-0 mb-4">
<Avatar comment={comment} saturation={avatarSaturation} isBlank={isNotPublished} /> <Avatar comment={comment} saturation={avatarSaturation} isBlank={isNotPublished} />
</div> </div>
{/* {!props.isReply && <div className="w-[3px] h-full bg-gradient-to-b from-neutral-100 via-neutral-100 to-transparent grow rounded" />} */} {!props.isReply && hasReplies && <div className="w-[3px] h-full mb-2 bg-gradient-to-b from-neutral-100 via-neutral-100 to-transparent grow rounded" />}
</div> </div>
<div className="grow"> <div className="grow">
<div className="flex items-start -mt-[3px] mb-2"> <div className="flex items-start -mt-[3px] mb-2">
@ -128,7 +128,7 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
)} )}
{hasReplies && {hasReplies &&
<div className="mt-8 sm:mt-10 mb-4 sm:mb-0"> <div className="mt-10 mb-4 sm:mb-0">
<Replies comment={comment} /> <Replies comment={comment} />
</div> </div>
} }

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

@ -7,7 +7,7 @@ const RepliesPagination = (props) => {
return ( return (
<button className="group w-full text-neutral-700 font-semibold mt-10 sm:mt-0 mb-10 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}> <button className="group w-full text-neutral-700 font-semibold mt-10 sm:mt-0 mb-10 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}>
<span className="whitespace-nowrap mr-4">↓ Show {count} more replies</span> <span className="whitespace-nowrap mr-4">↓ Show {count} more replies</span>
<span className="transition-[background-color] duration-200 ease-out inline-block w-full bg-neutral-100 dark:bg-[rgba(255,255,255,0.08)] group-hover:bg-neutral-200 rounded h-[2px] mt-[3px]" /> {/* <span className="transition-[background-color] duration-200 ease-out inline-block w-full bg-neutral-100 dark:bg-[rgba(255,255,255,0.08)] group-hover:bg-neutral-200 rounded h-[2px] mt-[3px]" /> */}
</button> </button>
); );
}; };