OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Making add form width dynamic based on comment count

Browse Source
This commit is contained in:
Peter Zimon 2022-07-07 17:47:34 +02:00
parent 81bb2fb441
commit 200717f779
2 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/comments-ui/src/components/AddForm.js
View File

@ -52,7 +52,7 @@ const AddForm = (props) => {
};
return (
<form onSubmit={submitForm} onClick={handleFocus} className={`bg-white comment-form transition duration-200 rounded-md px-3 pt-3 pb-2 -ml-[13px] -mr-3 mt-8 mb-10 shadow-lg dark:bg-[rgba(255,255,255,0.08)] dark:shadow-transparent hover:shadow-xl ${focused ? 'cursor-default' : 'cursor-pointer'}`}>
<form onSubmit={submitForm} onClick={handleFocus} className={`bg-white comment-form transition duration-200 rounded-md px-3 pt-3 pb-2 ${props.commentsCount && '-ml-[13px] -mr-3'} mt-8 mb-10 shadow-lg dark:bg-[rgba(255,255,255,0.08)] dark:shadow-transparent hover:shadow-xl ${focused ? 'cursor-default' : 'cursor-pointer'}`}>
<div className="w-full relative">
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full ">
@ -62,7 +62,7 @@ const AddForm = (props) => {
onChange={handleChange}
onFocus={handleFocus}
onBlur={handleBlur}
autofocus={true}
autoFocus={false}
placeholder='Join the discussion'
/>
<button

3
apps/comments-ui/src/components/CommentsBox.js
View File

@ -50,6 +50,7 @@ class CommentsBox extends React.Component {
const comments = !this.context.comments ? 'Loading...' : this.context.comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} avatarSaturation={this.props.avatarSaturation} />);
const containerClass = this.darkMode() ? 'dark' : '';
const commentsCount = comments.length;
return (
<section className={containerClass}>
@ -58,7 +59,7 @@ class CommentsBox extends React.Component {
{comments}
</div>
<div>
{ this.context.member ? <AddForm avatarSaturation={this.props.avatarSaturation} /> : <NotSignedInBox /> }
{ this.context.member ? <AddForm commentsCount={commentsCount} avatarSaturation={this.props.avatarSaturation} /> : <NotSignedInBox /> }
</div>
</section>
);