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

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

@ -46,18 +46,19 @@ const Comment = (props) => {
} else {
return (
<>
<div className={`flex flex-col ${hasReplies ? 'mb-4' : 'mb-12'}`}>
<div>
<div className="flex justify-start items-center">
<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 className={`flex flex-row ${hasReplies ? 'mb-4' : 'mb-10'}`}>
<div className="mr-3">
<Avatar comment={comment} saturation={avatarSaturation} />
</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 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>
</div>
<div className="ml-14 flex gap-5 items-center">
<div className="flex gap-5 items-center">
{!isNotPublished && <Like comment={comment} />}
{!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>

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

@ -220,7 +220,7 @@ const Form = (props) => {
focus:outline-0
placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)]
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'}
${!memberName && 'pointer-events-none'}
`}
@ -261,7 +261,7 @@ const Form = (props) => {
leaveFrom="opacity-100"
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>
</div>
</Transition>

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

@ -5,7 +5,7 @@ const RepliesPagination = (props) => {
const count = props.count;
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="inline-block w-full bg-neutral-100 dark:bg-[rgba(255,255,255,0.08)] rounded h-[3px] mt-[3px]" />
</button>