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

fix retained scroll position while navigating

Browse Source
This commit is contained in:
Tom
2023-05-10 22:20:59 +02:00
parent 0433daf318
commit 0e77779f1e
6 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+6 -5
View File
@@ -422,8 +422,7 @@ const Board = () => {
<div className="page-jump"> <div className="page-jump">
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp; &nbsp;
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
)}>Home</Link>
</div> </div>
</div> </div>
<div id="separator-mobile">&nbsp;</div> <div id="separator-mobile">&nbsp;</div>
@@ -508,7 +507,7 @@ const Board = () => {
</span> </span>
<div id="catalog-button-desktop"> <div id="catalog-button-desktop">
[ [
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
] ]
</div> </div>
{feed.length > 0 ? ( {feed.length > 0 ? (
@@ -531,7 +530,7 @@ const Board = () => {
)} )}
<div id="catalog-button-mobile"> <div id="catalog-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
</span> </span>
</div> </div>
</TopBar> </TopBar>
@@ -1012,7 +1011,9 @@ const Board = () => {
((thread.replyCount + pendingReplyCounts[thread.cid]) + " replies") ((thread.replyCount + pendingReplyCounts[thread.cid]) + " replies")
: null : null
}</span> }</span>
<Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="button-mobile" >View Thread</Link> <Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}
className="button-mobile" >View Thread</Link>
</div> </div>
</div> </div>
{displayedReplies?.map((reply, index) => { {displayedReplies?.map((reply, index) => {
src/components/views/Catalog.jsx
+4 -3
View File
@@ -422,7 +422,7 @@ const Catalog = () => {
</span> </span>
<div className="return-button" id="return-button-desktop"> <div className="return-button" id="return-button-desktop">
[ [
<Link to={`/p/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
] ]
</div> </div>
{feed.length > 0 ? ( {feed.length > 0 ? (
@@ -445,7 +445,7 @@ const Catalog = () => {
)} )}
<div id="return-button-mobile"> <div id="return-button-mobile">
<span className="btn-wrap-catalog btn-wrap"> <span className="btn-wrap-catalog btn-wrap">
<Link to={`/p/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
</span> </span>
</div> </div>
<hr /> <hr />
@@ -465,7 +465,8 @@ const Catalog = () => {
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
return ( return (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)}> <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}>
<div key={`thread-${index}`} className="thread"> <div key={`thread-${index}`} className="thread">
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Fragment key="f-catalog"> <Fragment key="f-catalog">
src/components/views/Home.jsx
+5 -2
View File
@@ -98,11 +98,13 @@ const Home = () => {
<h3 style={{textDecoration: 'underline', display: 'inline'}}> <h3 style={{textDecoration: 'underline', display: 'inline'}}>
You have subscribed to {account?.subscriptions?.length} board{account?.subscriptions?.length > 1 ? "s" : null} You have subscribed to {account?.subscriptions?.length} board{account?.subscriptions?.length > 1 ? "s" : null}
</h3>&nbsp; </h3>&nbsp;
<Link to="/p/subscriptions" id="view-all">[view all]</Link> <Link to="/p/subscriptions" id="view-all" onClick={()=> {window.scrollTo(0, 0)}}>[view all]</Link>
<br /> <br />
{account?.subscriptions?.map((subscription, index) => ( {account?.subscriptions?.map((subscription, index) => (
<> <>
<Link key={`sub-${index}`} className="boardlink" to={`/p/${subscription}`}> <Link key={`sub-${index}`} className="boardlink"
onClick={()=> {window.scrollTo(0, 0)}}
to={`/p/${subscription}`}>
<br id="mobile-br" /> <br id="mobile-br" />
{subscription}&nbsp; {subscription}&nbsp;
<OfflineIndicator <OfflineIndicator
@@ -130,6 +132,7 @@ const Home = () => {
<Link to={`/p/${subplebbit.address}`} onClick={() => { <Link to={`/p/${subplebbit.address}`} onClick={() => {
setSelectedTitle(subplebbit.title); setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address); setSelectedAddress(subplebbit.address);
window.scrollTo(0, 0);
}} > }} >
<BoardAvatar address={subplebbit.address} /> <BoardAvatar address={subplebbit.address} />
</Link> </Link>
src/components/views/Pending.jsx
+4 -4
View File
@@ -160,12 +160,12 @@ const Pending = () => {
<ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} > <ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<div id="return-button-mobile"> <div id="return-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/p/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
</span> </span>
</div> </div>
<div id="catalog-button-mobile"> <div id="catalog-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
</span> </span>
</div> </div>
<div>&nbsp;</div> <div>&nbsp;</div>
@@ -187,12 +187,12 @@ const Pending = () => {
</span> </span>
<span className="return-button" id="return-button-desktop"> <span className="return-button" id="return-button-desktop">
[ [
<Link to={`/p/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
] ]
</span> </span>
<span className="return-button catalog-button" id="catalog-button-desktop"> <span className="return-button catalog-button" id="catalog-button-desktop">
[ [
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
] ]
</span> </span>
<span className="reply-stat">{stateString}</span> <span className="reply-stat">{stateString}</span>
src/components/views/SubscriptionsCatalog.jsx
+2 -1
View File
@@ -214,7 +214,8 @@ const SubscriptionsCatalog = () => {
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
return ( return (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)}> <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}>
<div key={`thread-${index}`} className="thread"> <div key={`thread-${index}`} className="thread">
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Fragment key="f-catalog"> <Fragment key="f-catalog">
src/components/views/Thread.jsx
+3 -4
View File
@@ -360,8 +360,7 @@ const Thread = () => {
<div className="page-jump"> <div className="page-jump">
<Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp; &nbsp;
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
)}>Home</Link>
</div> </div>
</div> </div>
<div id="separator-mobile">&nbsp;</div> <div id="separator-mobile">&nbsp;</div>
@@ -388,13 +387,13 @@ const Thread = () => {
<PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data"> <PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
<ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} > <ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<div id="return-button-mobile"> <div id="return-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap" onClick={()=> {window.scrollTo(0, 0)}}>
<Link to={`/p/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`}>Return</Link>
</span> </span>
</div> </div>
<div id="catalog-button-mobile"> <div id="catalog-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
</span> </span>
</div> </div>
<div id="bottom-button-mobile"> <div id="bottom-button-mobile">