mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
add PostOnHover to mobile view
This commit is contained in:
plebeius.eth
+252
-128
@@ -36,154 +36,278 @@ const PostOnHover = ({ cid, feed }) => {
|
||||
<div className="board" style={{margin: '0', padding: '0'}}>
|
||||
<div className="thread" style={{margin: '0', padding: '0'}}>
|
||||
{reply.state === 'succeeded' ? (
|
||||
<div className="reply-container">
|
||||
<div className="post-reply post-reply-desktop">
|
||||
<div className="post-info">
|
||||
<span className="nameblock">
|
||||
{reply.author?.displayName
|
||||
? reply.author?.displayName.length > 20
|
||||
? <Fragment >
|
||||
<span className="name"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={reply.author?.displayName}
|
||||
data-tooltip-place="top">
|
||||
{reply.author?.displayName.slice(0, 20) + " (...)"}
|
||||
</span>
|
||||
</Fragment>
|
||||
<div className="reply-container">
|
||||
<div className="post-reply post-reply-desktop">
|
||||
<div className="post-info">
|
||||
<span className="nameblock">
|
||||
{reply.author?.displayName
|
||||
? reply.author?.displayName.length > 20
|
||||
? <Fragment >
|
||||
<span className="name"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={reply.author?.displayName}
|
||||
data-tooltip-place="top">
|
||||
{reply.author?.displayName.slice(0, 20) + " (...)"}
|
||||
</span>
|
||||
</Fragment>
|
||||
: <span className="name">
|
||||
{reply.author?.displayName}</span>
|
||||
: <span className="name">
|
||||
{reply.author?.displayName}</span>
|
||||
: <span className="name">
|
||||
Anonymous</span>}
|
||||
|
||||
<span className="poster-address address-desktop"
|
||||
id="reply-button" style={{cursor: "pointer"}}
|
||||
>
|
||||
(u/
|
||||
{reply.author?.shortAddress ?
|
||||
(
|
||||
<span >
|
||||
{reply.author?.shortAddress}
|
||||
</span>
|
||||
) : (
|
||||
<span >
|
||||
{account?.author?.shortAddress}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
)
|
||||
Anonymous</span>}
|
||||
|
||||
<span className="poster-address address-desktop"
|
||||
id="reply-button" style={{cursor: "pointer"}}
|
||||
>
|
||||
(u/
|
||||
{reply.author?.shortAddress ?
|
||||
(
|
||||
<span >
|
||||
{reply.author?.shortAddress}
|
||||
</span>
|
||||
) : (
|
||||
<span >
|
||||
{account?.author?.shortAddress}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
)
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
|
||||
|
||||
<span className="post-number post-number-desktop">
|
||||
<span >c/</span>
|
||||
{reply.shortCid ? (
|
||||
<Link to={() => {}} id="reply-button"
|
||||
title="Reply to this post">{reply.shortCid}</Link>
|
||||
) : (
|
||||
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
|
||||
)}
|
||||
</span>
|
||||
<div id="backlink-id" className="backlink">
|
||||
{reply.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
.map((reply, index) => (
|
||||
<div key={`div-${index}`} style={{display: 'inline-block'}}>
|
||||
<Link key={`link-${index}`} to={() => {}}
|
||||
className="quote-link">
|
||||
c/{reply.shortCid}</Link>
|
||||
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{replyMediaInfo?.url ? (
|
||||
<div className="file"
|
||||
style={{marginBottom: "5px"}}>
|
||||
<div className="reply-file-text">
|
||||
Link:
|
||||
<a href={replyMediaInfo.url} target="_blank"
|
||||
rel="noopener noreferrer">{
|
||||
replyMediaInfo?.url.length > 30 ?
|
||||
replyMediaInfo?.url.slice(0, 30) + "(...)" :
|
||||
replyMediaInfo?.url
|
||||
}</a> ({replyMediaInfo?.type})
|
||||
|
||||
<span className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
|
||||
|
||||
<span className="post-number post-number-desktop">
|
||||
<span >c/</span>
|
||||
{reply.shortCid ? (
|
||||
<Link to={() => {}} id="reply-button"
|
||||
title="Reply to this post">{reply.shortCid}</Link>
|
||||
) : (
|
||||
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
|
||||
)}
|
||||
</span>
|
||||
<div id="backlink-id" className="backlink">
|
||||
{reply.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
.map((reply, index) => (
|
||||
<div style={{display: 'inline-block'}}>
|
||||
<Link to={() => {}}
|
||||
className="quote-link">
|
||||
c/{reply.shortCid}</Link>
|
||||
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
{replyMediaInfo?.type === "webpage" ? (
|
||||
<div className="img-container">
|
||||
<span className="file-thumb-reply">
|
||||
{reply.thumbnailUrl ? (
|
||||
</div>
|
||||
{replyMediaInfo?.url ? (
|
||||
<div className="file"
|
||||
style={{marginBottom: "5px"}}>
|
||||
<div className="reply-file-text">
|
||||
Link:
|
||||
<a href={replyMediaInfo.url} target="_blank"
|
||||
rel="noopener noreferrer">{
|
||||
replyMediaInfo?.url.length > 30 ?
|
||||
replyMediaInfo?.url.slice(0, 30) + "(...)" :
|
||||
replyMediaInfo?.url
|
||||
}</a> ({replyMediaInfo?.type})
|
||||
</div>
|
||||
{replyMediaInfo?.type === "webpage" ? (
|
||||
<div className="img-container">
|
||||
<span className="file-thumb-reply">
|
||||
{reply.thumbnailUrl ? (
|
||||
<img
|
||||
src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "image" ? (
|
||||
<div className="img-container">
|
||||
<span className="file-thumb-reply">
|
||||
<img
|
||||
src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "image" ? (
|
||||
<div className="img-container">
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "video" ? (
|
||||
<span className="file-thumb-reply">
|
||||
<img
|
||||
<video controls
|
||||
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "video" ? (
|
||||
<span className="file-thumb-reply">
|
||||
<video controls
|
||||
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "audio" ? (
|
||||
<span className="file-thumb-reply">
|
||||
<audio controls
|
||||
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
{reply.content ? (
|
||||
reply.content?.length > 500 ?
|
||||
<Fragment >
|
||||
<blockquote comment={reply} className="post-message">
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "audio" ? (
|
||||
<span className="file-thumb-reply">
|
||||
<audio controls
|
||||
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
{reply.content ? (
|
||||
reply.content?.length > 500 ?
|
||||
<Fragment >
|
||||
<blockquote comment={reply} className="post-message">
|
||||
<Link to={() => {}} className="quotelink">
|
||||
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
|
||||
</Link>
|
||||
<Post content={reply.content?.slice(0, 500)} />
|
||||
<span className="ttl"> (...)
|
||||
<br /> <EditLabel
|
||||
commentCid={reply.cid}
|
||||
className="ttl"/><br />
|
||||
Comment too long. Click the link to view.</span>
|
||||
</blockquote>
|
||||
</Fragment>
|
||||
: <blockquote className="post-message">
|
||||
<Link to={() => {}} className="quotelink">
|
||||
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
|
||||
</Link>
|
||||
<Post content={reply.content?.slice(0, 500)} />
|
||||
<span className="ttl"> (...)
|
||||
<br /> <EditLabel
|
||||
commentCid={reply.cid}
|
||||
className="ttl"/><br />
|
||||
Comment too long. Click the link to view.</span>
|
||||
</blockquote>
|
||||
</Fragment>
|
||||
: <blockquote className="post-message">
|
||||
<Link to={() => {}} className="quotelink">
|
||||
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
|
||||
</Link>
|
||||
<Post content={reply.content} comment={reply} />
|
||||
<EditLabel
|
||||
commentCid={reply.cid}
|
||||
className="ttl"/>
|
||||
</blockquote>)
|
||||
: null}
|
||||
<Post content={reply.content} comment={reply} />
|
||||
<EditLabel
|
||||
commentCid={reply.cid}
|
||||
className="ttl"/>
|
||||
</blockquote>)
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="reply-container">
|
||||
<span className="ellipsis">{stateString}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="thread-mobile">
|
||||
{reply.state === 'succeeded' ? (
|
||||
<div className="reply-container">
|
||||
<div className="post-reply post-reply-mobile">
|
||||
<div className="post-info-mobile">
|
||||
<span className="name-block-mobile">
|
||||
{reply.author.displayName
|
||||
? reply.author.displayName.length > 20
|
||||
? <Fragment>
|
||||
<span className="name-mobile">
|
||||
{reply.author.displayName.slice(0, 20) + " (...)"}
|
||||
</span>
|
||||
</Fragment>
|
||||
: <span className="name-mobile">
|
||||
{reply.author.displayName}</span>
|
||||
: <span className="name-mobile">
|
||||
Anonymous</span>}
|
||||
|
||||
<span className="poster-address-mobile address-mobile"
|
||||
id="reply-button" style={{cursor: "pointer"}}
|
||||
>
|
||||
(u/
|
||||
{reply.author?.shortAddress ?
|
||||
(
|
||||
<span className="highlight-address-mobile">
|
||||
{reply.author?.shortAddress}
|
||||
</span>
|
||||
) : (
|
||||
<span>
|
||||
{account?.author?.shortAddress}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
)
|
||||
</span>
|
||||
<br />
|
||||
</span>
|
||||
<span className="date-time-mobile post-number-mobile">
|
||||
{getDate(reply.timestamp)}
|
||||
<span>c/</span>
|
||||
<Link to={() => {}} id="reply-button"
|
||||
>{reply.shortCid}
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
{reply.link ? (
|
||||
<div className="file-mobile">
|
||||
{replyMediaInfo?.url ? (
|
||||
replyMediaInfo.type === "webpage" ? (
|
||||
<div className="img-container">
|
||||
<span className="file-thumb-mobile">
|
||||
{reply.thumbnailUrl ? (
|
||||
<img
|
||||
src={replyMediaInfo.thumbnail} alt="thumbnail"
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
) : null}
|
||||
<div className="file-info-mobile">{replyMediaInfo.type}</div>
|
||||
</span>
|
||||
</div>
|
||||
) : replyMediaInfo.type === "image" ? (
|
||||
<div className="img-container">
|
||||
<span className="file-thumb-mobile">
|
||||
<img
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
<div className="file-info-mobile">{replyMediaInfo.type}</div>
|
||||
</span>
|
||||
</div>
|
||||
) : replyMediaInfo.type === "video" ? (
|
||||
<span className="file-thumb-mobile">
|
||||
<video
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
style={{ pointerEvents: "none" }}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
<div className="file-info-mobile">{replyMediaInfo.type}</div>
|
||||
</span>
|
||||
) : replyMediaInfo.type === "audio" ? (
|
||||
<span className="file-thumb-mobile">
|
||||
<audio
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
<div className="file-info-mobile">{replyMediaInfo.type}</div>
|
||||
</span>
|
||||
) : null
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
{reply.content ? (
|
||||
reply.content?.length > 500 ?
|
||||
<Fragment>
|
||||
<blockquote className="post-message">
|
||||
<Link to={() => {}} className="quotelink">
|
||||
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
|
||||
</Link>
|
||||
<Post content={reply.content?.slice(0, 500)} comment={reply} />
|
||||
<span className="ttl"> (...)
|
||||
<br />
|
||||
<EditLabel
|
||||
commentCid={reply.cid}
|
||||
className="ttl"/>
|
||||
<br />
|
||||
Comment too long. Click the link to view. </span>
|
||||
</blockquote>
|
||||
</Fragment>
|
||||
: <blockquote className="post-message">
|
||||
<Link to={() => {}} className="quotelink" >
|
||||
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
|
||||
</Link>
|
||||
<Post content={reply.content} comment={reply} />
|
||||
<EditLabel
|
||||
commentCid={reply.cid}
|
||||
className="ttl"/>
|
||||
</blockquote>)
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="reply-container">
|
||||
<span className="ellipsis">{stateString}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</BoardForm>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user