summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGeorgios Andreadis <g.andreadis@student.tudelft.nl>2017-08-28 09:02:38 +0200
committerGeorgios Andreadis <g.andreadis@student.tudelft.nl>2017-09-23 10:05:46 +0200
commitf2de68252a5af08ba73213ae4ea545912ef04690 (patch)
tree7836560375942765bbf983be2aca133eb6002c11
parent7aea29d0b22f7e5932c9b147611fe02373bb9645 (diff)
Complete homepage transfer
Diffstat
-rw-r--r--public/img/datacenter-drawing.pngbin0 -> 219576 bytes
-rw-r--r--public/index.html6
-rw-r--r--src/components/home/ContactSection.js4
-rw-r--r--src/components/home/IntroSection.js38
-rw-r--r--src/components/home/StakeholderSection.js9
-rw-r--r--src/components/navigation/Navbar.js46
-rw-r--r--src/pages/Home.js18
7 files changed, 93 insertions, 28 deletions
diff --git a/public/img/datacenter-drawing.png b/public/img/datacenter-drawing.png
new file mode 100644
index 00000000..401168e3
--- /dev/null
+++ b/public/img/datacenter-drawing.png
Binary files differ
diff --git a/public/index.html b/public/index.html
index b5d509cb..03ea36d7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -33,13 +33,13 @@
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://use.fontawesome.com/ece66a2e7c.js"></script>
</head>
-<body>
+<body data-spy="scroll" data-target="#navbar">
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
-<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
- integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
+ integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
diff --git a/src/components/home/ContactSection.js b/src/components/home/ContactSection.js
index c8494c4d..1ec5e9c7 100644
--- a/src/components/home/ContactSection.js
+++ b/src/components/home/ContactSection.js
@@ -9,14 +9,14 @@ const ContactSection = () => (
<div className="row justify-content-center">
<div className="col-4">
<a href="https://github.com/atlarge-research/opendc">
- <FontAwesome name="github" size="3x"/>
+ <FontAwesome name="github" size="3x" className="mb-2"/>
<div className="w-100"/>
atlarge-research/opendc
</a>
</div>
<div className="col-4">
<Mailto title="Contact us" email="opendc@atlarge-research.com">
- <FontAwesome name="envelope" size="3x"/>
+ <FontAwesome name="envelope" size="3x" className="mb-2"/>
<div className="w-100"/>
opendc@atlarge-research.com
</Mailto>
diff --git a/src/components/home/IntroSection.js b/src/components/home/IntroSection.js
new file mode 100644
index 00000000..246786f2
--- /dev/null
+++ b/src/components/home/IntroSection.js
@@ -0,0 +1,38 @@
+import React from "react";
+
+const IntroSection = () => (
+ <section id="intro" className="intro-section">
+ <div className="container pt-5 pb-3">
+ <div className="row justify-content-center">
+ <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+ <h4>The datacenter (DC) industry...</h4>
+ <ul>
+ <li>Is worth over $15 bn, and growing</li>
+ <li>Has many hard-to-grasp concepts</li>
+ <li>Needs to become accessible to many</li>
+ </ul>
+ </div>
+ <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+ <img src="img/datacenter-drawing.png"
+ className="col-12 img-fluid"
+ alt="Schematic top-down view of a datacenter"/>
+ <p className="col-12 figure-caption text-center">
+ <a href="http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif">
+ Image source
+ </a>
+ </p>
+ </div>
+ <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+ <h4>OpenDC provides...</h4>
+ <ul>
+ <li>Collaborative online DC modeling</li>
+ <li>Diverse and effective DC simulation</li>
+ <li>Exploratory DC performance feedback</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </section>
+);
+
+export default IntroSection;
diff --git a/src/components/home/StakeholderSection.js b/src/components/home/StakeholderSection.js
index 47f0d9bb..ddfe4f7c 100644
--- a/src/components/home/StakeholderSection.js
+++ b/src/components/home/StakeholderSection.js
@@ -2,10 +2,11 @@ import React from "react";
import ContentSection from "./ContentSection";
const Stakeholder = ({name, title, subtitle}) => (
- <div className="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
- <img src={"img/stakeholders/" + name + ".png"} className="col-4 img-fluid" alt={title}/>
- <div className="text-center">
- <h3>{title}</h3>
+ <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6">
+ <img src={"img/stakeholders/" + name + ".png"}
+ className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid" alt={title}/>
+ <div className="text-center mt-2">
+ <h4>{title}</h4>
<p>{subtitle}</p>
</div>
</div>
diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js
index c0c8c006..e621b1e4 100644
--- a/src/components/navigation/Navbar.js
+++ b/src/components/navigation/Navbar.js
@@ -8,6 +8,7 @@ import ProfileName from "../../containers/auth/ProfileName";
import "./Navbar.css";
export const NavItem = withRouter(props => <NavItemWithoutRoute {...props}/>);
+export const LoggedInSection = withRouter(props => <LoggedInSectionWithoutRoute {...props}/>);
const NavItemWithoutRoute = ({route, location, children}) => (
<li className={classNames("nav-item", location.pathname === route ? "active" : undefined)}>
@@ -15,6 +16,33 @@ const NavItemWithoutRoute = ({route, location, children}) => (
</li>
);
+const LoggedInSectionWithoutRoute = ({location}) => (
+ <ul className="navbar-nav auth-links">
+ {userIsLoggedIn() ?
+ [
+ location.pathname === "/" ?
+ <NavItem route="/simulations" key="simulations">
+ <Link className="nav-link" title="My Simulations" to="/simulations">
+ My Simulations
+ </Link>
+ </NavItem> :
+ <NavItem route="/profile" key="profile">
+ <Link className="nav-link" title="My Profile" to="/profile">
+ <ProfileName/>
+ </Link>
+ </NavItem>,
+ <NavItem route="logout" key="logout">
+ <Logout/>
+ </NavItem>
+ ] :
+ <NavItem route="login">
+ <Login visible={true}/>
+ </NavItem>
+ }
+ </ul>
+ )
+;
+
const Navbar = ({children}) => (
<nav className="navbar fixed-top navbar-expand-lg navbar-light bg-faded" id="navbar">
<div className="container">
@@ -31,23 +59,7 @@ const Navbar = ({children}) => (
<ul className="navbar-nav mr-auto">
{children}
</ul>
- <ul className="navbar-nav">
- {userIsLoggedIn() ?
- [
- <NavItem route="/profile">
- <Link className="username nav-link" title="My Profile" to="/profile">
- <ProfileName/>
- </Link>
- </NavItem>,
- <NavItem route="logout">
- <Logout/>
- </NavItem>
- ] :
- <NavItem route="login">
- <Login visible={true}/>
- </NavItem>
- }
- </ul>
+ <LoggedInSection/>
</div>
</div>
</nav>
diff --git a/src/pages/Home.js b/src/pages/Home.js
index c315b73e..4f3e2cc0 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,5 +1,6 @@
import React from 'react';
import ContactSection from "../components/home/ContactSection";
+import IntroSection from "../components/home/IntroSection";
import JumbotronHeader from "../components/home/JumbotronHeader";
import ModelingSection from "../components/home/ModelingSection";
import SimulationSection from "../components/home/SimulationSection";
@@ -12,15 +13,28 @@ import "./Home.css";
class Home extends React.Component {
componentDidMount() {
- jQuery("body-wrapper").scrollspy({target: "#navbar"});
+ const scrollOffset = 60;
+ jQuery("#navbar").find("li a").click(function (e) {
+ if (jQuery(e.target).parent(".auth-links")) {
+ return;
+ }
+ e.preventDefault();
+ jQuery(jQuery(this).attr('href'))[0].scrollIntoView();
+ window.scrollBy(0, -scrollOffset);
+ });
+ jQuery("body").scrollspy({
+ target: "#navbar",
+ offset: scrollOffset
+ });
}
render() {
return (
<div>
<HomeNavbar/>
- <div className="body-wrapper page-container" data-spy="scroll" data-target="#navbar">
+ <div className="body-wrapper page-container">
<JumbotronHeader/>
+ <IntroSection/>
<StakeholderSection/>
<ModelingSection/>
<SimulationSection/>
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 15:13:03 +0000