TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 06:35:49 +03:00
Code Issues Projects Releases Wiki Activity

Fixes for super long expertise in form and comments

Browse Source 
refs https://github.com/TryGhost/Team/issues/1758
This commit is contained in:
James Morris 2022-08-11 12:35:38 +01:00
parent 5e8ebe44b8
commit 6db7d9bd2d
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -105,7 +105,7 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
<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> <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 pr-4 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 ..."> <span>
{memberBio && <span>{memberBio}<span className="mx-[0.3em]">·</span></span>} {memberBio && <span>{memberBio}<span className="mx-[0.3em]">·</span></span>}
<span title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</span> <span title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</span>
<EditedInfo comment={comment} /> <EditedInfo comment={comment} />

12
apps/comments-ui/src/components/Form.js
View File

@ -409,11 +409,11 @@ const Form = (props) => {
</div> </div>
</div> </div>
</div> </div>
<div className='absolute top-1 left-0 flex justify-start items-center h-12'> <div className='absolute top-1 left-0 flex justify-start items-center h-12 w-full'>
<div className="mr-3"> <div className="grow-0 mr-3">
<Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" /> <Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" />
</div> </div>
<div> <div className="grow-1 w-full">
<Transition <Transition
show={isFormReallyOpen} show={isFormReallyOpen}
enter="transition duration-500 delay-100 ease-in-out" enter="transition duration-500 delay-100 ease-in-out"
@ -430,14 +430,14 @@ const Form = (props) => {
bioAutofocus: false bioAutofocus: false
}); });
}}>{memberName ? memberName : 'Anonymous'}</div> }}>{memberName ? memberName : 'Anonymous'}</div>
<div className="flex items-baseline"> <div className="flex items-baseline justify-start">
<button <button
className={`group transition duration-150 flex justify-start items-center font-sans text-[14px] tracking-tight text-neutral-400 hover:text-neutral-500 dark:text-[rgba(255,255,255,0.5)] ${!memberBio && 'text-neutral-300 hover:text-neutral-400'}`} className={`group transition duration-150 whitespace-nowrap max-w-[80%] sm:max-w-[90%] flex items-center justify-start font-sans text-[14px] text-left tracking-tight text-neutral-400 hover:text-neutral-500 dark:text-[rgba(255,255,255,0.5)] ${!memberBio && 'text-neutral-300 hover:text-neutral-400'}`}
onClick={(event) => { onClick={(event) => {
handleShowDialog(event, { handleShowDialog(event, {
bioAutofocus: true bioAutofocus: true
}); });
}}>{memberBio ? memberBio : 'Add your expertise'} }}><span className="text-ellipsis overflow-hidden ...">{memberBio ? memberBio : 'Add your expertise'}</span>
{memberBio && <EditIcon className="transition-all duration-100 ease-out opacity-0 -translate-x-[6px] group-hover:opacity-100 group-hover:translate-x-0 w-[12px] h-[12px] stroke-neutral-500 ml-1" />} {memberBio && <EditIcon className="transition-all duration-100 ease-out opacity-0 -translate-x-[6px] group-hover:opacity-100 group-hover:translate-x-0 w-[12px] h-[12px] stroke-neutral-500 ml-1" />}
</button> </button>
</div> </div>