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 PostMessage = ({ post }: PostProps) => {
const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state } = post || {}; 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 banned = !!post?.commentAuthor?.banExpiresAt;
const { t } = useTranslation(); const { t } = useTranslation();
const params = useParams(); const params = useParams();
@@ -287,17 +287,25 @@ const PostMessage = ({ post }: PostProps) => {
<blockquote className={styles.postMessage}> <blockquote className={styles.postMessage}>
{isReply && !(removed || deleted) && state !== 'failed' && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />} {isReply && !(removed || deleted) && state !== 'failed' && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
{removed ? ( {removed ? (
<Tooltip reason ? (
children={<span className={styles.removedContent}>({t('this_post_was_removed')})</span>} <>
content={`${_.capitalize(t('reason'))}: "${reason}"`} <span className={styles.redEditMessage}>({t('this_post_was_removed')})</span>
showTooltip={!!reason} <br />
/> <br />
<span className={styles.grayEditMessage}>{`${_.capitalize(t('reason'))}: "${reason}"`}.</span>
</>
) : (
<span className={styles.grayEditMessage}>{_.capitalize(t('this_post_was_removed'))}.</span>
)
) : deleted ? ( ) : deleted ? (
<Tooltip reason ? (
children={<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>} <>
content={reason && `${t('reason')}: ${reason}`} <span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>{' '}
showTooltip={!!reason} <span className={styles.grayEditMessage}>{`${_.capitalize(t('reason'))}: "${reason}"`}.</span>
/> </>
) : (
<span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>
)
) : ( ) : (
<> <>
{!showOriginal && <Markdown content={displayContent} />} {!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 && ( {/* {banned && (
<span className={styles.removedContent}> <span className={styles.removedContent}>
<br /> <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}`}> <blockquote className={`${styles.postMessage} ${!isReply && styles.clampLines}`}>
{isReply && !(removed || deleted) && state !== 'failed' && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />} {isReply && !(removed || deleted) && state !== 'failed' && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
{removed ? ( {removed ? (
<Tooltip reason ? (
children={<span className={styles.removedContent}>({t('this_post_was_removed')})</span>} <>
content={`${_.capitalize(t('reason'))}: "${reason}"`} <span className={styles.redEditMessage}>({t('this_post_was_removed')})</span>
showTooltip={!!reason} <br />
/> <br />
<span className={styles.grayEditMessage}>{`${_.capitalize(t('reason'))}: "${reason}"`}.</span>
</>
) : (
<span className={styles.grayEditMessage}>{_.capitalize(t('this_post_was_removed'))}.</span>
)
) : deleted ? ( ) : deleted ? (
<Tooltip reason ? (
children={<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>} <>
content={reason && `${t('reason')}: ${reason}`} <span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>{' '}
showTooltip={!!reason} <span className={styles.grayEditMessage}>{`${_.capitalize(t('reason'))}: "${reason}"`}.</span>
/> </>
) : (
<span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>
)
) : ( ) : (
<> <>
{!showOriginal && <Markdown content={displayContent} />} {!showOriginal && <Markdown content={displayContent} />}
src/index.css
+4
View File
@@ -30,6 +30,10 @@ hr {
text-transform: capitalize; text-transform: capitalize;
} }
.uppercase {
text-transform: uppercase;
}
.red { .red {
color: red !important; color: red !important;
} }
src/views/post/post.module.css
+4 -3
View File
@@ -441,13 +441,14 @@
cursor: pointer; cursor: pointer;
} }
.removedContent, .deletedContent { .redEditMessage {
text-transform: uppercase;
font-weight: 700; font-weight: 700;
color: red; color: red;
} }
.removedContent { .grayEditMessage {
text-transform: uppercase; color: var(--post-mobile-abbr-text-color);
} }
.backlink, .backlinkHash { .backlink, .backlinkHash {