TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 05:37:34 +03:00
Code Issues Projects Releases Wiki Activity

Basic working empty comments that needs further styling

Browse Source 
refs https://github.com/TryGhost/Team/issues/1698
This commit is contained in:
James Morris 2022-07-20 12:58:28 +01:00
parent 75ac4dcdc3
commit e4d90f7a82
4 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import Form from './Form';
import Comment from './Comment';
import Pagination from './Pagination';
import NotPaidBox from './NotPaidBox';
import Empty from './Empty';
const CommentsBox = (props) => {
const luminance = (r, g, b) => {
@ -57,10 +58,10 @@ const CommentsBox = (props) => {
<section className={'ghost-display ' + containerClass} style={style}>
<Pagination />
<div className={!pagination ? 'mt-4' : ''}>
{commentsElements}
{commentsCount === 0 ? <Empty /> : commentsElements}
</div>
<div>
{ member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotPaidBox />) : <NotSignedInBox /> }
{ member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotPaidBox isFirst={commentsCount === 0} />) : <NotSignedInBox isFirst={commentsCount === 0} /> }
</div>
</section>
);

11
apps/comments-ui/src/components/Empty.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
const Empty = (props) => {
return (
<div className="pr-8 pt-2 pb-10 italic font-sans leading-normal text-neutral-400 dark:text-[rgba(255,255,255,0.85)]">
There are currently no comments.
</div>
);
};
export default Empty;

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

@ -12,9 +12,11 @@ const NotPaidBox = (props) => {
color: accentColor
};
const titleText = (props.isFirst ? 'Want to be the first to comment?' : 'Want to join the discussion?');
return (
<section className="text-center mb-1 bg-neutral-900 rounded-lg pt-12 pb-10 px-8" style={boxStyle}>
<h1 className="text-center text-white text-[28px] font-sans font-semibold mb-6 tracking-tight">Want to join the discussion?</h1>
<h1 className="text-center text-white text-[28px] font-sans font-semibold mb-6 tracking-tight">{titleText}</h1>
<a className="bg-white font-sans py-3 px-4 mb-6 rounded inline-block font-medium" style={buttonStyle} href="#/portal/signup">
Subscribe now
</a>

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

@ -12,9 +12,11 @@ const NotSignedInBox = (props) => {
color: accentColor
};
const titleText = (props.isFirst ? 'Want to be the first to comment?' : 'Want to join the discussion?');
return (
<section className="text-center mb-1 bg-neutral-900 rounded-lg pt-12 pb-10 px-8" style={boxStyle}>
<h1 className="text-center text-white text-[28px] font-sans font-semibold mb-6 tracking-tight">Want to join the discussion?</h1>
<h1 className="text-center text-white text-[28px] font-sans font-semibold mb-6 tracking-tight">{titleText}</h1>
<a className="bg-white font-sans py-3 px-4 mb-6 rounded inline-block font-medium" style={buttonStyle} href="#/portal/signup">
Subscribe now
</a>