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.

3 files changed, 20 insertions, 46 deletions

diff --git a/frontend/src/components/home/SimulationSection.js b/frontend/src/components/home/SimulationSection.js
index e7a02068..b0244cb5 100644
--- a/frontend/src/components/home/SimulationSection.js
+++ b/frontend/src/components/home/SimulationSection.js
@@ -3,7 +3,7 @@ import ScreenshotSection from './ScreenshotSection'
 
 const ModelingSection = () => (
     <ScreenshotSection
-        name="simulation"
+        name="project"
         title="Datacenter Simulation"
         imageUrl="/img/screenshot-simulation-zoom.png"
         caption="Running an experiment in OpenDC"
diff --git a/frontend/src/index.sass b/frontend/src/index.sass
index 77acc23a..efb2bed5 100644
--- a/frontend/src/index.sass
+++ b/frontend/src/index.sass
@@ -10,6 +10,9 @@ html, body, #root
     font-family: Roboto, Helvetica, Verdana, sans-serif
     background: #eee
 
+    // Scroll padding for top navbar
+    scroll-padding-top: 60px
+
 .full-height
     position: relative
     height: 100% !important
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