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>
&nbsp;
<span key={`pn-${thread.cid}`} className="post-number">
<Link to="" key={`pl1-${thread.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<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>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${thread.cid}`}
onClick={() => {
setIsReplyOpen(true); setSelectedShortCid(thread.shortCid); setSelectedParentCid(thread.cid);
@@ -522,7 +522,7 @@ const Board = () => {
return (
<div key={`rc-${reply.cid}`} className="reply-container">
<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">
<span key={`nb-${reply.cid}`} className="nameblock">
{reply.author.displayName
@@ -551,8 +551,8 @@ const Board = () => {
&nbsp;
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
&nbsp;
<span key={`pn-${reply.cid}`} className="post-number">
<Link to="" key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<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>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`}
onClick={() => {
setIsReplyOpen(true); setSelectedShortCid(reply.shortCid); setSelectedParentCid(reply.cid);
@@ -624,10 +624,10 @@ const Board = () => {
reply.content.length > 500 ?
<Fragment key={`fragment8-${reply.cid}`}>
<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}
</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"> (...)
<br key={`ttl-s-br1-${reply.cid}`} /><br key={`ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp;
@@ -636,10 +636,10 @@ const Board = () => {
</blockquote>
</Fragment>
: <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}
</Link>
<Post content={reply.content} key={`post-${reply.cid}`} handlequoteclick={handleQuoteClick} comment={reply} />
<Post content={reply.content} key={`post-${reply.cid}`} comment={reply} />
</blockquote>)
: null}
</div>
@@ -692,10 +692,10 @@ const Board = () => {
</span>)
: null}
</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)}
&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={() => {
setIsReplyOpen(true); setSelectedShortCid(thread.shortCid); setSelectedParentCid(thread.cid);
}} title="Reply to this post">{thread.shortCid}</button>
@@ -770,7 +770,7 @@ const Board = () => {
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
return (
<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">
<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">
@@ -798,9 +798,9 @@ const Board = () => {
</span>
<br key={`mob-br-${reply.cid}`} />
</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;
<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={() => {
setIsReplyOpen(true); setSelectedShortCid(reply.shortCid); setSelectedParentCid(reply.cid)
}} title="Reply to this post">{reply.shortCid}</button>
@@ -843,10 +843,10 @@ const Board = () => {
reply.content.length > 500 ?
<Fragment key={`fragment15-${reply.cid}`}>
<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}
</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"> (...)
<br key={`mob-ttl-s-br1-${reply.cid}`} /><br key={`mob-ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp;
@@ -855,10 +855,10 @@ const Board = () => {
</blockquote>
</Fragment>
: <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}
</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>)
: null}
{reply.replyCount > 0 ? (
@@ -867,9 +867,8 @@ const Board = () => {
.sort((a, b) => a.timestamp - b.timestamp)
.map((reply) => (
<div key={`div-back${reply.cid}`} style={{display: 'inline-block'}}>
<Link key={`ql-${reply.cid}`}
to={(event) => handleQuoteClick(reply, reply.shortCid, event)} className="quote-link"
onClick={(event) => handleQuoteClick(reply, event)}>
<Link key={`ql-${reply.cid}`} to={() => {}}
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} className="quote-link">
c/{reply.shortCid}</Link>
&nbsp;
</div>
src/components/views/Thread.jsx
+16 -16
View File
@@ -477,8 +477,8 @@ const Thread = () => {
&nbsp;
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
&nbsp;
<span className="post-number">
<Link to="" onClick={() => {}} title="Link to this post">c/</Link>
<span className="post-number post-number-desktop">
<Link to={() => {}} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
}} title="Reply to this post">{comment.shortCid}</button>
@@ -500,7 +500,7 @@ const Thread = () => {
</div>
</span>
<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>
</div>
</div>
@@ -514,7 +514,7 @@ const Thread = () => {
return (
<div key={`pc-${reply.cid}`} className="reply-container">
<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">
&nbsp;
<span key={`nb-${reply.cid}`} className="nameblock">
@@ -543,8 +543,8 @@ const Thread = () => {
&nbsp;
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply?.timestamp)}</span>
&nbsp;
<span key={`pn-${reply.cid}`} className="post-number">
<Link to="" key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<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>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
}} title="Reply to this post">{reply.shortCid ?? (
@@ -623,7 +623,7 @@ const Thread = () => {
>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</Link>
<Post content={reply.content} comment={reply} handlequoteclick={handleQuoteClick} key={`post-${reply.cid}`} />
<Post content={reply.content} comment={reply} key={`post-${reply.cid}`} />
</blockquote>
</div>
</div>
@@ -675,13 +675,13 @@ const Thread = () => {
{comment.title}
</span>) : null}
</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)}
&nbsp;
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
}} 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>
</div>
{commentMediaInfo?.url ? (
@@ -718,7 +718,7 @@ const Thread = () => {
<blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile">
{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}
</blockquote>
@@ -730,7 +730,7 @@ const Thread = () => {
const shortParentCid = findShortParentCid(reply.parentCid, comment);
return (
<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">
<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">
@@ -758,9 +758,9 @@ const Thread = () => {
</span>
<br key={`mob-br-${reply.cid}`} />
</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;
<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={() => {
setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
}} title="Reply to this post">{reply.shortCid}</button>
@@ -771,7 +771,7 @@ const Thread = () => {
onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</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>
{reply.replyCount > 0 ? (
<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'}}>
<Link key={`ql-${reply.cid}`}
to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}>
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
c/{reply.shortCid}</Link>
&nbsp;
</div>
@@ -816,7 +816,7 @@ const Thread = () => {
</span>
<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>
{comment.replyCount > 0 ? (
src/utils/handleQuoteClick.js
+8 -4
View File
@@ -1,5 +1,6 @@
function handleQuoteClick(reply, parentCid, threadCid) {
const cid = parentCid ? parentCid : reply.shortCid;
const isMobile = window.innerWidth <= 480;
if (threadCid && cid === threadCid) {
const highlightedElements = document.querySelectorAll('.highlighted');
@@ -7,19 +8,22 @@ function handleQuoteClick(reply, parentCid, threadCid) {
highlightedElements.forEach(el => {
el.classList.remove('highlighted');
});
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 => {
const postNumberElement = el.querySelector('.post-number');
const postNumberElement = el.querySelector(postNumberSelector);
return postNumberElement && postNumberElement.innerHTML.includes(cid);
});
if (targetElement) {
const highlightedElements = document.querySelectorAll('.highlighted');
highlightedElements.forEach(el => {
el.classList.remove('highlighted');
});