From 5ec42736f3f17e9f5432063b4cc17e6ad9a75713 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 28 Oct 2020 00:03:05 +0100
Subject: Use scroll-padding for aligning anchors

This change is one in a series of patches to remove the use of jQuery.
Here, we can utilize the scroll-padding CSS property to align anchors
properly in presence of a fixed top header.
---
 frontend/src/pages/Home.js | 61 ++++++++++++----------------------------------
 1 file changed, 16 insertions(+), 45 deletions(-)

(limited to 'frontend/src/pages')

diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js
index 1bdfc5c7..5000ebfe 100644
--- a/frontend/src/pages/Home.js
+++ b/frontend/src/pages/Home.js
@@ -9,54 +9,25 @@ import StakeholderSection from '../components/home/StakeholderSection'
 import TeamSection from '../components/home/TeamSection'
 import TechnologiesSection from '../components/home/TechnologiesSection'
 import HomeNavbar from '../components/navigation/HomeNavbar'
-import jQuery from '../util/jquery'
 import './Home.css'
 
-class Home extends React.Component {
-    state = {
-        scrollSpySetup: false,
-    }
-
-    componentDidMount() {
-        const scrollOffset = 60
-        jQuery('#navbar')
-            .find('li a')
-            .click(function (e) {
-                if (jQuery(e.target).parents('.auth-links').length > 0) {
-                    return
-                }
-                e.preventDefault()
-                jQuery(jQuery(this).attr('href'))[0].scrollIntoView()
-                window.scrollBy(0, -scrollOffset)
-            })
-
-        if (!this.state.scrollSpySetup) {
-            jQuery('body').scrollspy({
-                target: '#navbar',
-                offset: scrollOffset,
-            })
-            this.setState({ scrollSpySetup: true })
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <HomeNavbar />
-                <div className="body-wrapper page-container">
-                    <JumbotronHeader />
-                    <IntroSection />
-                    <StakeholderSection />
-                    <ModelingSection />
-                    <SimulationSection />
-                    <TechnologiesSection />
-                    <TeamSection />
-                    <ContactSection />
-                    <DocumentTitle title="OpenDC" />
-                </div>
+function Home() {
+    return (
+        <div>
+            <HomeNavbar />
+            <div className="body-wrapper page-container">
+                <JumbotronHeader />
+                <IntroSection />
+                <StakeholderSection />
+                <ModelingSection />
+                <SimulationSection />
+                <TechnologiesSection />
+                <TeamSection />
+                <ContactSection />
+                <DocumentTitle title="OpenDC" />
             </div>
-        )
-    }
+        </div>
+    )
 }
 
 export default Home
-- 
cgit v1.2.3