External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(post): improve styling of deleted and removed comments

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-08-26 17:05:56 +02:00
parent 2a1b2729fc
commit dea1992c14
4 changed files with 46 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+20 -12
View File
@@ -262,7 +262,7 @@ const PostMedia = ({ post }: PostProps) => {
const PostMessage = ({ post }: PostProps) => {
const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state } = post || {};
// TODO: commentAuthor is not available outside of editedComment, update when available
// TODO: commentAuthor is not yet available outside of editedComment, wait for API to be updated
// const banned = !!post?.commentAuthor?.banExpiresAt;
const { t } = useTranslation();
const params = useParams();
@@ -287,17 +287,25 @@ const PostMessage = ({ post }: PostProps) => {
<blockquote className={styles.postMessage}>
{isReply && !(removed || deleted) && state !== 'failed' && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
{removed ? (
<Tooltip
children={<span className={styles.removedContent}>({t('this_post_was_removed')})</span>}
content={`${_.capitalize(t('reason'))}: "${reason}"`}
showTooltip={!!reason}
/>
reason ? (
<>
<span className={styles.redEditMessage}>({t('this_post_was_removed')})</span>
<br />
<br />
<span className={styles.grayEditMessage}>{`${_.capitalize(t('reason'))}: "${reason}"`}.</span>
</>
) : (
<span className={styles.grayEditMessage}>{_.capitalize(t('this_post_was_removed'))}.</span>
)
) : deleted ? (
<Tooltip
children={<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>}
content={reason && `${t('reason')}: ${reason}`}
showTooltip={!!reason}
/>
reason ? (
<>
<span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>{' '}
<span className={styles.grayEditMessage}>{`${_.capitalize(t('reason'))}: "${reason}"`}.</span>
</>
) : (
<span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>
)
) : (
<>
{!showOriginal && <Markdown content={displayContent} />}
@@ -329,7 +337,7 @@ const PostMessage = ({ post }: PostProps) => {
)}
</>
)}
{/* TODO: commentAuthor is not available outside of editedComment, update when available */}
{/* TODO: commentAuthor is not yet available outside of editedComment, wait for API to be updated */}
{/* {banned && (
<span className={styles.removedContent}>
<br />
src/components/post-mobile/post-mobile.tsx
+18 -10
View File
@@ -210,17 +210,25 @@ const PostMessageMobile = ({ post }: PostProps) => {
<blockquote className={`${styles.postMessage} ${!isReply && styles.clampLines}`}>
{isReply && !(removed || deleted) && state !== 'failed' && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
{removed ? (
<Tooltip
children={<span className={styles.removedContent}>({t('this_post_was_removed')})</span>}
content={`${_.capitalize(t('reason'))}: "${reason}"`}
showTooltip={!!reason}
/>
reason ? (
<>
<span className={styles.redEditMessage}>({t('this_post_was_removed')})</span>
<br />
<br />
<span className={styles.grayEditMessage}>{`${_.capitalize(t('reason'))}: "${reason}"`}.</span>
</>
) : (
<span className={styles.grayEditMessage}>{_.capitalize(t('this_post_was_removed'))}.</span>
)
) : deleted ? (
<Tooltip
children={<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>}
content={reason && `${t('reason')}: ${reason}`}
showTooltip={!!reason}
/>
reason ? (
<>
<span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>{' '}
<span className={styles.grayEditMessage}>{`${_.capitalize(t('reason'))}: "${reason}"`}.</span>
</>
) : (
<span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>
)
) : (
<>
{!showOriginal && <Markdown content={displayContent} />}