mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

Merge pull request #50 from returnkirbo/scroll-reset

Browse source 
reset scroll upon navigation
This commit is contained in:
Captain Jack Sparrow 2024-06-11 23:57:03 -04:00 committed by GitHub
commit 48d86d68d4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/LinksDropdown.tsx
View file

@ -1,7 +1,7 @@
import classNames from "classnames"; import classNames from "classnames";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom"; import { To, useNavigate } from "react-router-dom";
import { base64ToBuffer, decryptData } from "@/backend/accounts/crypto"; import { base64ToBuffer, decryptData } from "@/backend/accounts/crypto";
import { UserAvatar } from "@/components/Avatar"; import { UserAvatar } from "@/components/Avatar";
@ -24,8 +24,12 @@ function GoToLink(props: {
const navigate = useNavigate(); const navigate = useNavigate();
const goTo = (href: string) => { const goTo = (href: string) => {
if (href.startsWith("http")) window.open(href, "_blank"); if (href.startsWith("http")) {
else navigate(href); window.open(href, "_blank");
} else {
window.scrollTo(0, 0);
navigate(href);
}
}; };
return ( return (

10
src/components/layout/Navigation.tsx
View file

@ -1,5 +1,5 @@
import classNames from "classnames"; import classNames from "classnames";
import { Link, useNavigate } from "react-router-dom"; import { Link, To, useNavigate } from "react-router-dom";
import { NoUserAvatar, UserAvatar } from "@/components/Avatar"; import { NoUserAvatar, UserAvatar } from "@/components/Avatar";
import { IconPatch } from "@/components/buttons/IconPatch"; import { IconPatch } from "@/components/buttons/IconPatch";
@ -24,6 +24,11 @@ export function Navigation(props: NavigationProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const { loggedIn } = useAuth(); const { loggedIn } = useAuth();
const handleClick = (path: To) => {
window.scrollTo(0, 0);
navigate(path);
};
return ( return (
<> <>
{/* lightbar */} {/* lightbar */}
@ -84,6 +89,7 @@ export function Navigation(props: NavigationProps) {
<Link <Link
className="block tabbable rounded-full text-xs ssm:text-base" className="block tabbable rounded-full text-xs ssm:text-base"
to="/" to="/"
onClick={() => window.scrollTo(0, 0)}
> >
<BrandPill clickable header /> <BrandPill clickable header />
</Link> </Link>
@ -104,7 +110,7 @@ export function Navigation(props: NavigationProps) {
<IconPatch icon={Icons.GITHUB} clickable downsized /> <IconPatch icon={Icons.GITHUB} clickable downsized />
</a> </a>
<a <a
onClick={() => navigate("/discover")} onClick={() => handleClick("/discover")}
rel="noreferrer" rel="noreferrer"
className="text-xl text-white tabbable rounded-full" className="text-xl text-white tabbable rounded-full"
> >

9
src/pages/HomePage.tsx
View file

@ -1,7 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom"; import { To, useNavigate } from "react-router-dom";
import { WideContainer } from "@/components/layout/WideContainer"; import { WideContainer } from "@/components/layout/WideContainer";
import { useDebounce } from "@/hooks/useDebounce"; import { useDebounce } from "@/hooks/useDebounce";
@ -48,6 +48,11 @@ export function HomePage() {
const [showBookmarks, setShowBookmarks] = useState(false); const [showBookmarks, setShowBookmarks] = useState(false);
const [showWatching, setShowWatching] = useState(false); const [showWatching, setShowWatching] = useState(false);
const handleClick = (path: To) => {
window.scrollTo(0, 0);
navigate(path);
};
return ( return (
<HomeLayout showBg={showBg}> <HomeLayout showBg={showBg}>
<div className="mb-16 sm:mb-24"> <div className="mb-16 sm:mb-24">
@ -77,7 +82,7 @@ export function HomePage() {
<p className="text-[18.5px] pb-3">{emptyText}</p> <p className="text-[18.5px] pb-3">{emptyText}</p>
<Button <Button
className="px-py p-[0.35em] mt-3 rounded-xl text-type-dimmed box-content text-[18px] bg-largeCard-background text-buttons-secondaryText justify-center items-center" className="px-py p-[0.35em] mt-3 rounded-xl text-type-dimmed box-content text-[18px] bg-largeCard-background text-buttons-secondaryText justify-center items-center"
onClick={() => navigate("/discover")} onClick={() => handleClick("/discover")}
> >
{t("home.search.discover")} {t("home.search.discover")}
</Button> </Button>