Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Spacing tweaks to tighten things up based on John's feedback

Browse source 
refs https://github.com/TryGhost/Team/issues/1703
This commit is contained in:
James Morris 2022-07-21 18:08:30 +01:00
parent 16cccc2fcc
commit 47a8386da2
3 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -46,18 +46,19 @@ const Comment = (props) => {
} else { } else {
return ( return (
<> <>
<div className={`flex flex-col ${hasReplies ? 'mb-4' : 'mb-12'}`}> <div className={`flex flex-row ${hasReplies ? 'mb-4' : 'mb-10'}`}>
<div> <div className="mr-3">
<div className="flex justify-start items-center">
<Avatar comment={comment} saturation={avatarSaturation} /> <Avatar comment={comment} saturation={avatarSaturation} />
<div className="ml-3">
<h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-[rgba(255,255,255,0.85)]">{!comment.member ? 'Deleted member' : (comment.member.name ? comment.member.name : 'Anonymous')}</h4>
</div> </div>
<div>
<div className="mb-[4px] mt-[2px]">
<h4 className="text-lg font-sans font-semibold tracking-tight dark:text-[rgba(255,255,255,0.85)]">{!comment.member ? 'Deleted member' : (comment.member.name ? comment.member.name : 'Anonymous')}</h4>
</div> </div>
<div className={`ml-14 mb-4 pr-4 font-sans leading-normal ${isNotPublished ? 'text-neutral-400' : 'text-neutral-900'} dark:text-[rgba(255,255,255,0.85)]`}>
<div className={`mb-2 pr-4 font-sans leading-normal ${isNotPublished ? 'text-neutral-400' : 'text-neutral-900'} dark:text-[rgba(255,255,255,0.85)]`}>
<p dangerouslySetInnerHTML={html} className="gh-comment-content text-[16.5px] leading-normal"></p> <p dangerouslySetInnerHTML={html} className="gh-comment-content text-[16.5px] leading-normal"></p>
</div> </div>
<div className="ml-14 flex gap-5 items-center"> <div className="flex gap-5 items-center">
{!isNotPublished && <Like comment={comment} />} {!isNotPublished && <Like comment={comment} />}
{!isNotPublished && (canReply && (isNotPublished || !props.parent) && <Reply comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />)} {!isNotPublished && (canReply && (isNotPublished || !props.parent) && <Reply comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />)}
<div className="text-sm text-neutral-400 dark:text-[rgba(255,255,255,0.5)] font-sans">{formatRelativeTime(comment.created_at)}</div> <div className="text-sm text-neutral-400 dark:text-[rgba(255,255,255,0.5)] font-sans">{formatRelativeTime(comment.created_at)}</div>

4
apps/comments-ui/src/components/Form.js
View file

@ -220,7 +220,7 @@ const Form = (props) => {
focus:outline-0 focus:outline-0
placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)] placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)]
resize-none resize-none
${isFormOpen ? 'cursor-textmin-h-[144px] pt-[44px] pb-[68px]' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'} ${isFormOpen ? 'cursor-textmin-h-[144px] pt-[33px] pb-[68px]' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
${props.isEdit && 'cursor-text'} ${props.isEdit && 'cursor-text'}
${!memberName && 'pointer-events-none'} ${!memberName && 'pointer-events-none'}
`} `}
@ -261,7 +261,7 @@ const Form = (props) => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="ml-3 pointer-events-none"> <div className="-mt-[9px] ml-3 pointer-events-none">
<h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{memberName ? memberName : 'Anonymous'}</h4> <h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{memberName ? memberName : 'Anonymous'}</h4>
</div> </div>
</Transition> </Transition>

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

@ -5,7 +5,7 @@ const RepliesPagination = (props) => {
const count = props.count; const count = props.count;
return ( return (
<button className="w-full text-neutral-700 font-semibold px-3 py-3.5 mb-8 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}> <button className="w-full text-neutral-700 font-semibold px-0 pt-0 pb-3 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="inline-block w-full bg-neutral-100 dark:bg-[rgba(255,255,255,0.08)] rounded h-[3px] mt-[3px]" /> <span className="inline-block w-full bg-neutral-100 dark:bg-[rgba(255,255,255,0.08)] rounded h-[3px] mt-[3px]" />
</button> </button>