TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-28 13:22:39 +03:00
Code Issues Projects Releases Wiki Activity

Lots of little fixes and tweaks to styles

Browse Source
This commit is contained in:
James Morris 2022-07-06 19:22:52 +02:00
parent ef4cbdde1d
commit 9ad8a0afcc
9 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -134,9 +134,9 @@ class AddForm extends React.Component {
</div>
<div className="-mt-[51px] ml-14 pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full">
<textarea className={`transition-[height] ${this.state.focused ? 'cursor-text h-40' : 'cursor-pointer hover:border-slate-300 h-12 '} duration-150 w-full resize-none rounded-md border border-slate-200 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} onFocus={this.handleFocus} onBlur={this.handleBlur} placeholder={this.state.focused ? '' : 'Add to the discussion'} />
<button className={`transition-[opacity] ${this.state.focused ? 'opacity-100' : 'opacity-0'} duration-150 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`} type="submit">Add your comment</button>
<button className={`transition-[opacity] ${this.state.focused ? 'opacity-0' : 'opacity-100'} duration-100 absolute top-[5px] right-[5px] rounded-md border p-2 font-sans text-sm text-center bg-black font-semibold text-white pointer-events-none dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800`} disabled="true">Comment</button>
<textarea className={`transition-[height] ${this.state.focused ? 'cursor-text h-40' : 'cursor-pointer hover:border-slate-300 h-12'} duration-150 w-full resize-none rounded-md border border-slate-200 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} onFocus={this.handleFocus} onBlur={this.handleBlur} placeholder={this.state.focused ? '' : 'Add to the discussion'} />
<button className={`transition-[opacity] ${this.state.focused ? 'opacity-100' : 'opacity-0'} duration-150 rounded-md border py-2 px-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`} type="submit">Add your comment</button>
<button className={`transition-[opacity] ${this.state.focused ? 'opacity-0' : 'opacity-100'} duration-100 absolute top-2 right-2 rounded-md border py-1 px-2 font-sans text-sm text-center bg-black font-semibold text-white pointer-events-none dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800`} disabled="true">Comment</button>
</div>
</div>
</div>

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

@ -3,7 +3,7 @@ import React from 'react';
import AppContext from '../AppContext';
import Avatar from './Avatar';
import Like from './Like';
// import Reply from './Reply';
import Reply from './Reply';
import More from './More';
import EditForm from './EditForm';
import Replies from './Replies';
@ -44,6 +44,7 @@ class Comment extends React.Component {
render() {
const comment = this.props.comment;
const hasReplies = comment.replies && comment.replies.length > 0;
const html = {__html: comment.html};
if (comment.status !== 'published') {
@ -56,7 +57,7 @@ class Comment extends React.Component {
);
} else {
return (
<div className="flex flex-col ">
<div className={`flex flex-col ${!hasReplies ? 'mb-10' : ''}`}>
<div>
<div className="flex mb-2 space-x-4 justify-start items-center">
<Avatar comment={comment} />
@ -68,17 +69,17 @@ class Comment extends React.Component {
<div className="ml-14 mb-2.5 pr-4 font-sans leading-normal dark:text-neutral-300">
<p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
</div>
<div className="ml-14 flex gap-5">
<div className="ml-14 flex gap-4">
<Like comment={comment} />
{/* <Reply comment={comment} /> */}
<Reply comment={comment} />
<More comment={comment} show={this.hasMoreContextMenu} toggleEdit={this.toggleEditMode} />
</div>
</div>
<div className="ml-14 mt-8">
{comment.replies && comment.replies.length > 0 && <Replies replies={comment.replies} />}
</div>
</div>
{hasReplies &&
<div className="ml-14 mt-10">
<Replies replies={comment.replies} />
</div>
}
</div>
);
}

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

@ -50,8 +50,8 @@ class EditForm extends React.Component {
<div className="relative w-full">
<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} autofocus="true" />
<div className="flex flex-start">
<button type="submit" className="rounded-md border p-2 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.5 text-neutral-500" onClick={this.props.toggle}>Cancel</button>
<button type="submit" className="rounded border py-1 px-4 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.5 text-neutral-500 dark:text-neutral-400" onClick={this.props.toggle}>Cancel</button>
</div>
</div>
</div>

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

@ -15,7 +15,7 @@ function Like(props) {
return (
<button className="flex font-sans text-[14px] items-center dark:text-white" onClick={toggleLike}>
<LikeIcon className={`gh-comments-icon gh-comments-icon-like mr-1 dark:stroke-white ${props.comment.liked ? 'fill-black' : ''}`} />
<LikeIcon className={`mr-1 stroke-black dark:stroke-white ${props.comment.liked ? 'fill-black dark:fill-white' : ''}`} />
{props.comment.likes_count}
</button>
);

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

@ -27,7 +27,7 @@ class More extends React.Component {
return (
<div className="relative">
{show ? <button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more -m-[3px] dark:fill-white' /></button> : null}
{show ? <button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more dark:fill-white' /></button> : null}
{this.state.isContextMenuOpen ? <CommentContextMenu comment={comment} close={this.toggleContextMenu} toggleEdit={this.props.toggleEdit} /> : null}
</div>
);

15
apps/comments-ui/src/components/Reply.js
View File

@ -1,9 +1,18 @@
import React, {useState} from 'react';
import {ReactComponent as ReplyIcon} from '../images/icons/reply.svg';
function Reply() {
const [replied, setReplied] = useState(false);
const toggleReply = () => {
setReplied(!replied);
};
return (
<button className="flex font-sans text-[14px] items-center"><ReplyIcon className='gh-comments-icon gh-comments-icon-reply mr-1' />Reply</button>
<button className="flex font-sans text-[14px] items-center dark:text-white" onClick={toggleReply}>
<ReplyIcon className={`mr-1 stroke-dark dark:stroke-white ${replied ? 'fill-black dark:fill-white' : ''}`} />Reply
</button>
);
}
export default Reply;
export default Reply;

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

@ -30,7 +30,7 @@ class CommentContextMenu extends React.Component {
const comment = this.props.comment;
return (
<div className="bg-white absolute font-sans rounded py-3 px-4 drop-shadow-xl text-sm whitespace-nowrap z-10">
<div className="bg-white absolute font-sans rounded py-3 px-4 drop-shadow-xl text-sm whitespace-nowrap z-10 dark:bg-zinc-900 dark:text-white">
{this.isAuthor && comment.status === 'published' ? <AuthorContextMenu comment={comment} close={this.close} toggleEdit={this.props.toggleEdit} /> : (this.isAdmin ? <AdminContextMenu comment={comment} close={this.close}/> : <NotAuthorContextMenu comment={comment} close={this.close}/>)}
</div>
);

6
apps/comments-ui/src/images/icons/more.svg
View File

@ -1,5 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg">
<path d="M3 10.5C3.82843 10.5 4.5 9.82843 4.5 9C4.5 8.17157 3.82843 7.5 3 7.5C2.17157 7.5 1.5 8.17157 1.5 9C1.5 9.82843 2.17157 10.5 3 10.5Z"/>
<path d="M8 10.5C8.82843 10.5 9.5 9.82843 9.5 9C9.5 8.17157 8.82843 7.5 8 7.5C7.17157 7.5 6.5 8.17157 6.5 9C6.5 9.82843 7.17157 10.5 8 10.5Z"/>
<path d="M13 10.5C13.8284 10.5 14.5 9.82843 14.5 9C14.5 8.17157 13.8284 7.5 13 7.5C12.1716 7.5 11.5 8.17157 11.5 9C11.5 9.82843 12.1716 10.5 13 10.5Z" />
<path d="M3 12C3.82843 12 4.5 11.3284 4.5 10.5C4.5 9.67157 3.82843 9 3 9C2.17157 9 1.5 9.67157 1.5 10.5C1.5 11.3284 2.17157 12 3 12Z" />
<path d="M8 12C8.82843 12 9.5 11.3284 9.5 10.5C9.5 9.67157 8.82843 9 8 9C7.17157 9 6.5 9.67157 6.5 10.5C6.5 11.3284 7.17157 12 8 12Z" />
<path d="M13 12C13.8284 12 14.5 11.3284 14.5 10.5C14.5 9.67157 13.8284 9 13 9C12.1716 9 11.5 9.67157 11.5 10.5C11.5 11.3284 12.1716 12 13 12Z" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 546 B

After

Width:  |  Height:  |  Size: 524 B

4
apps/comments-ui/src/images/icons/reply.svg
View File

@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.17463 2.98741C7.17439 2.7888 7.11434 2.59487 7.00229 2.43088C6.89025 2.26689 6.73141 2.14046 6.54647 2.06805C6.36153 1.99564 6.15907 1.98061 5.96546 2.02492C5.77186 2.06923 5.5961 2.17083 5.46107 2.31648L1.86192 6.21418C1.69351 6.39677 1.60001 6.63606 1.60001 6.88445C1.60001 7.13284 1.69351 7.37213 1.86192 7.55472L5.45909 11.4524C5.59412 11.5981 5.76988 11.6997 5.96349 11.744C6.15709 11.7883 6.35955 11.7733 6.54449 11.7009C6.72943 11.6284 6.88827 11.502 7.00032 11.338C7.11236 11.174 7.17242 10.9801 7.17265 10.7815V8.86164H9.12703C10.438 8.86164 11.6953 9.38241 12.6222 10.3094C13.5492 11.2364 14.07 12.4937 14.07 13.8046V9.85023C14.07 8.53927 13.5492 7.28201 12.6222 6.35502C11.6953 5.42803 10.438 4.90726 9.12703 4.90726H7.17265L7.17463 2.98741Z" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg">
<path d="M7.17463 2.98741C7.17439 2.7888 7.11434 2.59487 7.00229 2.43088C6.89025 2.26689 6.73141 2.14046 6.54647 2.06805C6.36153 1.99564 6.15907 1.98061 5.96546 2.02492C5.77186 2.06923 5.5961 2.17083 5.46107 2.31648L1.86192 6.21418C1.69351 6.39677 1.60001 6.63606 1.60001 6.88445C1.60001 7.13284 1.69351 7.37213 1.86192 7.55472L5.45909 11.4524C5.59412 11.5981 5.76988 11.6997 5.96349 11.744C6.15709 11.7883 6.35955 11.7733 6.54449 11.7009C6.72943 11.6284 6.88827 11.502 7.00032 11.338C7.11236 11.174 7.17242 10.9801 7.17265 10.7815V8.86164H9.12703C10.438 8.86164 11.6953 9.38241 12.6222 10.3094C13.5492 11.2364 14.07 12.4937 14.07 13.8046V9.85023C14.07 8.53927 13.5492 7.28201 12.6222 6.35502C11.6953 5.42803 10.438 4.90726 9.12703 4.90726H7.17265L7.17463 2.98741Z" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 952 B

After

Width:  |  Height:  |  Size: 952 B