fix retained scroll position while navigating

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
+6 -5
View File
@@ -422,8 +422,7 @@ const Board = () => {
<div className="page-jump">
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp;
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
)}>Home</Link>
<Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
</div>
</div>
<div id="separator-mobile">&nbsp;</div>
@@ -508,7 +507,7 @@ const Board = () => {
</span>
<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>
{feed.length > 0 ? (
@@ -531,7 +530,7 @@ const Board = () => {
)}
<div id="catalog-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
<Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
</span>
</div>
</TopBar>
@@ -1012,7 +1011,9 @@ const Board = () => {
((thread.replyCount + pendingReplyCounts[thread.cid]) + " replies")
: null
}</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>
{displayedReplies?.map((reply, index) => {
+4 -3
View File
@@ -422,7 +422,7 @@ const Catalog = () => {
</span>
<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>
{feed.length > 0 ? (
@@ -445,7 +445,7 @@ const Catalog = () => {
)}
<div id="return-button-mobile">
<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>
</div>
<hr />
@@ -465,7 +465,8 @@ const Catalog = () => {
const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif";
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">
{commentMediaInfo?.url ? (
<Fragment key="f-catalog">
+5 -2
View File
@@ -98,11 +98,13 @@ const Home = () => {
<h3 style={{textDecoration: 'underline', display: 'inline'}}>
You have subscribed to {account?.subscriptions?.length} board{account?.subscriptions?.length > 1 ? "s" : null}
</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 />
{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" />
{subscription}&nbsp;
<OfflineIndicator
@@ -130,6 +132,7 @@ const Home = () => {
<Link to={`/p/${subplebbit.address}`} onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
window.scrollTo(0, 0);
}} >
<BoardAvatar address={subplebbit.address} />
</Link>
+4 -4
View File
@@ -160,12 +160,12 @@ const Pending = () => {
<ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<div id="return-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}`}>Return</Link>
<Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
</span>
</div>
<div id="catalog-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
<Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
</span>
</div>
<div>&nbsp;</div>
@@ -187,12 +187,12 @@ const Pending = () => {
</span>
<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 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 className="reply-stat">{stateString}</span>
@@ -214,7 +214,8 @@ const SubscriptionsCatalog = () => {
const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif";
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">
{commentMediaInfo?.url ? (
<Fragment key="f-catalog">
+3 -4
View File
@@ -360,8 +360,7 @@ const Thread = () => {
<div className="page-jump">
<Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp;
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
)}>Home</Link>
<Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
</div>
</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">
<ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<div id="return-button-mobile">
<span className="btn-wrap">
<span className="btn-wrap" onClick={()=> {window.scrollTo(0, 0)}}>
<Link to={`/p/${selectedAddress}`}>Return</Link>
</span>
</div>
<div id="catalog-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
<Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
</span>
</div>
<div id="bottom-button-mobile">