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

add PostOnHover to mobile view

Browse Source
This commit is contained in:
plebeius.eth
2023-06-10 18:52:45 +02:00
parent 30947a67f0
commit 9659fb4480
4 changed files with 408 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PostOnHover.jsx
+252 -128
View File
@@ -36,154 +36,278 @@ const PostOnHover = ({ cid, feed }) => {
<div className="board" style={{margin: '0', padding: '0'}}> <div className="board" style={{margin: '0', padding: '0'}}>
<div className="thread" style={{margin: '0', padding: '0'}}> <div className="thread" style={{margin: '0', padding: '0'}}>
{reply.state === 'succeeded' ? ( {reply.state === 'succeeded' ? (
<div className="reply-container"> <div className="reply-container">
<div className="post-reply post-reply-desktop"> <div className="post-reply post-reply-desktop">
<div className="post-info"> <div className="post-info">
<span className="nameblock"> <span className="nameblock">
{reply.author?.displayName {reply.author?.displayName
? reply.author?.displayName.length > 20 ? reply.author?.displayName.length > 20
? <Fragment > ? <Fragment >
<span className="name" <span className="name"
data-tooltip-id="tooltip" data-tooltip-id="tooltip"
data-tooltip-content={reply.author?.displayName} data-tooltip-content={reply.author?.displayName}
data-tooltip-place="top"> data-tooltip-place="top">
{reply.author?.displayName.slice(0, 20) + " (...)"} {reply.author?.displayName.slice(0, 20) + " (...)"}
</span> </span>
</Fragment> </Fragment>
: <span className="name">
{reply.author?.displayName}</span>
: <span className="name"> : <span className="name">
{reply.author?.displayName}</span> Anonymous</span>}
: <span className="name"> &nbsp;
Anonymous</span>} <span className="poster-address address-desktop"
&nbsp; id="reply-button" style={{cursor: "pointer"}}
<span className="poster-address address-desktop" >
id="reply-button" style={{cursor: "pointer"}} (u/
> {reply.author?.shortAddress ?
(u/ (
{reply.author?.shortAddress ? <span >
( {reply.author?.shortAddress}
<span > </span>
{reply.author?.shortAddress} ) : (
</span> <span >
) : ( {account?.author?.shortAddress}
<span > </span>
{account?.author?.shortAddress} )
</span> }
) )
} </span>
)
</span> </span>
</span> &nbsp;
&nbsp; <span className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
<span className="date-time" data-utc="data">{getDate(reply.timestamp)}</span> &nbsp;
&nbsp; <span className="post-number post-number-desktop">
<span className="post-number post-number-desktop"> <span >c/</span>
<span >c/</span> {reply.shortCid ? (
{reply.shortCid ? ( <Link to={() => {}} id="reply-button"
<Link to={() => {}} id="reply-button" title="Reply to this post">{reply.shortCid}</Link>
title="Reply to this post">{reply.shortCid}</Link> ) : (
) : ( <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span> )}
)} </span>&nbsp;
</span>&nbsp; <div id="backlink-id" className="backlink">
<div id="backlink-id" className="backlink"> {reply.replies?.pages?.topAll.comments
{reply.replies?.pages?.topAll.comments .sort((a, b) => a.timestamp - b.timestamp)
.sort((a, b) => a.timestamp - b.timestamp) .map((reply, index) => (
.map((reply, index) => ( <div style={{display: 'inline-block'}}>
<div key={`div-${index}`} style={{display: 'inline-block'}}> <Link to={() => {}}
<Link key={`link-${index}`} to={() => {}} className="quote-link">
className="quote-link"> c/{reply.shortCid}</Link>
c/{reply.shortCid}</Link> &nbsp;
&nbsp; </div>
</div> ))
)) }
}
</div>
</div>
{replyMediaInfo?.url ? (
<div className="file"
style={{marginBottom: "5px"}}>
<div className="reply-file-text">
Link:&nbsp;
<a href={replyMediaInfo.url} target="_blank"
rel="noopener noreferrer">{
replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
</div> </div>
{replyMediaInfo?.type === "webpage" ? ( </div>
<div className="img-container"> {replyMediaInfo?.url ? (
<span className="file-thumb-reply"> <div className="file"
{reply.thumbnailUrl ? ( style={{marginBottom: "5px"}}>
<div className="reply-file-text">
Link:&nbsp;
<a href={replyMediaInfo.url} target="_blank"
rel="noopener noreferrer">{
replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({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 <img
src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} </span>
</span> </div>
</div> ) : null}
) : null} {replyMediaInfo?.type === "video" ? (
{replyMediaInfo?.type === "image" ? (
<div className="img-container">
<span className="file-thumb-reply"> <span className="file-thumb-reply">
<img <video controls
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</div> ) : null}
) : null} {replyMediaInfo?.type === "audio" ? (
{replyMediaInfo?.type === "video" ? ( <span className="file-thumb-reply">
<span className="file-thumb-reply"> <audio controls
<video controls
src={replyMediaInfo.url} alt={replyMediaInfo.type}
src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
onError={(e) => e.target.src = fallbackImgUrl} /> </span>
</span> ) : null}
) : null} </div>
{replyMediaInfo?.type === "audio" ? ( ) : null}
<span className="file-thumb-reply"> {reply.content ? (
<audio controls reply.content?.length > 500 ?
<Fragment >
src={replyMediaInfo.url} alt={replyMediaInfo.type} <blockquote comment={reply} className="post-message">
onError={(e) => e.target.src = fallbackImgUrl} /> <Link to={() => {}} className="quotelink">
</span> {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
) : null} </Link>
</div> <Post content={reply.content?.slice(0, 500)} />
) : null} <span className="ttl"> (...)
{reply.content ? ( <br /> <EditLabel
reply.content?.length > 500 ? commentCid={reply.cid}
<Fragment > className="ttl"/><br />
<blockquote comment={reply} className="post-message"> Comment too long. Click the link to view.</span>
</blockquote>
</Fragment>
: <blockquote className="post-message">
<Link to={() => {}} className="quotelink"> <Link to={() => {}} className="quotelink">
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content?.slice(0, 500)} /> <Post content={reply.content} comment={reply} />
<span className="ttl"> (...) <EditLabel
<br /> <EditLabel commentCid={reply.cid}
commentCid={reply.cid} className="ttl"/>
className="ttl"/><br /> </blockquote>)
Comment too long. Click the link to view.</span> : null}
</blockquote> </div>
</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>
) : ( ) : (
<div className="reply-container"> <div className="reply-container">
<span className="ellipsis">{stateString}</span> <span className="ellipsis">{stateString}</span>
</div> </div>
)} )}
</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>}
&nbsp;
<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>
)
}
)&nbsp;
</span>
<br />
</span>
<span className="date-time-mobile post-number-mobile">
{getDate(reply.timestamp)}&nbsp;
<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> </div>
</BoardForm> </BoardForm>
</Container> </Container>
src/components/views/Board.jsx
+90 -5
View File
@@ -81,9 +81,11 @@ const Board = () => {
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const backlinkRefs = useRef({}); const backlinkRefs = useRef({});
const quoteRefs = useRef({}); const quoteRefs = useRef({});
const backlinkRefsMobile = useRef({});
const quoteRefsMobile = useRef({});
const postOnHoverRef = useRef(null); const postOnHoverRef = useRef(null);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'}); const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress}); const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
const stateString = useStateString(subplebbit); const stateString = useStateString(subplebbit);
@@ -1716,8 +1718,37 @@ const Board = () => {
<Fragment key={`fragment15-${index}`}> <Fragment key={`fragment15-${index}`}>
<blockquote key={`mob-pm-${index}`} className="post-message"> <blockquote key={`mob-pm-${index}`} className="post-message">
<Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink"
ref={el => {
quoteRefsMobile.current[shortParentCid] = el;
}}
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))} onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
}
});
}}
onMouseLeave={() => { onMouseLeave={() => {
removeHighlight(); removeHighlight();
setOutOfViewCid(null); setOutOfViewCid(null);
@@ -1741,8 +1772,37 @@ const Board = () => {
</Fragment> </Fragment>
: <blockquote key={`mob-pm-${index}`} className="post-message"> : <blockquote key={`mob-pm-${index}`} className="post-message">
<Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink"
ref={el => {
quoteRefsMobile.current[shortParentCid] = el;
}}
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))} onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
}
});
}}
onMouseLeave={() => { onMouseLeave={() => {
removeHighlight(); removeHighlight();
setOutOfViewCid(null); setOutOfViewCid(null);
@@ -1763,10 +1823,35 @@ const Board = () => {
{reply.replies?.pages?.topAll.comments {reply.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp) .sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-back${index}`} style={{display: 'inline-block'}}> <div key={`div-back${index}`} style={{display: 'inline-block'}}
ref={el => {
backlinkRefsMobile.current[reply.cid] = el;
}}>
<Link key={`ql-${index}`} to={() => {}} <Link key={`ql-${index}`} to={() => {}}
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))} onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, reply.shortCid, () => {
setOutOfViewCid(reply.cid)
const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
});
}}
onMouseLeave={() => { onMouseLeave={() => {
removeHighlight(); removeHighlight();
setOutOfViewCid(null); setOutOfViewCid(null);
src/components/views/Catalog.jsx
+1 -1
View File
@@ -78,7 +78,7 @@ const Catalog = () => {
const [openMenuCid, setOpenMenuCid] = useState(null); const [openMenuCid, setOpenMenuCid] = useState(null);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'}); const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
const account = useAccount(); const account = useAccount();
src/components/views/Thread.jsx
+65 -9
View File
@@ -98,6 +98,8 @@ const Thread = () => {
const [outOfViewCid, setOutOfViewCid] = useState(null); const [outOfViewCid, setOutOfViewCid] = useState(null);
const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0}); const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0); const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
const backlinkRefsMobile = useRef({});
const quoteRefsMobile = useRef({});
const comment = useComment({commentCid: selectedThread}); const comment = useComment({commentCid: selectedThread});
@@ -1519,12 +1521,41 @@ const Thread = () => {
) : null} ) : null}
<blockquote key={`mob-pm-${index}`} className="post-message-mobile"> <blockquote key={`mob-pm-${index}`} className="post-message-mobile">
<span style={{cursor: 'pointer'}} key={`mob-ql-${index}`} className="quotelink-mobile" <span style={{cursor: 'pointer'}} key={`mob-ql-${index}`} className="quotelink-mobile"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} ref={el => {
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))} quoteRefsMobile.current[shortParentCid] = el;
onMouseLeave={() => { }}
removeHighlight(); onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
setOutOfViewCid(null); onMouseOver={(event) => {
}}> event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === comment.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
}
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</span> </span>
<Post content={reply.content} comment={reply} key={`post-mobile-${index}`} /> <Post content={reply.content} comment={reply} key={`post-mobile-${index}`} />
@@ -1540,14 +1571,39 @@ const Thread = () => {
{reply.replies?.pages?.topAll.comments {reply.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp) .sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-back${index}`} style={{display: 'inline-block'}}> <div key={`div-back${index}`} style={{display: 'inline-block'}}
ref={el => {
backlinkRefsMobile.current[reply.cid] = el;
}}>
<span style={{cursor: 'pointer'}} key={`ql-${index}`} className="quote-link" <span style={{cursor: 'pointer'}} key={`ql-${index}`} className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))} onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, reply.shortCid, () => {
setOutOfViewCid(reply.cid)
const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
});
}}
onMouseLeave={() => { onMouseLeave={() => {
removeHighlight(); removeHighlight();
setOutOfViewCid(null); setOutOfViewCid(null);
}}> }} >
c/{reply.shortCid}</span> c/{reply.shortCid}</span>
&nbsp; &nbsp;
</div> </div>