tqt/Ghost
2
1
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2023-12-13 21:00:40 +01:00
Code Issues 1 Releases Wiki Activity

Updated forms and tweaks with styles

Browse source
This commit is contained in:
James Morris 2022-07-06 15:41:47 +02:00
parent 1e9b5d6bcf
commit cd85b7cad9
5 changed files with 14 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/comments-ui/src/components/Form.js → apps/comments-ui/src/components/AddForm.js
View file

@ -62,7 +62,7 @@ import Avatar from './Avatar';
// );
// };
class Form extends React.Component {
class AddForm extends React.Component {
static contextType = AppContext;
constructor(props) {
@ -122,12 +122,10 @@ class Form extends React.Component {
<h6 className="text-xs text-neutral-400 font-sans">&nbsp;</h6>
</div>
</div>
<div className="-mt-4 ml-14 pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="-mt-12 ml-14 pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full">
<textarea className="w-full resize-none rounded-md border h-36 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300" value={this.state.message} onChange={this.handleChange} />
<div className="absolute bottom-5 right-3">
<button type="submit" className="w-full rounded-md border p-3 py-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Add your comment</button>
</div>
<textarea className="w-full resize-none rounded-md border h-36 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300" value={this.state.message} onChange={this.handleChange} autofocus="true" />
<button type="submit" className="rounded-md border p-3 py-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Add your comment</button>
</div>
</div>
</div>
@ -136,4 +134,4 @@ class Form extends React.Component {
}
}
export default Form;
export default AddForm;

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

@ -55,7 +55,7 @@ class Comment extends React.Component {
);
} else {
return (
<div className="flex mb-8">
<div className="flex mb-6">
<div>
<div className="flex mb-2 space-x-4 justify-start items-center">
<Avatar comment={comment} />

6
apps/comments-ui/src/components/CommentsBox.js
View file

@ -1,7 +1,7 @@
import React from 'react';
import AppContext from '../AppContext';
import NotSignedInBox from './NotSignedInBox';
import Form from './Form';
import AddForm from './AddForm';
import Comment from './Comment';
import Pagination from './Pagination';
@ -48,11 +48,11 @@ class CommentsBox extends React.Component {
return (
<section className={containerClass}>
<Pagination />
<div className="mt-6">
<div className={!this.context.pagination ? 'mt-4' : ''}>
{comments}
</div>
<div>
{ this.context.member ? <Form /> : <NotSignedInBox /> }
{ this.context.member ? <AddForm /> : <NotSignedInBox /> }
</div>
</section>
);

8
apps/comments-ui/src/components/EditForm.js
View file

@ -48,10 +48,10 @@ class EditForm extends React.Component {
</div>
<div className="ml-14 pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full">
<textarea className="w-full resize-none rounded-md border h-48 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300" value={this.state.message} onChange={this.handleChange} />
<div className="flex absolute bottom-5 right-3">
<button className="font-sans text-sm font-medium mr-3 text-neutral-500" onClick={this.props.toggle}>Cancel</button>
<button type="submit" className="w-full rounded-md border p-3 py-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Edit your comment</button>
<textarea className="w-full resize-none rounded-md border h-32 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300" value={this.state.message} onChange={this.handleChange} />
<div className="flex flex-start">
<button type="submit" className="rounded-md border p-3 py-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Edit comment</button>
<button className="font-sans text-sm font-medium ml-2 text-neutral-500" onClick={this.props.toggle}>Cancel</button>
</div>
</div>
</div>

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

@ -29,7 +29,7 @@ class Pagination extends React.Component {
}
return (
<button className="w-full rounded-md border p-3 font-sans text-sm text-center dark:border-neutral-500 dark:text-white" onClick={this.loadMore}>
<button className="w-full rounded-md border p-3 mb-6 font-sans text-sm text-center dark:border-neutral-500 dark:text-white" onClick={this.loadMore}>
Show {left} previous comments
</button>
);