Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Removed empty element from DOM when neither title or count are shown

Browse source 
refs https://github.com/TryGhost/Team/issues/1695

This is based on feedback from Sodo!
This commit is contained in:
Fabien "egg" O'Carroll 2022-08-02 15:44:22 +01:00
parent c7655ceca0
commit 14a9fab688
1 changed files with 37 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,42 @@ import NotPaidBox from './NotPaidBox';
import Loading from './Loading';
import {ROOT_DIV_ID} from '../utils/constants';
const CommentsBoxTitle = ({title, showCount, count}) => {
// We have to check for null for title because null means default, wheras empty string means empty
if (!title && !showCount && title !== null) {
return null;
}
const Title = ({title}) => {
if (title === null) {
return (
<><span className="hidden sm:inline">Member </span><span className="capitalize sm:normal-case">discussion</span></>
);
}
return title;
};
const Count = ({showCount, count}) => {
if (!showCount) {
return null;
}
return (
<div className="text-neutral-400 text-[1.6rem]">{count} comments</div>
);
};
return (
<div className="w-full flex justify-between items-baseline font-sans mb-10">
<h2 className="font-bold text-[2.8rem] tracking-tight dark:text-[rgba(255,255,255,0.85)]">
<Title title={title}/>
</h2>
<Count showCount={showCount} count={count}/>
</div>
);
};
const CommentsBoxContent = (props) => {
const [isEditing, setIsEditing] = useState(false);
@ -40,12 +76,7 @@ const CommentsBoxContent = (props) => {
return (
<>
<div className="w-full flex justify-between items-baseline font-sans mb-10">
<h2 className="font-bold text-[2.8rem] tracking-tight dark:text-[rgba(255,255,255,0.85)]">
{title !== null ? title : <><span className="hidden sm:inline">Member </span><span className="capitalize sm:normal-case">discussion</span></>}
</h2>
{showCount ? <div className="text-neutral-400 text-[1.6rem]">{commentsCount} comments</div> : null}
</div>
<CommentsBoxTitle title={title} showCount={showCount} count={commentsCount}/>
<Pagination />
<div className={!pagination ? 'mt-4' : ''}>
{commentsCount > 0 && commentsElements}