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

feat(post): add button to show full comment when it's too long

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-08-12 18:11:18 +02:00
parent cfe8686d94
commit 99a219733c
3 changed files with 16 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+5 -9
View File
@@ -239,8 +239,7 @@ const PostMedia = ({ post }: PostProps) => {
};
const PostMessage = ({ post }: PostProps) => {
const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state } = post || {};
// TODO: commentAuthor is not available outside of editedComment, update when available
// const banned = !!post?.commentAuthor?.banExpiresAt;
const { t } = useTranslation();
@@ -249,7 +248,8 @@ const PostMessage = ({ post }: PostProps) => {
const isInPostView = isPostPageView(location.pathname, params);
const [showOriginal, setShowOriginal] = useState(false);
const displayContent = content && !isInPostView && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
const [showFullComment, setShowFullComment] = useState(false);
const displayContent = content && !isInPostView && content.length > 1000 && !showFullComment ? content.slice(0, 1000) : content;
const quotelinkReply = useComment({ commentCid: parentCid });
const isReply = parentCid;
@@ -318,14 +318,10 @@ const PostMessage = ({ post }: PostProps) => {
/>
</span>
)} */}
{!isReply && content.length > 1000 && !isInPostView && (
{content?.length > 1000 && !isInPostView && !showFullComment && (
<span className={styles.abbr}>
<br />
<Trans
i18nKey={'comment_too_long'}
shouldUnescape={true}
components={{ 1: <Link to={`/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${cid}`}`} /> }}
/>
<Trans i18nKey={'comment_too_long'} shouldUnescape={true} components={{ 1: <span onClick={() => setShowFullComment(true)} /> }} />
</span>
)}
{!cid && state === 'pending' && stateString !== 'Failed' && (
src/components/post-mobile/post-mobile.tsx
+5 -9
View File
@@ -163,8 +163,7 @@ const ReplyBacklinks = ({ post }: PostProps) => {
const PostMessageMobile = ({ post }: PostProps) => {
const { t } = useTranslation();
const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state } = post || {};
// TODO: commentAuthor is not available outside of editedComment, update when available
// const banned = !!post?.commentAuthor?.banExpiresAt;
const [showOriginal, setShowOriginal] = useState(false);
@@ -173,7 +172,8 @@ const PostMessageMobile = ({ post }: PostProps) => {
const location = useLocation();
const isInPostView = isPostPageView(location.pathname, params);
const displayContent = content && !isInPostView && content.length > 1000 ? content?.slice(0, 1000) : content;
const [showFullComment, setShowFullComment] = useState(false);
const displayContent = content && !isInPostView && content.length > 1000 && !showFullComment ? content.slice(0, 1000) : content;
const quotelinkReply = useComment({ commentCid: parentCid });
const isReply = parentCid;
@@ -242,14 +242,10 @@ const PostMessageMobile = ({ post }: PostProps) => {
/>
</span>
)} */}
{!isReply && content.length > 1000 && !isInPostView && (
{content?.length > 1000 && !isInPostView && !showFullComment && (
<span className={styles.abbr}>
<br />
<Trans
i18nKey={'comment_too_long'}
shouldUnescape={true}
components={{ 1: <Link to={`/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${cid}`}`} /> }}
/>
<Trans i18nKey={'comment_too_long'} shouldUnescape={true} components={{ 1: <span onClick={() => setShowFullComment(true)} /> }} />
</span>
)}
{!cid && state === 'pending' && stateString !== 'Failed' && (
src/views/post/post.module.css
+6 -4
View File
@@ -164,12 +164,13 @@
font-size: var(--post-mobile-abbr-font-size);
}
.postDesktop .abbr a {
.postDesktop .abbr a, .postDesktop .abbr span {
color: var(--post-link-text-color);
text-decoration: var(--post-content-link-text-decoration);
}
.postDesktop .abbr a:hover {
.postDesktop .abbr a:hover, .postDesktop .abbr span:hover {
cursor: pointer;
color: var(--post-link-text-color-hover);
text-decoration: var(--post-content-link-text-decoration-hover);
}
@@ -344,13 +345,14 @@
font-size: var(--post-mobile-abbr-font-size);
}
.postMobile .abbr a {
.postMobile .abbr a, .postMobile .abbr span {
color: var(--post-link-text-color);
text-decoration: var(--post-content-link-text-decoration);
}
.postMobile .abbr a:hover {
.postMobile .abbr a:hover, .postMobile .abbr span:hover {
cursor: pointer;
color: var(--post-link-text-color-hover);
text-decoration: var(--post-content-link-text-decoration-hover);
}