From 5b07ff28230a7c9f2d1d57f9561b141439e06ace Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Sat, 12 Feb 2022 20:20:19 -0800 Subject: [PATCH 1/5] fix scroll offset --- src/sections/about/About.GetInvolved.tsx | 29 ------------------------ src/styles/reset.scss | 5 ++++ 2 files changed, 5 insertions(+), 29 deletions(-) diff --git a/src/sections/about/About.GetInvolved.tsx b/src/sections/about/About.GetInvolved.tsx index c4535c48..64d691d5 100644 --- a/src/sections/about/About.GetInvolved.tsx +++ b/src/sections/about/About.GetInvolved.tsx @@ -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 = () => ( -
-
- - - ACM Hack Logo - - - - - ACM Innovate Logo - - -
-
- - - ACM AI Logo - - - - - ACM Cyber Logo - - -
-
-); - const AboutGetInvolved: React.FC<{ isMobile: boolean }> = ({ isMobile }) => { const [email, setEmail] = useState(""); return ( diff --git a/src/styles/reset.scss b/src/styles/reset.scss index bcd9e223..f3d3276f 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -6,6 +6,11 @@ html { overflow-y: scroll; scroll-behavior: smooth; } + +* { + scroll-margin-top: 78px; +} + body { margin: 0; -webkit-font-smoothing: antialiased; From 7f720537e07dd0df06515573e8a7aa0b4ac7154e Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Sat, 12 Feb 2022 20:34:03 -0800 Subject: [PATCH 2/5] fix overlapping media queries breaking dropdown nav at 900px --- src/components/NavigationBar/style.scss | 4 ++-- src/sections/home/Home.Hero.tsx | 4 ++-- src/styles/reset.scss | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/NavigationBar/style.scss b/src/components/NavigationBar/style.scss index 701960d0..1f12962c 100644 --- a/src/components/NavigationBar/style.scss +++ b/src/components/NavigationBar/style.scss @@ -113,9 +113,9 @@ } // Styling for menu based nav bar -@media only screen and (min-width: 900px) { +@media only screen and (min-width: 901px) { .mobile-links { - display: none !important; + display: none; } } diff --git a/src/sections/home/Home.Hero.tsx b/src/sections/home/Home.Hero.tsx index 762d654e..b521fb14 100644 --- a/src/sections/home/Home.Hero.tsx +++ b/src/sections/home/Home.Hero.tsx @@ -4,7 +4,7 @@ import "react-typist/dist/Typist.css"; import Button from "src/components/Button"; import Image from "next/image"; -import Arrow from "public/assets/arrow.svg"; +import ArrowIcon from 'public/assets/arrow.svg' import CoolLogo from "public/assets/cool_logo_1000x1000.png"; import CoolLogoMobile from "public/assets/cool_logo.png"; @@ -60,7 +60,7 @@ const HomeHero: React.FC = () => { top: window.innerHeight - 78, }) } - src="assets/arrow.svg" + src={ArrowIcon.src} /> )} diff --git a/src/styles/reset.scss b/src/styles/reset.scss index f3d3276f..53d68aeb 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -8,7 +8,7 @@ html { } * { - scroll-margin-top: 78px; + scroll-margin-top: 88px; } body { From 4dbdc870af67a69381da6595f0c54b53c4ef411f Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Sat, 12 Feb 2022 21:00:50 -0800 Subject: [PATCH 3/5] fixes --- src/components/Footer/index.tsx | 2 +- src/components/NavigationBar/index.tsx | 20 ++++---------------- src/components/NavigationBar/style.scss | 2 +- 3 files changed, 6 insertions(+), 18 deletions(-) diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 40c5057e..fa8873c3 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -49,7 +49,7 @@ function isValidEmail(input) { const Footer: React.FC = () => { const [email, setEmail] = useState(""); return ( -
+

Connect With Us!

diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx index 3c8749c1..d029b3ad 100644 --- a/src/components/NavigationBar/index.tsx +++ b/src/components/NavigationBar/index.tsx @@ -13,13 +13,10 @@ 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); - }; + + const toggleMenu = () => setMenuState(!menuState); + const scrollToContacts = () => setMenuState(false); + return (
@@ -94,15 +91,6 @@ const NavigationBar: React.FC = () => { Contact - {/* { - toggleMenu() - scrollToContacts() - }} - > - Contact - */} Login diff --git a/src/components/NavigationBar/style.scss b/src/components/NavigationBar/style.scss index 1f12962c..48f9ffa8 100644 --- a/src/components/NavigationBar/style.scss +++ b/src/components/NavigationBar/style.scss @@ -113,7 +113,7 @@ } // Styling for menu based nav bar -@media only screen and (min-width: 901px) { +@media only screen and (min-width: 900.1px) { .mobile-links { display: none; } From 1bf116e0e96159e6fb685b1ede4590603e7543d5 Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Sun, 13 Feb 2022 09:15:36 -0800 Subject: [PATCH 4/5] all mobile nav buttons close the menu when clicked --- src/components/NavigationBar/index.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx index d029b3ad..848293df 100644 --- a/src/components/NavigationBar/index.tsx +++ b/src/components/NavigationBar/index.tsx @@ -15,7 +15,6 @@ const NavigationBar: React.FC = () => { const [menuState, setMenuState] = useState(false); const toggleMenu = () => setMenuState(!menuState); - const scrollToContacts = () => setMenuState(false); return (
@@ -37,7 +36,7 @@ const NavigationBar: React.FC = () => {
  • - Contact + Contact
    • {navLinks.map((link, key) => ( @@ -80,20 +79,18 @@ const NavigationBar: React.FC = () => { /> - About Us + About Us - Communities + Communities - Sponsor + Sponsor - Contact + Contact - - Login - + Login
    )} From 5b2d933bfbfa0ea469856f5144fe93734e680917 Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Sun, 13 Feb 2022 09:33:35 -0800 Subject: [PATCH 5/5] found a less scuffed solution --- src/components/NavigationBar/style.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/NavigationBar/style.scss b/src/components/NavigationBar/style.scss index 48f9ffa8..2fc2c6ed 100644 --- a/src/components/NavigationBar/style.scss +++ b/src/components/NavigationBar/style.scss @@ -113,10 +113,8 @@ } // Styling for menu based nav bar -@media only screen and (min-width: 900.1px) { - .mobile-links { - display: none; - } +.mobile-links { + display: none; } @media only screen and (max-width: 900px) { @@ -171,6 +169,7 @@ .mobile-links { z-index: 2; + display: block; background-color: $black; padding-top: 0.5em; padding-bottom: 0.5em;