diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/navigation/Navbar.js | 36 | ||||
| -rw-r--r-- | src/components/navigation/Navbar.sass | 132 | ||||
| -rw-r--r-- | src/index.js | 21 | ||||
| -rw-r--r-- | src/index.sass | 12 | ||||
| -rw-r--r-- | src/pages/Projects.js | 8 | ||||
| -rw-r--r-- | src/style-globals/mixins.sass | 21 | ||||
| -rw-r--r-- | src/style-globals/variables.sass | 25 |
7 files changed, 255 insertions, 0 deletions
diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js new file mode 100644 index 00000000..a5f0510f --- /dev/null +++ b/src/components/navigation/Navbar.js @@ -0,0 +1,36 @@ +import React, {Component} from 'react'; +import {Link} from "react-router-dom"; +import "./Navbar.css"; +import Mailto from "react-mailto"; +import FontAwesome from "react-fontawesome"; + +class Navbar extends Component { + render() { + return ( + <div className="opendc-navbar"> + <Link className="opendc-brand" to="/"> + <img src="/img/logo.png" alt="OpenDC Logo"/> + <div className="opendc-title"> + Open<strong>DC</strong> + </div> + </Link> + <div className="navigation navbar-button-group"> + <Link className="projects" title="Projects" to="/projects">Projects</Link> + </div> + <div className="user-controls navbar-button-group"> + <Mailto className="support" title="Support" email="opendc.tudelft@gmail.com" + headers={{subject: "OpenDC%20Support"}}> + <FontAwesome name="question-circle" size="lg"/> + </Mailto> + <Link className="username" title="My Profile" to="/profile">Profile</Link> + <Link className="sign-out" title="Sign out" to="#"> + <FontAwesome name="power-off" size="lg"/> + </Link> + </div> + <div id="google-signin" className="navbar-right"/> + </div> + ); + } +} + +export default Navbar; diff --git a/src/components/navigation/Navbar.sass b/src/components/navigation/Navbar.sass new file mode 100644 index 00000000..d40eecfb --- /dev/null +++ b/src/components/navigation/Navbar.sass @@ -0,0 +1,132 @@ +@import ../../style-globals/mixins.sass +@import ../../style-globals/variables.sass + +.opendc-navbar + position: relative + display: block + width: 100% + height: $navbar-height + + color: #eee + background: #343434 + + z-index: 100 + + -webkit-box-shadow: -10px 8px 3px 12px #000 + -moz-box-shadow: -10px 8px 3px 12px #000 + box-shadow: -10px -10px 3px 12px #000 + +.opendc-brand + display: inline-block + float: left + margin-left: $global-padding + + padding: 0 10px + + cursor: pointer + color: #eee + height: 100% + + +transition(background, $transition-length) + + img + display: inline-block + float: left + margin: $navbar-padding 0 + + width: $navbar-height - $navbar-padding * 2 + height: $navbar-height - $navbar-padding * 2 + vertical-align: middle + + .opendc-title + display: inline-block + float: right + margin-left: 20px + + font-size: 16pt + line-height: $navbar-height + +.opendc-brand:hover + background: $blue + +.opendc-brand:active + background: $blue-dark + +.navbar-button-group + display: inline-block + height: 100% + + a + display: inline-block + line-height: $navbar-height + text-align: center + color: #eee + + border-left: 1px solid #464646 + + +clickable + +transition(background, $transition-length) + + a:last-of-type + border-right: 1px solid #464646 + +.navigation + margin-left: 30px + + .projects + float: left + padding: 0 20px + + font-size: 12pt + + .projects:hover + background: #606060 + + .projects:active + background: #161616 + +.user-controls + float: right + margin-right: $global-padding + + .support + float: left + margin-top: -1px + + width: $navbar-height + + font-size: 14pt + + .support:hover + background: #41a0cd + + .support:active + background: #307798 + + .username + float: left + padding: 0 20px + + font-size: 12pt + + .username:hover + background: #4eae44 + + .username:active + background: #2d6527 + + .sign-out + float: right + margin-top: -1px + width: $navbar-height + + font-size: 14pt + + .sign-out:hover + background: #e3474d + + .sign-out:active + background: #a73438 + +#google-signin + display: none diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..25c33e82 --- /dev/null +++ b/src/index.js @@ -0,0 +1,21 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import {BrowserRouter, Route, Switch} from "react-router-dom"; +import "./index.css"; +import registerServiceWorker from "./registerServiceWorker"; +import Home from "./pages/Home"; +import Projects from "./pages/Projects"; +import NotFound from "./pages/NotFound"; + +ReactDOM.render( + <BrowserRouter> + <Switch> + <Route exact path="/" component={Home}/> + <Route exact path="/projects" component={Projects}/> + <Route path="/*" component={NotFound}/> + </Switch> + </BrowserRouter>, + document.getElementById('root') +); + +registerServiceWorker(); diff --git a/src/index.sass b/src/index.sass new file mode 100644 index 00000000..1ea3b0c5 --- /dev/null +++ b/src/index.sass @@ -0,0 +1,12 @@ +body + margin: 0 + padding: 0 + width: 100% + height: 100% + + font-family: Helvetica, Verdana, sans-serif + overflow: hidden + background: #eee + +a, a:hover + text-decoration: none diff --git a/src/pages/Projects.js b/src/pages/Projects.js new file mode 100644 index 00000000..6d377e92 --- /dev/null +++ b/src/pages/Projects.js @@ -0,0 +1,8 @@ +import React from 'react'; +import Navbar from "../components/navigation/Navbar"; + +const Projects = () => ( + <Navbar/> +); + +export default Projects; diff --git a/src/style-globals/mixins.sass b/src/style-globals/mixins.sass new file mode 100644 index 00000000..40c07a6d --- /dev/null +++ b/src/style-globals/mixins.sass @@ -0,0 +1,21 @@ +=transition($property, $time) + -webkit-transition: $property $time + -moz-transition: $property $time + -o-transition: $property $time + transition: $property $time + +=user-select-def + -webkit-user-select: none + -moz-user-select: none + -ms-user-select: none + user-select: none + +=border-radius-def($length) + -webkit-border-radius: $length + -moz-border-radius: $length + border-radius: $length + +/* General Button Abstractions */ +=clickable + cursor: pointer + +user-select-def diff --git a/src/style-globals/variables.sass b/src/style-globals/variables.sass new file mode 100644 index 00000000..4386059d --- /dev/null +++ b/src/style-globals/variables.sass @@ -0,0 +1,25 @@ +// Sizes and Margins +$document-padding: 20px +$inter-element-margin: 5px +$standard-border-radius: 5px +$side-menu-width: 350px +$color-indicator-width: 140px + +$global-padding: 30px +$side-bar-width: 250px +$navbar-height: 50px +$navbar-padding: 10px + +// Durations +$transition-length: 150ms + +// Colors +$gray-dark: #aaa +$gray-semi-dark: #bbb +$gray-semi-light: #ccc +$gray-light: #ddd +$gray-very-light: #eee +$blue: #00A6D6 +$blue-dark: #0087b5 +$blue-very-dark: #006182 +$blue-light: #deebf7 |