Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Improved vertical indentation alignment (#21718)

Browse source 
REF
https://linear.app/ghost/issue/PLG-275/improve-vertical-indentation-alignment
This commit is contained in:
Sanne de Vries 2024-11-25 15:39:17 +01:00 • committed by GitHub
parent 5e42c3146d
commit 5b70c7d1d7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/comments-ui/src/components/content/Comment.tsx
View file

@ -244,7 +244,7 @@ const RepliesContainer: React.FC<RepliesProps & {className?: string}> = ({commen
}
return (
<div className={`mb-4 ml-[-1.4rem] mt-7 sm:mb-0 sm:mt-8 ${className}`}>
<div className={`-ml-2 mb-4 mt-7 sm:mb-0 sm:mt-8 ${className}`}>
<Replies comment={comment} />
</div>
);
@ -316,7 +316,7 @@ const CommentHeader: React.FC<CommentHeaderProps> = ({comment, className = ''})
</div>
{(isReplyToReply &&
<div className="mb-2 line-clamp-1 font-sans text-base leading-snug text-neutral-900/50 sm:text-sm dark:text-white/60">
<span>{t('Replied to')}</span>:<a className="ml-0.5 font-semibold text-neutral-900/60 transition-colors hover:text-neutral-900/70 dark:text-white/70 dark:hover:text-white/80" data-testid="comment-in-reply-to" href={`#${comment.in_reply_to_id}`} onClick={scrollRepliedToCommentIntoView}>{comment.in_reply_to_snippet}</a>
<span>{t('Replied to')}</span>:&nbsp;<a className="font-semibold text-neutral-900/60 transition-colors hover:text-neutral-900/70 dark:text-white/70 dark:hover:text-white/80" data-testid="comment-in-reply-to" href={`#${comment.in_reply_to_id}`} onClick={scrollRepliedToCommentIntoView}>{comment.in_reply_to_snippet}</a>
</div>
)}
</>

2
apps/comments-ui/src/components/content/forms/EditForm.tsx
View file

@ -60,7 +60,7 @@ const EditForm: React.FC<Props> = ({comment, openForm, parent}) => {
}, [dispatchAction, openForm]);
return (
<div className='px-3 pb-2 pt-3'>
<div className='px-2 pb-2 pt-3'>
<div className='mt-[-16px] pr-3'>
<Form
close={close}

6
apps/comments-ui/src/components/content/forms/Form.tsx
View file

@ -227,8 +227,8 @@ const FormHeader: React.FC<FormHeaderProps> = ({show, name, expertise, replyingT
</div>
</div>
{isReplyingToReply && (
<div className="line-clamp-1 font-sans text-base leading-snug text-neutral-900/50 sm:text-sm dark:text-white/60" data-testid="replying-to">
<span>{t('Reply to')}:</span>&nbsp;<span className="font-semibold">{replyingToText}</span>
<div className="mt-0.5 line-clamp-1 font-sans text-base leading-snug text-neutral-900/50 sm:text-sm dark:text-white/60" data-testid="replying-to">
<span>{t('Reply to')}:</span>&nbsp;<span className="font-semibold text-neutral-900/60 dark:text-white/70">{replyingToText}</span>
</div>
)}
</Transition>
@ -329,7 +329,7 @@ const Form: React.FC<FormProps> = ({comment, submit, submitText, submitSize, clo
return (
<form
ref={formEl}
className={`-mx-3 mb-7 mt-[-10px] rounded-md transition duration-200 ${isOpen ? 'cursor-default' : 'cursor-pointer'}`}
className={`-mx-2 mb-7 mt-[-10px] rounded-md transition duration-200 ${isOpen ? 'cursor-default' : 'cursor-pointer'}`}
data-testid="form"
onClick={focusEditor}
onMouseDown={preventIfFocused}

2
apps/comments-ui/src/components/content/forms/ReplyForm.tsx
View file

@ -46,7 +46,7 @@ const ReplyForm: React.FC<Props> = ({openForm, parent}) => {
return (
<div ref={setForm}>
<div className='mt-[-16px] pr-3'>
<div className='mt-[-16px] pr-2'>
<Form
close={close}
editor={editor}