diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 556c9860..96bdff11 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -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) => {
/>
)} */}
- {!isReply && content.length > 1000 && !isInPostView && (
+ {content?.length > 1000 && !isInPostView && !showFullComment && (
- }}
- />
+ setShowFullComment(true)} /> }} />
)}
{!cid && state === 'pending' && stateString !== 'Failed' && (
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 025b65e5..81f07724 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/src/components/post-mobile/post-mobile.tsx
@@ -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) => {
/>
)} */}
- {!isReply && content.length > 1000 && !isInPostView && (
+ {content?.length > 1000 && !isInPostView && !showFullComment && (
- }}
- />
+ setShowFullComment(true)} /> }} />
)}
{!cid && state === 'pending' && stateString !== 'Failed' && (
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index 5c9e6bb0..14e78581 100644
--- a/src/views/post/post.module.css
+++ b/src/views/post/post.module.css
@@ -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);
}