TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-27 18:52:14 +03:00
Code Issues Projects Releases Wiki 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"
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="flex-0 mb-4">
<Avatar comment={comment} saturation={avatarSaturation} isBlank={isNotPublished} />
</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 className="grow">
<div className="flex items-start -mt-[3px] mb-2">
@ -128,7 +128,7 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
)}
{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} />
</div>
}

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

@ -7,7 +7,7 @@ const RepliesPagination = (props) => {
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}>
<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>
);
};