From 2d7c7767c520c37944e9731d3ac8e1b6d39aed05 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 29 Mar 2024 14:19:22 -0400 Subject: [PATCH 1/7] fix: update a better anchor name + remove the callback that causes weird scroll issue in mobile --- src/components/Navbar/NavItems.tsx | 31 ++++++++++++------- src/components/Navbar/Navbar.tsx | 4 +-- src/components/sections/Contact.section.tsx | 7 +++-- src/components/sections/HeroStats.section.tsx | 2 +- src/components/sections/Sponsor.section.tsx | 17 +++++----- src/components/sections/TeamFAQ.section.tsx | 21 ++++++------- src/index.css | 18 +++++------ 7 files changed, 56 insertions(+), 44 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index 83f63760..99d9d236 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -5,18 +5,22 @@ interface NavItemsProps { handleClick: () => void; } +// update the name of href const links = [ - { title: 'About', href: 'about-section' }, - { title: 'Sponsors', href: 'sponsors-section' }, - { title: 'Partners', href: 'partners-section' }, - { title: 'FAQ', href: 'faq-section' }, - { title: 'The Team', href: 'team-section' }, - { title: 'Contact', href: 'contact-section' }, + { title: 'About', href: 'about-anchor' }, + { title: 'Sponsors', href: 'sponsors-anchor' }, + { title: 'Partners', href: 'partners-anchor' }, + { title: 'FAQ', href: 'faq-anchor' }, + { title: 'The Team', href: 'team-anchor' }, + { title: 'Contact', href: 'contact-anchor' }, ]; const rowStyle = 'flex-row items-center'; const colStyle = 'flex-col lg:p-0'; -const scrollPadding = -120; +// got a hardcoded value here? +// do i want to get the value dynamically? +// maybe no need, the navbar is always 80px +const scrollPaddingPx = -80; const NavItems: React.FC = ({ isHorizontal, handleClick }) => { return ( @@ -29,10 +33,15 @@ const NavItems: React.FC = ({ isHorizontal, handleClick }) => {
  • { + console.log("hello world") + // hide the side menu + + }} + className="text-md" > {link.title} diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index b4e58509..7c501de8 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -28,9 +28,7 @@ const Navbar = () => {
    - +
    {/* banner-holder: banner is out of flow, to prevent banner affect the desired flow, adding a placeholder banner holder when the screen is smaller */} diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx index 8d4314b9..87ad8a1a 100644 --- a/src/components/sections/Contact.section.tsx +++ b/src/components/sections/Contact.section.tsx @@ -11,7 +11,7 @@ import { SocialIcons } from '@components'; const ContactSection: React.FC = () => { return ( -
    +
    {
    -

    +

    CONTACT US

    diff --git a/src/components/sections/HeroStats.section.tsx b/src/components/sections/HeroStats.section.tsx index 53efa326..075f8df2 100644 --- a/src/components/sections/HeroStats.section.tsx +++ b/src/components/sections/HeroStats.section.tsx @@ -82,7 +82,7 @@ const HeroStatSection: React.FC = () => {

    About Hawkhacks

    diff --git a/src/components/sections/Sponsor.section.tsx b/src/components/sections/Sponsor.section.tsx index 032d5476..52da5556 100644 --- a/src/components/sections/Sponsor.section.tsx +++ b/src/components/sections/Sponsor.section.tsx @@ -25,10 +25,7 @@ import { const SponsorFAQSection = () => { return (
    -
    +
    Top Border { />
    -
    +
    SPONSORS
    @@ -152,8 +152,11 @@ const SponsorFAQSection = () => { />
    -
    -
    +
    +
    PARTNERS
    diff --git a/src/components/sections/TeamFAQ.section.tsx b/src/components/sections/TeamFAQ.section.tsx index bba14a57..f035bfdc 100644 --- a/src/components/sections/TeamFAQ.section.tsx +++ b/src/components/sections/TeamFAQ.section.tsx @@ -43,16 +43,16 @@ const Department: React.FC = ({ title, members }) => { ); }; -// the naming is confusing... -// faq section first, but the meet the team banner is within faq section... -// not separate enough... const TeamSection = () => { return (
    -
    +
    -

    +

    FAQ

    @@ -62,12 +62,11 @@ const TeamSection = () => {
    -
    - {/* remove the overflow, and set negative offset works like a charm */} -
    +
    +
    * { - grid-column: 1 / -1; - grid-row: 1 / -1; + grid-column: 1 / -1; + grid-row: 1 / -1; } .stacked > .media { - z-index: -1; - width: 100%; - height: 100%; + z-index: -1; + width: 100%; + height: 100%; } .place-items-end-center { - place-items: end center; + place-items: end center; } } From 2635f931c9c90242a9e911ca7f52ef52285736c5 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 29 Mar 2024 14:22:19 -0400 Subject: [PATCH 2/7] Fix add extra scroll padding --- src/components/Navbar/NavItems.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index 99d9d236..f0813776 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -17,10 +17,8 @@ const links = [ const rowStyle = 'flex-row items-center'; const colStyle = 'flex-col lg:p-0'; -// got a hardcoded value here? -// do i want to get the value dynamically? -// maybe no need, the navbar is always 80px -const scrollPaddingPx = -80; +const navbarHeightPx = 80; +const scrollPaddingPx = -(navbarHeightPx + 20); // navbarHeight + extra padding const NavItems: React.FC = ({ isHorizontal, handleClick }) => { return ( @@ -37,9 +35,9 @@ const NavItems: React.FC = ({ isHorizontal, handleClick }) => { duration={500} offset={scrollPaddingPx} onClick={() => { - console.log("hello world") - // hide the side menu - + console.log('hello world'); + // hide the side menu + // hideMenu() }} className="text-md" > From 41139fb18052dfd86606ed2c4cb8c8c244cfc4c9 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 29 Mar 2024 14:56:02 -0400 Subject: [PATCH 3/7] fix: remove the onclick listener --- src/components/Navbar/NavItems.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index f0813776..3aaba700 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -20,7 +20,7 @@ const colStyle = 'flex-col lg:p-0'; const navbarHeightPx = 80; const scrollPaddingPx = -(navbarHeightPx + 20); // navbarHeight + extra padding -const NavItems: React.FC = ({ isHorizontal, handleClick }) => { +const NavItems: React.FC = ({ isHorizontal }) => { return (
      = ({ isHorizontal, handleClick }) => { }`} > {links.map((link) => ( -
    • +
    • console.log("do something")}> { - console.log('hello world'); - // hide the side menu - // hideMenu() - }} - className="text-md" + className="text-md w-full border" > {link.title} From 5b591f7df86721add6c1b045fbd6aac8dbd562f7 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 29 Mar 2024 15:22:45 -0400 Subject: [PATCH 4/7] fix: remove extra stuff --- src/components/Navbar/NavItems.tsx | 12 ++++++++++-- src/components/sections/TeamFAQ.section.tsx | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index 3aaba700..4f193b10 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -20,6 +20,14 @@ const colStyle = 'flex-col lg:p-0'; const navbarHeightPx = 80; const scrollPaddingPx = -(navbarHeightPx + 20); // navbarHeight + extra padding +/** +if href is team anchor, +then increase the offset +otherwise +keep them the same + +*/ + const NavItems: React.FC = ({ isHorizontal }) => { return (
        = ({ isHorizontal }) => { }`} > {links.map((link) => ( -
      • console.log("do something")}> +
      • {link.title} diff --git a/src/components/sections/TeamFAQ.section.tsx b/src/components/sections/TeamFAQ.section.tsx index f035bfdc..f93a22ab 100644 --- a/src/components/sections/TeamFAQ.section.tsx +++ b/src/components/sections/TeamFAQ.section.tsx @@ -64,8 +64,8 @@ const TeamSection = () => {
        Date: Fri, 29 Mar 2024 15:46:44 -0400 Subject: [PATCH 5/7] Fix: put back the handleClick function --- src/components/Navbar/NavItems.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index 4f193b10..131d67f4 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -5,7 +5,6 @@ interface NavItemsProps { handleClick: () => void; } -// update the name of href const links = [ { title: 'About', href: 'about-anchor' }, { title: 'Sponsors', href: 'sponsors-anchor' }, @@ -20,15 +19,8 @@ const colStyle = 'flex-col lg:p-0'; const navbarHeightPx = 80; const scrollPaddingPx = -(navbarHeightPx + 20); // navbarHeight + extra padding -/** -if href is team anchor, -then increase the offset -otherwise -keep them the same -*/ - -const NavItems: React.FC = ({ isHorizontal }) => { +const NavItems: React.FC = ({ isHorizontal, handleClick }) => { return (
          = ({ isHorizontal }) => { duration={500} offset={scrollPaddingPx} className="text-md w-full" + onClick={handleClick} > {link.title} From a1ed7164196243157ce4759b30ffff6ba6367093 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 29 Mar 2024 16:30:03 -0400 Subject: [PATCH 6/7] Fix: make the about us anchor specifically be centred to the section --- src/components/Navbar/NavItems.tsx | 3 +-- src/components/sections/HeroStats.section.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index 131d67f4..e52dfd81 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -17,8 +17,7 @@ const links = [ const rowStyle = 'flex-row items-center'; const colStyle = 'flex-col lg:p-0'; const navbarHeightPx = 80; -const scrollPaddingPx = -(navbarHeightPx + 20); // navbarHeight + extra padding - +const scrollPaddingPx = -navbarHeightPx; // navbarHeight + extra padding const NavItems: React.FC = ({ isHorizontal, handleClick }) => { return ( diff --git a/src/components/sections/HeroStats.section.tsx b/src/components/sections/HeroStats.section.tsx index 075f8df2..4275de88 100644 --- a/src/components/sections/HeroStats.section.tsx +++ b/src/components/sections/HeroStats.section.tsx @@ -79,11 +79,11 @@ const HeroStatSection: React.FC = () => {

    -
    -

    +
    +

    About Hawkhacks

    From 98cedafc4abc0b641d10a67cdd1d34e696572837 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 29 Mar 2024 16:41:30 -0400 Subject: [PATCH 7/7] fix: make other sections' anchors to be at the good position --- src/components/Navbar/NavItems.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index e52dfd81..e07d9af6 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -7,11 +7,11 @@ interface NavItemsProps { const links = [ { title: 'About', href: 'about-anchor' }, - { title: 'Sponsors', href: 'sponsors-anchor' }, - { title: 'Partners', href: 'partners-anchor' }, - { title: 'FAQ', href: 'faq-anchor' }, + { title: 'Sponsors', href: 'sponsors-anchor', offset: 200 }, + { title: 'Partners', href: 'partners-anchor', offset: 20 }, + { title: 'FAQ', href: 'faq-anchor', offset: 120 }, { title: 'The Team', href: 'team-anchor' }, - { title: 'Contact', href: 'contact-anchor' }, + { title: 'Contact', href: 'contact-anchor', offset: 500 }, ]; const rowStyle = 'flex-row items-center'; @@ -32,7 +32,11 @@ const NavItems: React.FC = ({ isHorizontal, handleClick }) => { to={link.href} smooth duration={500} - offset={scrollPaddingPx} + offset={ + link.offset + ? -link.offset + scrollPaddingPx + : scrollPaddingPx + } className="text-md w-full" onClick={handleClick} >