mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
Changed the markup layout of the comments to fix a positoning problem when expertise is too long on mobile
- When the Expertise is too long, it can cause a broken look to comments on mobile - Changed how the markup works to better handle the details
This commit is contained in:
James Morris
parent
0cf0c5833a
commit
ba8df169ad
3 changed files with 27 additions and 22 deletions
|
|
@ -86,19 +86,22 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className={`flex flex-row ${hasReplies ? 'mb-2 sm:mb-4' : 'mb-6 sm:mb-10'}`}>
|
||||
<div>
|
||||
<div className="flex items-center mb-2 h-12">
|
||||
<div className="mr-3">
|
||||
<Avatar comment={comment} saturation={avatarSaturation} isBlank={isNotPublished} />
|
||||
</div>
|
||||
<div className={`flex flex-row w-full ${hasReplies ? 'mb-2 sm:mb-2' : 'mb-6 sm: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" />} */}
|
||||
</div>
|
||||
<div className="grow">
|
||||
<div className="flex items-start -mt-[3px] mb-2">
|
||||
{isNotPublished ?
|
||||
<div>
|
||||
<p className="font-sans text-[16px] leading-normal text-neutral-400 italic mt-[4px]">{notPublishedMessage}</p>
|
||||
</div> :
|
||||
<div>
|
||||
<h4 className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23] dark:text-[rgba(255,255,255,0.85)]">{!comment.member ? 'Deleted member' : (comment.member.name ? comment.member.name : 'Anonymous')}</h4>
|
||||
<div className="flex items-baseline font-sans text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
|
||||
<div className="flex items-baseline font-sans text-[14px] tracking-tight pr-4 text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
|
||||
<span className="inline-block max-w-full text-ellipsis overflow-hidden ...">
|
||||
{memberBio && <span>{memberBio}<span className="mx-[0.3em]">·</span></span>}
|
||||
<span title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</span>
|
||||
|
|
@ -109,27 +112,29 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
|
|||
</div>
|
||||
|
||||
{!isNotPublished &&
|
||||
<div className={`ml-12 sm:ml-[52px] mb-2 pr-4`}>
|
||||
<div className={`mb-2 pr-4`}>
|
||||
<p dangerouslySetInnerHTML={html} className="gh-comment-content font-sans leading-normal text-[16px] text-neutral-900 dark:text-[rgba(255,255,255,0.85)]"></p>
|
||||
</div>}
|
||||
|
||||
<div className="ml-12 sm:ml-[52px] flex gap-5 items-center">
|
||||
<div className="flex gap-5 items-center">
|
||||
{!isNotPublished && <Like comment={comment} />}
|
||||
{!isNotPublished && (canReply && (isNotPublished || !props.parent) && <Reply disabled={!!isEditing} comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />)}
|
||||
<More comment={comment} toggleEdit={toggleEditMode} disableEditing={isEditing} />
|
||||
</div>
|
||||
|
||||
{hasReplies &&
|
||||
<div className="mt-8 sm:mt-10 mb-4 sm:mb-0">
|
||||
<Replies comment={comment} />
|
||||
</div>
|
||||
}
|
||||
|
||||
{isInReplyMode &&
|
||||
<div className="my-10">
|
||||
<Form parent={comment} close={closeReplyMode} isReply={true} />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{hasReplies &&
|
||||
<div className="ml-11 sm:ml-14 mt-8 sm:mt-10 mb-4 sm:mb-0">
|
||||
<Replies comment={comment} />
|
||||
</div>
|
||||
}
|
||||
{isInReplyMode &&
|
||||
<div className="ml-14 my-10">
|
||||
<Form parent={comment} close={closeReplyMode} isReply={true} />
|
||||
</div>
|
||||
}
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -354,11 +354,11 @@ const Form = (props) => {
|
|||
<form ref={formEl} onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused} className={`
|
||||
transition duration-200
|
||||
pt-3 pb-2 px-3
|
||||
-mt-[12px] -mx-3 mb-10
|
||||
-mt-[14px] -mx-3 mb-10
|
||||
rounded-md
|
||||
${isFormReallyOpen ? 'cursor-default' : 'cursor-pointer'}
|
||||
${(!props.isReply && !props.isEdit) && '-mt-[4px]'}
|
||||
${(props.isReply || props.isEdit) && '-mt-[16px]'}
|
||||
${(props.isReply || props.isEdit) && '-mt-[20px]'}
|
||||
${shouldFormBeReduced && 'pl-1'}
|
||||
`}>
|
||||
<div className="w-full relative">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const RepliesPagination = (props) => {
|
|||
const count = props.count;
|
||||
|
||||
return (
|
||||
<button className="group w-full text-neutral-700 font-semibold px-0 pt-0 pb-3 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="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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue