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

added scroll and highlight to links

Browse Source
This commit is contained in:
plebbitor
2023-04-17 18:52:21 +02:00
parent a8e09896e9
commit 0ccf6327e1
4 changed files with 58 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/Board.styled.jsx
+34 -3
View File
@@ -2701,6 +2701,13 @@ export const BoardForm = styled.div`
margin: 4px 0; margin: 4px 0;
} }
.highlighted {
background-color: #f0c0b0 !important;
border: 1px solid #d99f91 !important;
border-left: none !important;
border-top: none !important;
}
hr { hr {
border: none; border: none;
border-top: 1px solid #d9bfb7; border-top: 1px solid #d9bfb7;
@@ -2867,6 +2874,13 @@ export const BoardForm = styled.div`
margin: 4px 0; margin: 4px 0;
} }
.highlighted {
background-color: #d6bad0 !important;
border: 1px solid #ba9dbf !important;
border-left: none !important;
border-top: none !important;
}
hr { hr {
border: none; border: none;
border-top: 1px solid #b7c5d9; border-top: 1px solid #b7c5d9;
@@ -2980,7 +2994,7 @@ export const BoardForm = styled.div`
} }
.quote-link { .quote-link {
color: navy; color: #34345C;
text-decoration: underline; text-decoration: underline;
} }
@@ -3024,7 +3038,6 @@ export const BoardForm = styled.div`
.post-reply { .post-reply {
background-color: #f0e0d6; background-color: #f0e0d6;
border: 1px solid #d9bfb7;
margin-top: 2px; margin-top: 2px;
border-left: none; border-left: none;
border-top: none; border-top: none;
@@ -3037,6 +3050,10 @@ export const BoardForm = styled.div`
margin: 4px 0 margin: 4px 0
} }
.highlighted {
background-color: #f0c0b0 !important;
}
hr { hr {
clear: both; clear: both;
}`; }`;
@@ -3157,7 +3174,7 @@ export const BoardForm = styled.div`
} }
.quote-link:hover { .quote-link:hover {
color: red; color: #dd0000;
} }
.backlink span { .backlink span {
@@ -3204,6 +3221,10 @@ export const BoardForm = styled.div`
margin: 4px 0 margin: 4px 0
} }
.highlighted {
background-color: #d6bad0 !important;
}
hr { hr {
clear: both; clear: both;
}`; }`;
@@ -3376,6 +3397,11 @@ export const BoardForm = styled.div`
margin: 4px 0 margin: 4px 0
} }
.highlighted {
background-color: #1d1d21 !important;
border: 1px solid #111 !important;
}
hr { hr {
border: none; border: none;
border-top: 1px solid #282a2e; border-top: 1px solid #282a2e;
@@ -3547,6 +3573,11 @@ export const BoardForm = styled.div`
margin: 4px 0 margin: 4px 0
} }
.highlighted {
background-color: #ccc !important;
border: 1px solid #ccc !important;
}
hr { hr {
border: none; border: none;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
src/components/views/Board.jsx
+4 -4
View File
@@ -478,7 +478,7 @@ const Board = () => {
<div key={`div-${reply.cid}`} style={{display: 'inline-block'}}> <div key={`div-${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, event)}> onClick={(event) => handleQuoteClick(reply, null, event)}>
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
&nbsp; &nbsp;
</div> </div>
@@ -566,7 +566,7 @@ const Board = () => {
<div key={`div-${reply.cid}`} style={{display: 'inline-block'}}> <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
<Link to={() => {}} key={`ql-${reply.cid}`} <Link to={() => {}} key={`ql-${reply.cid}`}
className="quote-link" className="quote-link"
onClick={(event) => handleQuoteClick(reply, event)}> onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
&nbsp; &nbsp;
</div> </div>
@@ -624,7 +624,7 @@ 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={() => {}}> <Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}>
{`c/${shortParentCid}`}{<br />} {`c/${shortParentCid}`}{<br />}
</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}`} handlequoteclick={handleQuoteClick} />
@@ -636,7 +636,7 @@ 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={() => {}}> <Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}>
{`c/${shortParentCid}`}{<br />} {`c/${shortParentCid}`}{<br />}
</Link> </Link>
<Post content={reply.content} key={`post-${reply.cid}`} handlequoteclick={handleQuoteClick} comment={reply} /> <Post content={reply.content} key={`post-${reply.cid}`} handlequoteclick={handleQuoteClick} comment={reply} />
src/components/views/Thread.jsx
+4 -4
View File
@@ -491,7 +491,7 @@ const Thread = () => {
<div key={`div-${reply.cid}`} style={{display: 'inline-block'}}> <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
<Link to={() => {}} key={`ql-${reply.cid}`} <Link to={() => {}} key={`ql-${reply.cid}`}
className="quote-link" className="quote-link"
onClick={(event) => handleQuoteClick(reply, event)}> onClick={(event) => handleQuoteClick(reply, null, event)}>
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
&nbsp; &nbsp;
</div> </div>
@@ -514,7 +514,7 @@ const Thread = () => {
return ( return (
<div key={`pc-${reply.cid}-${Math.random()}`} className="reply-container"> <div key={`pc-${reply.cid}-${Math.random()}`} 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" id="post-reply"> <div key={`pr-${reply.cid}`} className="post-reply">
<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">
@@ -559,7 +559,7 @@ const Thread = () => {
<div key={`div-${reply.cid}`} style={{display: 'inline-block'}}> <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
<Link to={() => {}} key={`ql-${reply.cid}`} <Link to={() => {}} key={`ql-${reply.cid}`}
className="quote-link" className="quote-link"
onClick={(event) => handleQuoteClick(reply, event)}> onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
&nbsp; &nbsp;
</div> </div>
@@ -614,7 +614,7 @@ const Thread = () => {
) : null} ) : null}
<blockquote key={`pm-${reply.cid}`} className="post-message"> <blockquote key={`pm-${reply.cid}`} className="post-message">
<Link to={() => {}} className="quote-link" <Link to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, event)}> onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}>
{`c/${shortParentCid}`}{<br />} {`c/${shortParentCid}`}{<br />}
</Link> </Link>
<Post content={reply.content} comment={reply} handlequoteclick={handleQuoteClick} key={`post-${reply.cid}`} /> <Post content={reply.content} comment={reply} handlequoteclick={handleQuoteClick} key={`post-${reply.cid}`} />
src/utils/handleQuoteClick.js
+16 -4
View File
@@ -1,9 +1,21 @@
function handleQuoteClick(reply) { function handleQuoteClick(reply, parentCid) {
const cid = reply.shortCid; const cid = parentCid ? parentCid : reply.shortCid;
const targetElement = [...document.querySelectorAll('.post-reply')] const targetElement = [...document.querySelectorAll('.post-reply')]
.find(el => el.innerHTML.includes(cid)); .find(el => {
const postNumberElement = el.querySelector('.post-number');
return postNumberElement && postNumberElement.innerHTML.includes(cid);
});
if (targetElement) { if (targetElement) {
targetElement.scrollIntoView({ behavior: "instant" }); const highlightedElements = document.querySelectorAll('.highlighted');
highlightedElements.forEach(el => {
el.classList.remove('highlighted');
});
targetElement.scrollIntoView({ behavior: "auto", block: "center" });
targetElement.classList.add('highlighted');
} else { } else {
console.log('Could not find target element'); console.log('Could not find target element');
} }