mirror of
https://github.com/TryGhost/Ghost.git
synced 2023-12-13 21:00:40 +01:00
Adding in bio position to comments, change to comment layout, changed up mobile design tweaks, new comment form, no global styles on iframes
- This removes the global styles on the iFrame - Changes to comment layout for new bio, new position for date and edited tag - Lots of design tweaks for desktop and mobile refs https://github.com/TryGhost/Team/issues/1716
This commit is contained in:
James Morris
parent
550d28cc96
commit
7e4f0bf361
6 changed files with 72 additions and 54 deletions
|
|
@ -35,11 +35,12 @@ const Comment = (props) => {
|
|||
const isNotPublished = comment.status !== 'published';
|
||||
const html = {__html: comment.html};
|
||||
|
||||
let notPublishedMessage;
|
||||
if (isNotPublished) {
|
||||
if (admin && comment.status === 'hidden') {
|
||||
html.__html = '<i>This comment has been hidden.</i>';
|
||||
notPublishedMessage = 'This comment has been hidden.';
|
||||
} else {
|
||||
html.__html = '<i>This comment has been removed.</i>';
|
||||
notPublishedMessage = 'This comment has been removed.';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +48,7 @@ const Comment = (props) => {
|
|||
const isPaidMember = member && !!member.paid;
|
||||
const canReply = member && (isPaidMember || !paidOnly);
|
||||
|
||||
// comment.member.bio = 'Head of marketing'; FOR TESTING
|
||||
// comment.member.bio = 'Head of Marketing'; // FOR TESTING
|
||||
|
||||
if (isInEditMode) {
|
||||
return (
|
||||
|
|
@ -57,24 +58,31 @@ const Comment = (props) => {
|
|||
return (
|
||||
<>
|
||||
<div className={`flex flex-row ${hasReplies ? 'mb-2 sm:mb-4' : 'mb-6 sm:mb-10'}`}>
|
||||
<div className="mr-3">
|
||||
<Avatar comment={comment} saturation={avatarSaturation} isBlank={isNotPublished} />
|
||||
</div>
|
||||
<div>
|
||||
{!isNotPublished &&
|
||||
<div className="mb-[2px] sm:mb-[8px] -mt-[2px]">
|
||||
<h4 className="text-[17px] font-sans font-bold tracking-tight 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)]">
|
||||
{comment.member.bio && <div className="font-semibold">Head of Marketing<span className="font-bold mx-[0.3em]">·</span></div>}
|
||||
<div className={`${!comment.member.bio && 'font-semibold'}`}>{formatRelativeTime(comment.created_at)}</div>
|
||||
{comment.edited_at && <div><span className="font-bold mx-[0.3em]">·</span>Edited</div>}
|
||||
<div>
|
||||
<div className="flex items-center mb-2 h-12">
|
||||
<div className="mr-3">
|
||||
<Avatar comment={comment} saturation={avatarSaturation} isBlank={isNotPublished} />
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
<div className={`mb-[6px] pr-4 font-sans leading-normal ${isNotPublished ? 'text-neutral-400 mt-[4px]' : 'text-neutral-900'} dark:text-[rgba(255,255,255,0.85)]`}>
|
||||
<p dangerouslySetInnerHTML={html} className="gh-comment-content text-[16px] leading-normal"></p>
|
||||
{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 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 font-semibold text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
|
||||
{comment.member.bio && <div>{comment.member.bio}<span className="mx-[0.3em]">·</span></div>}
|
||||
<div>{formatRelativeTime(comment.created_at)}</div>
|
||||
{comment.edited_at && <div><span className="mx-[0.3em]">·</span>Edited</div>}
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
<div className="flex gap-5 items-center">
|
||||
|
||||
{!isNotPublished &&
|
||||
<div className={`ml-12 sm:ml-[52px] mb-2 pr-4 font-sans leading-normal text-neutral-900 dark:text-[rgba(255,255,255,0.85)]`}>
|
||||
<p dangerouslySetInnerHTML={html} className="gh-comment-content text-[16px] leading-normal"></p>
|
||||
</div>}
|
||||
|
||||
<div className="ml-12 sm:ml-[52px] flex gap-5 items-center">
|
||||
{!isNotPublished && <Like comment={comment} />}
|
||||
{!isNotPublished && (canReply && (isNotPublished || !props.parent) && <Reply comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />)}
|
||||
<More comment={comment} toggleEdit={toggleEditMode} />
|
||||
|
|
|
|||
|
|
@ -70,10 +70,8 @@ const CommentsBox = (props) => {
|
|||
const style = {
|
||||
'--gh-accent-color': accentColor ?? 'blue',
|
||||
// need careful padding adjustments to match iFrame negative margins and to not cut off top editing form
|
||||
paddingLeft: 20,
|
||||
paddingRight: 20,
|
||||
paddingTop: 16,
|
||||
paddingBottom: 32
|
||||
paddingBottom: 48
|
||||
};
|
||||
return (
|
||||
<section className={'ghost-display ' + containerClass} style={style}>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ const Form = (props) => {
|
|||
|
||||
const {comment, commentsCount} = props;
|
||||
const memberName = (props.isEdit ? comment.member.name : member.name);
|
||||
|
||||
const memberBio = false; // FOR TESTING
|
||||
|
||||
let config;
|
||||
if (props.isReply) {
|
||||
config = {
|
||||
|
|
@ -253,29 +254,30 @@ const Form = (props) => {
|
|||
pt-3 pb-2 px-3
|
||||
-mt-[12px] -mr-3 mb-10 -ml-[12px]
|
||||
bg-white dark:bg-[rgba(255,255,255,0.08)]
|
||||
rounded-md shadow-formlg dark:shadow-transparent hover:shadow-formxl
|
||||
rounded-md
|
||||
${!commentsCount && !props.isEdit && !props.isReply && 'mt-0 ml-0 mr-0'}
|
||||
${isFormOpen ? 'cursor-default' : 'cursor-pointer'}
|
||||
${(!props.isReply && !props.isEdit) && '-mt-[4px]'}
|
||||
${props.isReply && '-ml-[12px]'}`
|
||||
}>
|
||||
${(props.isReply || props.isEdit) && '-mt-[16px]'}
|
||||
${shouldFormBeReduced && 'pl-1'}
|
||||
`}>
|
||||
<div className="w-full relative">
|
||||
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
|
||||
<div className="relative w-full">
|
||||
<div className="pr-[1px] font-sans leading-normal dark:text-neutral-300">
|
||||
<div className={`transition-[padding] duration-150 delay-100 relative w-full pl-12 ${shouldFormBeReduced && 'pl-0'} ${isFormOpen && 'pt-[64px]'}`}>
|
||||
<div
|
||||
className={`
|
||||
transition-all duration-150 delay-100
|
||||
w-full pl-[50px] sm:pl-[56px] px-0 py-[10px] pr-4
|
||||
w-full px-2 py-4
|
||||
bg-transparent rounded-md border-none border border-slate-50 dark:border-none
|
||||
font-sans text-[16.5px] leading-normal dark:text-neutral-300
|
||||
focus:outline-0
|
||||
placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)]
|
||||
resize-none
|
||||
shadow-formnew dark:shadow-transparent
|
||||
${commentsCount === 0 && 'placeholder:text-neutral-700'}
|
||||
${isFormOpen ? 'cursor-text min-h-[144px] pt-[33px] pb-[68px]' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
|
||||
${isFormOpen ? 'cursor-text min-h-[144px] pb-[68px] pt-2' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
|
||||
${props.isEdit && 'cursor-text'}
|
||||
${!memberName && 'pointer-events-none'}
|
||||
${shouldFormBeReduced && 'pl-1'}
|
||||
`}>
|
||||
<EditorContent
|
||||
onMouseDown={stopIfFocused} onTouchStart={stopIfFocused}
|
||||
|
|
@ -283,7 +285,7 @@ const Form = (props) => {
|
|||
/>
|
||||
</div>
|
||||
<div className="
|
||||
absolute -right-3 bottom-[2px]
|
||||
absolute right-2 bottom-2
|
||||
flex space-x-4
|
||||
transition-[opacity] duration-150
|
||||
">
|
||||
|
|
@ -294,7 +296,7 @@ const Form = (props) => {
|
|||
transition-[opacity] duration-150
|
||||
bg-neutral-900 dark:bg-[rgba(255,255,255,0.9)]
|
||||
rounded-[6px] border
|
||||
py-3 px-4
|
||||
py-2 px-3
|
||||
text-sm text-center font-sans font-semibold
|
||||
text-white dark:text-neutral-800
|
||||
`}
|
||||
|
|
@ -306,21 +308,28 @@ const Form = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex mb-1 justify-start items-center absolute top-0 left-0">
|
||||
{!shouldFormBeReduced && <Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" />}
|
||||
<Transition
|
||||
show={isFormOpen}
|
||||
enter="transition duration-500 delay-100 ease-in-out"
|
||||
enterFrom="opacity-0 -translate-x-2"
|
||||
enterTo="opacity-100 translate-x-0"
|
||||
leave="transition-none duration-0"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className={`${!shouldFormBeReduced ? 'ml-3 -mt-[9px]' : 'ml-1 mt-0'} 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>
|
||||
<div className='absolute top-1 left-0 flex justify-start items-center h-12'>
|
||||
<div className="mr-3">
|
||||
<Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" />
|
||||
</div>
|
||||
<div>
|
||||
<Transition
|
||||
show={isFormOpen}
|
||||
enter="transition duration-500 delay-100 ease-in-out"
|
||||
enterFrom="opacity-0 -translate-x-2"
|
||||
enterTo="opacity-100 translate-x-0"
|
||||
leave="transition-none duration-0"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<h4 className="text-[17px] font-sans font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]">{memberName ? memberName : 'Anonymous'}</h4>
|
||||
<div className="flex items-baseline font-sans font-semibold text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
|
||||
{memberBio ?
|
||||
<div>{memberBio}</div> :
|
||||
<div>Add your bio</div>}
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -26,10 +26,8 @@ const Frame = ({
|
|||
|
||||
// For now we don't listen for type changes, we could consider adding useEffect, but that won't be used
|
||||
const defaultStyle = type === 'dynamic' ? {
|
||||
width: 'calc(100% + min(8vmin, 40px))',
|
||||
height: '400px',
|
||||
marginLeft: 'max(-4vmin,-20px)', // negative margins to handle comment alignments and shadows
|
||||
marginRight: 'max(-4vmin,-20px)'
|
||||
width: '100%',
|
||||
height: '400px'
|
||||
} : {
|
||||
zIndex: '3999999',
|
||||
position: 'fixed',
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ function Like(props) {
|
|||
}
|
||||
|
||||
return (
|
||||
<CustomTag className={`group transition-all duration-50 ease-linear flex font-sans items-center text-sm outline-0 ${props.comment.liked ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)] hover:text-neutral-600'} ${likeCursor}`} onClick={toggleLike}>
|
||||
<LikeIcon className={animationClass + ` mr-[6px] ${props.comment.liked ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 dark:stroke-[rgba(255,255,255,0.5)] group-hover:stroke-neutral-600'} transition duration-50 ease-linear`} />
|
||||
<CustomTag className={`group transition-all duration-50 ease-linear flex font-sans items-center text-sm outline-0 ${props.comment.liked ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)]'} ${!props.comment.liked && canLike && 'hover:text-neutral-600'} ${likeCursor}`} onClick={toggleLike}>
|
||||
<LikeIcon className={animationClass + ` mr-[6px] ${props.comment.liked ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 dark:stroke-[rgba(255,255,255,0.5)'} ${!props.comment.liked && canLike && 'group-hover:stroke-neutral-600'} transition duration-50 ease-linear`} />
|
||||
{props.comment.likes_count}
|
||||
</CustomTag>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -144,6 +144,11 @@ module.exports = {
|
|||
'0px 8px 12px rgba(0, 0, 0, 0.04)',
|
||||
'0px 12px 20px rgba(0, 0, 0, 0.06)'
|
||||
],
|
||||
formnew: [
|
||||
'0px 78px 57px -57px rgba(0, 0, 0, 0.1)',
|
||||
'0px 15px 20px -8px rgba(0, 0, 0, 0.08)',
|
||||
'0px 0px 1px 0px rgba(0, 0, 0, 0.25)'
|
||||
],
|
||||
modal: [
|
||||
'0 3.8px 2.2px rgba(0, 0, 0, 0.028)',
|
||||
'0 9.2px 5.3px rgba(0, 0, 0, 0.04)',
|
||||
|
|
|
|||
Loading…
Reference in a new issue