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

finished quote behavior for mobile

Browse Source
This commit is contained in:
plebbitor
2023-04-18 15:23:39 +02:00
parent b6c041ea9e
commit 1dc5a577ae
3 changed files with 44 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+20 -21
View File
@@ -457,8 +457,8 @@ const Board = () => {
   
<span key={`dt-${thread.cid}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span> <span key={`dt-${thread.cid}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
&nbsp; &nbsp;
<span key={`pn-${thread.cid}`} className="post-number"> <span key={`pn-${thread.cid}`} className="post-number post-number-desktop">
<Link to="" key={`pl1-${thread.cid}`} onClick={() => {}} title="Link to this post">c/</Link> <Link to={() => {}} key={`pl1-${thread.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${thread.cid}`} <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${thread.cid}`}
onClick={() => { onClick={() => {
setIsReplyOpen(true); setSelectedShortCid(thread.shortCid); setSelectedParentCid(thread.cid); setIsReplyOpen(true); setSelectedShortCid(thread.shortCid); setSelectedParentCid(thread.cid);
@@ -522,7 +522,7 @@ const Board = () => {
return ( return (
<div key={`rc-${reply.cid}`} className="reply-container"> <div key={`rc-${reply.cid}`} className="reply-container">
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div> <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
<div key={`pr-${reply.cid}`} className="post-reply"> <div key={`pr-${reply.cid}`} className="post-reply post-reply-desktop">
<div key={`pi-${reply.cid}`} className="post-info"> <div key={`pi-${reply.cid}`} className="post-info">
<span key={`nb-${reply.cid}`} className="nameblock"> <span key={`nb-${reply.cid}`} className="nameblock">
{reply.author.displayName {reply.author.displayName
@@ -551,8 +551,8 @@ const Board = () => {
&nbsp; &nbsp;
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span> <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
&nbsp; &nbsp;
<span key={`pn-${reply.cid}`} className="post-number"> <span key={`pn-${reply.cid}`} className="post-number post-number-desktop">
<Link to="" key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link> <Link to={() => {}} key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`} <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`}
onClick={() => { onClick={() => {
setIsReplyOpen(true); setSelectedShortCid(reply.shortCid); setSelectedParentCid(reply.cid); setIsReplyOpen(true); setSelectedShortCid(reply.shortCid); setSelectedParentCid(reply.cid);
@@ -624,10 +624,10 @@ const Board = () => {
reply.content.length > 500 ? reply.content.length > 500 ?
<Fragment key={`fragment8-${reply.cid}`}> <Fragment key={`fragment8-${reply.cid}`}>
<blockquote key={`pm-${reply.cid}`} comment={reply} className="post-message"> <blockquote key={`pm-${reply.cid}`} comment={reply} className="post-message">
<Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}> <Link to={() => {}} key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content.slice(0, 500)} key={`post-${reply.cid}`} handlequoteclick={handleQuoteClick} /> <Post content={reply.content.slice(0, 500)} key={`post-${reply.cid}`} />
<span key={`ttl-s-${reply.cid}`} className="ttl"> (...) <span key={`ttl-s-${reply.cid}`} className="ttl"> (...)
<br key={`ttl-s-br1-${reply.cid}`} /><br key={`ttl-s-br2${reply.cid}`} /> <br key={`ttl-s-br1-${reply.cid}`} /><br key={`ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp; Comment too long.&nbsp;
@@ -636,10 +636,10 @@ const Board = () => {
</blockquote> </blockquote>
</Fragment> </Fragment>
: <blockquote key={`pm-${reply.cid}`} className="post-message"> : <blockquote key={`pm-${reply.cid}`} className="post-message">
<Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}> <Link to={() => {}} key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} key={`post-${reply.cid}`} handlequoteclick={handleQuoteClick} comment={reply} /> <Post content={reply.content} key={`post-${reply.cid}`} comment={reply} />
</blockquote>) </blockquote>)
: null} : null}
</div> </div>
@@ -692,10 +692,10 @@ const Board = () => {
</span>) </span>)
: null} : null}
</span> </span>
<span key={`mob-dt-${thread.cid}`} className="date-time-mobile post-number"> <span key={`mob-dt-${thread.cid}`} className="date-time-mobile post-number-mobile">
{getDate(thread.timestamp)} {getDate(thread.timestamp)}
&nbsp; &nbsp;
<Link to="" key={`mob-no-${thread.cid}`} onClick={() => {}} title="Link to this post">c/</Link> <Link to={() => {}} key={`mob-no-${thread.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no2-${thread.cid}`} onClick={() => { <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no2-${thread.cid}`} onClick={() => {
setIsReplyOpen(true); setSelectedShortCid(thread.shortCid); setSelectedParentCid(thread.cid); setIsReplyOpen(true); setSelectedShortCid(thread.shortCid); setSelectedParentCid(thread.cid);
}} title="Reply to this post">{thread.shortCid}</button> }} title="Reply to this post">{thread.shortCid}</button>
@@ -770,7 +770,7 @@ const Board = () => {
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
return ( return (
<div key={`mob-rc-${reply.cid}`} className="reply-container"> <div key={`mob-rc-${reply.cid}`} className="reply-container">
<div key={`mob-pr-${reply.cid}`} className="post-reply"> <div key={`mob-pr-${reply.cid}`} className="post-reply post-reply-mobile">
<div key={`mob-pi-${reply.cid}`} className="post-info-mobile"> <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
<button key={`pmbm-${reply.cid}`} className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button> <button key={`pmbm-${reply.cid}`} className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
<span key={`mob-nb-${reply.cid}`} className="name-block-mobile"> <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
@@ -798,9 +798,9 @@ const Board = () => {
</span> </span>
<br key={`mob-br-${reply.cid}`} /> <br key={`mob-br-${reply.cid}`} />
</span> </span>
<span key={`mob-dt-${reply.cid}`} className="date-time-mobile post-number"> <span key={`mob-dt-${reply.cid}`} className="date-time-mobile post-number-mobile">
{getDate(reply.timestamp)}&nbsp; {getDate(reply.timestamp)}&nbsp;
<Link to="" key={`mob-pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link> <Link to={() => {}} key={`mob-pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={() => { <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={() => {
setIsReplyOpen(true); setSelectedShortCid(reply.shortCid); setSelectedParentCid(reply.cid) setIsReplyOpen(true); setSelectedShortCid(reply.shortCid); setSelectedParentCid(reply.cid)
}} title="Reply to this post">{reply.shortCid}</button> }} title="Reply to this post">{reply.shortCid}</button>
@@ -843,10 +843,10 @@ const Board = () => {
reply.content.length > 500 ? reply.content.length > 500 ?
<Fragment key={`fragment15-${reply.cid}`}> <Fragment key={`fragment15-${reply.cid}`}>
<blockquote key={`mob-pm-${reply.cid}`} className="post-message"> <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
<Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}> <Link to={() => {}} key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content.slice(0, 500)} key={`post-mobile-${reply.cid}`} handlequoteclick={handleQuoteClick} comment={reply} /> <Post content={reply.content.slice(0, 500)} key={`post-mobile-${reply.cid}`} comment={reply} />
<span key={`mob-ttl-s-${reply.cid}`} className="ttl"> (...) <span key={`mob-ttl-s-${reply.cid}`} className="ttl"> (...)
<br key={`mob-ttl-s-br1-${reply.cid}`} /><br key={`mob-ttl-s-br2${reply.cid}`} /> <br key={`mob-ttl-s-br1-${reply.cid}`} /><br key={`mob-ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp; Comment too long.&nbsp;
@@ -855,10 +855,10 @@ const Board = () => {
</blockquote> </blockquote>
</Fragment> </Fragment>
: <blockquote key={`mob-pm-${reply.cid}`} className="post-message"> : <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
<Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}> <Link to={() => {}} key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} key={`post-mobile-${reply.cid}`} handlequoteclick={handleQuoteClick} comment={reply} /> <Post content={reply.content} key={`post-mobile-${reply.cid}`} comment={reply} />
</blockquote>) </blockquote>)
: null} : null}
{reply.replyCount > 0 ? ( {reply.replyCount > 0 ? (
@@ -867,9 +867,8 @@ const Board = () => {
.sort((a, b) => a.timestamp - b.timestamp) .sort((a, b) => a.timestamp - b.timestamp)
.map((reply) => ( .map((reply) => (
<div key={`div-back${reply.cid}`} style={{display: 'inline-block'}}> <div key={`div-back${reply.cid}`} style={{display: 'inline-block'}}>
<Link key={`ql-${reply.cid}`} <Link key={`ql-${reply.cid}`} to={() => {}}
to={(event) => handleQuoteClick(reply, reply.shortCid, event)} className="quote-link" onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} className="quote-link">
onClick={(event) => handleQuoteClick(reply, event)}>
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
&nbsp; &nbsp;
</div> </div>
src/components/views/Thread.jsx
+16 -16
View File
@@ -477,8 +477,8 @@ const Thread = () => {
&nbsp; &nbsp;
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span> <span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
&nbsp; &nbsp;
<span className="post-number"> <span className="post-number post-number-desktop">
<Link to="" onClick={() => {}} title="Link to this post">c/</Link> <Link to={() => {}} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={() => { <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid); setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
}} title="Reply to this post">{comment.shortCid}</button> }} title="Reply to this post">{comment.shortCid}</button>
@@ -500,7 +500,7 @@ const Thread = () => {
</div> </div>
</span> </span>
<blockquote key={`blockquote-${comment.cid}`}> <blockquote key={`blockquote-${comment.cid}`}>
<Post content={comment.content} handlequoteclick={handleQuoteClick} comment={comment} key={`post-${comment.cid}`} /> <Post content={comment.content} comment={comment} key={`post-${comment.cid}`} />
</blockquote> </blockquote>
</div> </div>
</div> </div>
@@ -514,7 +514,7 @@ const Thread = () => {
return ( return (
<div key={`pc-${reply.cid}`} className="reply-container"> <div key={`pc-${reply.cid}`} className="reply-container">
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div> <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
<div key={`pr-${reply.cid}`} className="post-reply"> <div key={`pr-${reply.cid}`} className="post-reply post-reply-desktop">
<div key={`pi-${reply.cid}`} className="post-info"> <div key={`pi-${reply.cid}`} className="post-info">
&nbsp; &nbsp;
<span key={`nb-${reply.cid}`} className="nameblock"> <span key={`nb-${reply.cid}`} className="nameblock">
@@ -543,8 +543,8 @@ const Thread = () => {
&nbsp; &nbsp;
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply?.timestamp)}</span> <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply?.timestamp)}</span>
&nbsp; &nbsp;
<span key={`pn-${reply.cid}`} className="post-number"> <span key={`pn-${reply.cid}`} className="post-number post-number-desktop">
<Link to="" key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link> <Link to={() => {}} key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`} onClick={() => { <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid); setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
}} title="Reply to this post">{reply.shortCid ?? ( }} title="Reply to this post">{reply.shortCid ?? (
@@ -623,7 +623,7 @@ const Thread = () => {
> >
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} comment={reply} handlequoteclick={handleQuoteClick} key={`post-${reply.cid}`} /> <Post content={reply.content} comment={reply} key={`post-${reply.cid}`} />
</blockquote> </blockquote>
</div> </div>
</div> </div>
@@ -675,13 +675,13 @@ const Thread = () => {
{comment.title} {comment.title}
</span>) : null} </span>) : null}
</span> </span>
<span key={`mob-dt-${comment.cid}`} className="date-time-mobile"> <span key={`mob-dt-${comment.cid}`} className="date-time-mobile post-number-mobile">
{getDate(comment?.timestamp)} {getDate(comment?.timestamp)}
&nbsp; &nbsp;
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={() => { <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid); setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
}} title="Link to this post">c/</button> }} title="Link to this post">c/</button>
<Link to="" key={`mob-no2-${comment.cid}`} onClick={() => {}} title="Reply to this post">{comment.shortCid}</Link> <Link to={() => {}} key={`mob-no2-${comment.cid}`} onClick={() => {}} title="Reply to this post">{comment.shortCid}</Link>
</span> </span>
</div> </div>
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
@@ -718,7 +718,7 @@ const Thread = () => {
<blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile"> <blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile">
{comment.content ? ( {comment.content ? (
<> <>
<Post content={comment.content} handlequoteclick={handleQuoteClick} comment={comment} key={`post-mobile-${comment.cid}`} /> <Post content={comment.content} comment={comment} key={`post-mobile-${comment.cid}`} />
</> </>
) : null} ) : null}
</blockquote> </blockquote>
@@ -730,7 +730,7 @@ const Thread = () => {
const shortParentCid = findShortParentCid(reply.parentCid, comment); const shortParentCid = findShortParentCid(reply.parentCid, comment);
return ( return (
<div key={`mob-rc-${reply.cid}`} className="reply-container"> <div key={`mob-rc-${reply.cid}`} className="reply-container">
<div key={`mob-pr-${reply.cid}`} className="post-reply"> <div key={`mob-pr-${reply.cid}`} className="post-reply post-reply-mobile">
<div key={`mob-pi-${reply.cid}`} className="post-info-mobile"> <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
<button className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button> <button className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
<span key={`mob-nb-${reply.cid}`} className="name-block-mobile"> <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
@@ -758,9 +758,9 @@ const Thread = () => {
</span> </span>
<br key={`mob-br-${reply.cid}`} /> <br key={`mob-br-${reply.cid}`} />
</span> </span>
<span key={`mob-dt-${reply.cid}`} className="date-time-mobile"> <span key={`mob-dt-${reply.cid}`} className="date-time-mobile post-number-mobile">
{getDate(reply?.timestamp)}&nbsp; {getDate(reply?.timestamp)}&nbsp;
<Link to="" key={`mob-pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link> <Link to={() => {}} key={`mob-pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={() => { <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid); setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
}} title="Reply to this post">{reply.shortCid}</button> }} title="Reply to this post">{reply.shortCid}</button>
@@ -771,7 +771,7 @@ const Thread = () => {
onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}> onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} comment={reply} handlequoteclick={handleQuoteClick} key={`post-mobile-${reply.cid}`} /> <Post content={reply.content} comment={reply} key={`post-mobile-${reply.cid}`} />
</blockquote> </blockquote>
{reply.replyCount > 0 ? ( {reply.replyCount > 0 ? (
<div key={`back-mob-${reply.cid}`} className='backlink backlink-mobile'> <div key={`back-mob-${reply.cid}`} className='backlink backlink-mobile'>
@@ -781,7 +781,7 @@ const Thread = () => {
<div key={`div-back${reply.cid}`} style={{display: 'inline-block'}}> <div key={`div-back${reply.cid}`} style={{display: 'inline-block'}}>
<Link key={`ql-${reply.cid}`} <Link key={`ql-${reply.cid}`}
to={() => {}} className="quote-link" to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}> onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
&nbsp; &nbsp;
</div> </div>
@@ -816,7 +816,7 @@ const Thread = () => {
</span> </span>
<span className="quickreply-button"> <span className="quickreply-button">
[ [
<Link to="" onClick={() => {}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</Link> <Link to={() => {}} onClick={() => {}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</Link>
] ]
</span> </span>
{comment.replyCount > 0 ? ( {comment.replyCount > 0 ? (
src/utils/handleQuoteClick.js
+8 -4
View File
@@ -1,5 +1,6 @@
function handleQuoteClick(reply, parentCid, threadCid) { function handleQuoteClick(reply, parentCid, threadCid) {
const cid = parentCid ? parentCid : reply.shortCid; const cid = parentCid ? parentCid : reply.shortCid;
const isMobile = window.innerWidth <= 480;
if (threadCid && cid === threadCid) { if (threadCid && cid === threadCid) {
const highlightedElements = document.querySelectorAll('.highlighted'); const highlightedElements = document.querySelectorAll('.highlighted');
@@ -7,19 +8,22 @@ function handleQuoteClick(reply, parentCid, threadCid) {
highlightedElements.forEach(el => { highlightedElements.forEach(el => {
el.classList.remove('highlighted'); el.classList.remove('highlighted');
}); });
return; return;
} }
const targetElement = [...document.querySelectorAll('.post-reply')] const targetElementSelector = isMobile ? '.post-reply-mobile' : '.post-reply-desktop';
const postNumberSelector = isMobile ? '.post-number-mobile' : '.post-number-desktop';
const targetElement = [...document.querySelectorAll(targetElementSelector)]
.find(el => { .find(el => {
const postNumberElement = el.querySelector('.post-number'); const postNumberElement = el.querySelector(postNumberSelector);
return postNumberElement && postNumberElement.innerHTML.includes(cid); return postNumberElement && postNumberElement.innerHTML.includes(cid);
}); });
if (targetElement) { if (targetElement) {
const highlightedElements = document.querySelectorAll('.highlighted'); const highlightedElements = document.querySelectorAll('.highlighted');
highlightedElements.forEach(el => { highlightedElements.forEach(el => {
el.classList.remove('highlighted'); el.classList.remove('highlighted');
}); });