Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hyperlink scroll #198

Merged
merged 6 commits into from
Feb 14, 2022
Merged

Hyperlink scroll #198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5b07ff2
fix scroll offset
farisashai Feb 13, 2022
7f72053
fix overlapping media queries breaking dropdown nav at 900px
farisashai Feb 13, 2022
4dbdc87
fixes
farisashai Feb 13, 2022
1bf116e
all mobile nav buttons close the menu when clicked
farisashai Feb 13, 2022
5b2d933
found a less scuffed solution
farisashai Feb 13, 2022
f21f91f
Merge branch 'main' into hyperlink-scroll
farisashai Feb 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function isValidEmail(input) {
const Footer: React.FC = () => {
const [email, setEmail] = useState("");
return (
<div className="footer">
<div className="footer" id="contact">
<div className="footerContainer">
<div className="footerContents">
<h2>Connect With Us!</h2>
Expand Down
33 changes: 9 additions & 24 deletions src/components/NavigationBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,9 @@ const navLinks = [

const NavigationBar: React.FC = () => {
const [menuState, setMenuState] = useState(false);
const toggleMenu = () => {
setMenuState(!menuState);
};
const scrollToContacts = (): void => {
window.scrollTo({ top: document.body.scrollHeight });
setMenuState(false);
};
Comment on lines -19 to -22
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seeking to learn: why did you remove scrollToContacts

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the 2 things happening here are manually forcing the page to scroll and closing the mobile nav menu. we no longer need to force the page to scroll because the link href works as intended by giving the footer an id. closing the mobile nav menu is handled by toggleMenu because the only time it gets called is when menuState is true


const toggleMenu = () => setMenuState(!menuState);

return (
<div className="fixed-nav">
<div className="navigation-bar">
Expand All @@ -40,7 +36,7 @@ const NavigationBar: React.FC = () => {
</li>
<li className="navigation-bar__nav-button">
<Link href="#contact">
<a onClick={scrollToContacts}>Contact</a>
<a>Contact</a>
</Link>
</li>
{navLinks.map((link, key) => (
Expand All @@ -64,29 +60,18 @@ const NavigationBar: React.FC = () => {
/>
</button>
<Link href="/about">
<a>About Us</a>
<a onClick={toggleMenu}>About Us</a>
</Link>
<Link href="/communities">
<a>Communities</a>
<a onClick={toggleMenu}>Communities</a>
</Link>
<Link href="/sponsor">
<a>Sponsor</a>
<a onClick={toggleMenu}>Sponsor</a>
</Link>
<Link href="#contact">
<a onClick={scrollToContacts}>Contact</a>
<a onClick={toggleMenu}>Contact</a>
</Link>
{/* <Link
href="#contact"
onClick={(): void => {
toggleMenu()
scrollToContacts()
}}
>
Contact
</Link> */}
<a href="https://members.acmucsd.com/login" onClick={toggleMenu}>
Login
</a>
<a href="https://members.acmucsd.com/login">Login</a>
</div>
) : (
<div className="navbar-mobile-div">
Expand Down
7 changes: 3 additions & 4 deletions src/components/NavigationBar/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,10 +113,8 @@
}
// Styling for menu based nav bar

@media only screen and (min-width: 900px) {
.mobile-links {
display: none !important;
}
.mobile-links {
display: none;
}

@media only screen and (max-width: 900px) {
Expand Down Expand Up @@ -171,6 +169,7 @@

.mobile-links {
z-index: 2;
display: block;
background-color: $black;
padding-top: 0.5em;
padding-bottom: 0.5em;
Expand Down
29 changes: 0 additions & 29 deletions src/sections/about/About.GetInvolved.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,6 @@ import HackLogo from "public/assets/logos/acm-hack.svg";
import InnovateLogo from "public/assets/logos/acm-innovate.svg";
import CommunitiesGrid from "src/components/CommunitiesGrid";

const MobileCommunityGrid = () => (
<div className="about__get-involved__section__communities--mobile">
<div>
<Link href="/communities#Hack">
<a>
<img src={HackLogo.src} alt="ACM Hack Logo" />
</a>
</Link>
<Link href="/communities#Innovate">
<a>
<img src={InnovateLogo.src} alt="ACM Innovate Logo" />
</a>
</Link>
</div>
<div>
<Link href="/communities#AI">
<a>
<img src={AILogo.src} alt="ACM AI Logo" />
</a>
</Link>
<Link href="/communities#Cyber">
<a>
<img src={CyberLogo.src} alt="ACM Cyber Logo" />
</a>
</Link>
</div>
</div>
);

const AboutGetInvolved: React.FC<{ isMobile: boolean }> = ({ isMobile }) => {
const [email, setEmail] = useState("");
return (
Expand Down
1 change: 0 additions & 1 deletion src/sections/home/Home.Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import CoolLogo from "public/assets/cool_logo_1000x1000.png";
import CoolLogoMobile from "public/assets/cool_logo.png";

const HomeHero: React.FC = () => {

return (
<section className="home__hero">
<div className="home__hero--grid">
Expand Down
5 changes: 5 additions & 0 deletions src/styles/reset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ html {
overflow-y: scroll;
scroll-behavior: smooth;
}

* {
scroll-margin-top: 88px;
}

body {
margin: 0;
-webkit-font-smoothing: antialiased;
Expand Down