From 2c42e9488771070d8efec5d91835cd8c7885f4b1 Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Sun, 27 Aug 2017 17:42:50 +0200 Subject: Restyle navbar and use across entire site --- public/index.html | 11 +++ src/components/home/ContactSection.js | 33 ++++++++ src/components/home/ContentSection.js | 20 +++++ src/components/home/ContentSection.sass | 27 +++++++ src/components/navigation/LogoutButton.js | 6 +- src/components/navigation/LogoutButton.sass | 17 ----- src/components/navigation/Navbar.js | 87 ++++++++++++++-------- src/components/navigation/Navbar.sass | 85 +++++---------------- src/components/simulations/FilterButton.sass | 5 -- src/components/simulations/FilterPanel.js | 2 +- src/components/simulations/FilterPanel.sass | 3 +- .../simulations/SimulationActionButtons.js | 2 +- src/components/simulations/SimulationAuthList.sass | 14 ++-- src/containers/auth/Login.js | 5 +- src/index.sass | 6 ++ src/pages/App.js | 4 +- src/pages/Home.js | 11 ++- src/pages/Home.sass | 4 + src/pages/Profile.js | 6 +- src/pages/Profile.sass | 2 - src/pages/Simulations.js | 5 +- src/pages/Simulations.sass | 2 - src/style-globals/_variables.sass | 6 ++ 23 files changed, 210 insertions(+), 153 deletions(-) create mode 100644 src/components/home/ContactSection.js create mode 100644 src/components/home/ContentSection.js create mode 100644 src/components/home/ContentSection.sass delete mode 100644 src/components/navigation/LogoutButton.sass create mode 100644 src/pages/Home.sass delete mode 100644 src/pages/Profile.sass delete mode 100644 src/pages/Simulations.sass diff --git a/public/index.html b/public/index.html index b9560c37..065185d3 100644 --- a/public/index.html +++ b/public/index.html @@ -7,10 +7,21 @@ + + + + + + + + + diff --git a/src/components/home/ContactSection.js b/src/components/home/ContactSection.js new file mode 100644 index 00000000..8e6aed1a --- /dev/null +++ b/src/components/home/ContactSection.js @@ -0,0 +1,33 @@ +import React from "react"; +import ContentSection from "./ContentSection"; +import "./ContentSection.css"; + +const ContactSection = () => ( + +

Contact

+
+ TU Delft Logo +
+
+ Email Icon + +
+
+ Github Icon + +
+
+
+
+ A project by the @Large Research Group. +
+ +); + +export default ContactSection; diff --git a/src/components/home/ContentSection.js b/src/components/home/ContentSection.js new file mode 100644 index 00000000..126c5e4b --- /dev/null +++ b/src/components/home/ContentSection.js @@ -0,0 +1,20 @@ +import classNames from "classnames"; +import PropTypes from "prop-types"; +import React from "react"; +import "./ContentSection.css"; + +const ContentSection = ({name, children}) => ( +
+
+
+ {children} +
+
+
+); + +ContentSection.propTypes = { + name: PropTypes.string.isRequired, +}; + +export default ContentSection; diff --git a/src/components/home/ContentSection.sass b/src/components/home/ContentSection.sass new file mode 100644 index 00000000..c84f26db --- /dev/null +++ b/src/components/home/ContentSection.sass @@ -0,0 +1,27 @@ +@import ../../style-globals/_variables.sass + +.content-section + padding-top: 50px + padding-bottom: 150px + text-align: center + +@media screen and (min-width: $screen-sm) and (max-width: $screen-md) + .content-section h1 + font-size: 2em + margin-bottom: 40px + + .content-section h3 + font-size: 1.5em + +@media screen and (min-width: $screen-md) and (max-width: $screen-lg) + .content-section h1 + font-size: 3em + margin-bottom: 40px + + .content-section h3 + font-size: 1.8em + +@media screen and (min-width: $screen-lg) + .content-section h1 + font-size: 3em + margin-bottom: 40px diff --git a/src/components/navigation/LogoutButton.js b/src/components/navigation/LogoutButton.js index e2da7751..d58776dc 100644 --- a/src/components/navigation/LogoutButton.js +++ b/src/components/navigation/LogoutButton.js @@ -1,11 +1,11 @@ import PropTypes from "prop-types"; import React from "react"; +import FontAwesome from "react-fontawesome"; import {Link} from "react-router-dom"; -import "./LogoutButton.css"; const LogoutButton = ({onLogout}) => ( - - + + ); diff --git a/src/components/navigation/LogoutButton.sass b/src/components/navigation/LogoutButton.sass deleted file mode 100644 index b63494ab..00000000 --- a/src/components/navigation/LogoutButton.sass +++ /dev/null @@ -1,17 +0,0 @@ -@import ../../style-globals/_mixins.sass -@import ../../style-globals/_variables.sass - -.logout - float: right - margin-top: -1px - width: $navbar-height - - font-size: 14pt - - +clickable - - &:hover - background: #e3474d - - &:active - background: #a73438 diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js index ce020fef..5a4cd29e 100644 --- a/src/components/navigation/Navbar.js +++ b/src/components/navigation/Navbar.js @@ -1,37 +1,66 @@ -import React, {Component} from 'react'; -import FontAwesome from "react-fontawesome"; +import classNames from "classnames"; +import React from 'react'; import Mailto from "react-mailto"; -import {Link} from "react-router-dom"; +import {Link, withRouter} from "react-router-dom"; +import {userIsLoggedIn} from "../../auth/index"; +import Login from "../../containers/auth/Login"; import Logout from "../../containers/auth/Logout"; import ProfileName from "../../containers/auth/ProfileName"; import "./Navbar.css"; -class Navbar extends Component { - render() { - return ( -
- - OpenDC Logo -
- OpenDC -
- -
- Simulations -
-
- - - - - - - -
+const NavItem = withRouter(props => ); + +const NavItemWithoutRoute = ({route, location, children}) => ( +
  • + {children} +
    • +); + +const Navbar = () => ( + +); export default Navbar; diff --git a/src/components/navigation/Navbar.sass b/src/components/navigation/Navbar.sass index e9a83301..80346660 100644 --- a/src/components/navigation/Navbar.sass +++ b/src/components/navigation/Navbar.sass @@ -1,59 +1,30 @@ @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 +.navbar + border-top: $blue 3px solid + border-bottom: $gray-semi-dark 1px solid + color: $gray-very-dark + background: #fafafb .opendc-brand display: inline-block - float: left - margin-left: $global-padding + //float: left + //margin-left: $global-padding - padding: 0 10px + //padding: 0 10px - cursor: pointer - color: #eee - height: 100% + //cursor: pointer + color: $gray-very-dark + //height: 100% +transition(background, $transition-length) - &:hover - color: #fff - img + position: relative + bottom: 3px 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 + width: 30px .navbar-button-group display: inline-block @@ -63,18 +34,16 @@ display: inline-block line-height: $navbar-height text-align: center - color: #eee - - border-left: 1px solid #464646 + color: $gray-very-dark +clickable +transition(background, $transition-length) - a:last-of-type - border-right: 1px solid #464646 + a:hover + color: $gray-dark .navigation - margin-left: 30px + margin-left: 10px .simulations float: left @@ -82,12 +51,6 @@ font-size: 12pt - .simulations:hover - background: #606060 - - .simulations:active - background: #161616 - .user-controls float: right margin-right: $global-padding @@ -100,20 +63,8 @@ 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 diff --git a/src/components/simulations/FilterButton.sass b/src/components/simulations/FilterButton.sass index 60f6faca..698bc9a4 100644 --- a/src/components/simulations/FilterButton.sass +++ b/src/components/simulations/FilterButton.sass @@ -4,18 +4,13 @@ .simulation-filter-button display: inline-block width: 33.3% - //margin-right: -4px padding: 10px $global-padding font-size: 12pt - border-right: 1px solid #06326b +clickable +transition(background, $transition-length) -.simulation-filter-button:last-of-type - border: 0 - .simulation-filter-button:hover background: #0c60bf diff --git a/src/components/simulations/FilterPanel.js b/src/components/simulations/FilterPanel.js index b43139c1..811da005 100644 --- a/src/components/simulations/FilterPanel.js +++ b/src/components/simulations/FilterPanel.js @@ -7,7 +7,7 @@ const FilterPanel = () => (
    All Simulations My Simulations - Simulations shared with me + Shared with me
    ); diff --git a/src/components/simulations/FilterPanel.sass b/src/components/simulations/FilterPanel.sass index a59ffdfd..70401dcb 100644 --- a/src/components/simulations/FilterPanel.sass +++ b/src/components/simulations/FilterPanel.sass @@ -5,12 +5,11 @@ display: block background: #0761b1 - border: 1px solid #06326b color: #eee text-align: center - +border-radius($standard-border-radius) + +border-radius(25px) overflow: hidden margin-bottom: 20px diff --git a/src/components/simulations/SimulationActionButtons.js b/src/components/simulations/SimulationActionButtons.js index 1731b9be..29872fcb 100644 --- a/src/components/simulations/SimulationActionButtons.js +++ b/src/components/simulations/SimulationActionButtons.js @@ -7,7 +7,7 @@ const SimulationActionButtons = ({simulationId, onViewUsers, onDelete}) => ( -
    onViewUsers(simulationId)}>
    diff --git a/src/components/simulations/SimulationAuthList.sass b/src/components/simulations/SimulationAuthList.sass index 58683446..cb1fe4cc 100644 --- a/src/components/simulations/SimulationAuthList.sass +++ b/src/components/simulations/SimulationAuthList.sass @@ -54,8 +54,9 @@ .simulation-list .list-head > div:not(:first-of-type) padding-left: 5px !important -.simulation-row .simulation-icons +.simulation-icons text-align: right + padding-right: 0 !important .simulation-row .simulation-icons div, .simulation-row .simulation-icons a display: inline-block @@ -75,9 +76,10 @@ top: -4px left: -1px + background-color: $blue-dark + &.open - $icon-color: #0c60bf - background: $icon-color + $icon-color: #0a00bf span left: 1px @@ -91,23 +93,21 @@ &.users font-size: 10pt $icon-color: #17bf55 - background: $icon-color span left: -2px &:hover - background: lighten($icon-color, 10%) + background: $icon-color &:active background: darken($icon-color, 10%) &.delete $icon-color: #e3474d - background: $icon-color &:hover - background: lighten($icon-color, 10%) + background: $icon-color &:active background: darken($icon-color, 10%) diff --git a/src/containers/auth/Login.js b/src/containers/auth/Login.js index f1deb33c..3bc36a17 100644 --- a/src/containers/auth/Login.js +++ b/src/containers/auth/Login.js @@ -30,7 +30,10 @@ class LoginContainer extends React.Component { + onFailure={this.onAuthResponse.bind(this)} + style={{height: "40px"}} + className="btn btn-secondary" + > {' '} Login with Google diff --git a/src/index.sass b/src/index.sass index 80c72a77..dcf3f0ee 100644 --- a/src/index.sass +++ b/src/index.sass @@ -11,5 +11,11 @@ html, body, #root .full-height height: 100% +.page-container + padding-top: 60px + +.text-page-container + padding-top: 80px + a, a:hover text-decoration: none diff --git a/src/pages/App.js b/src/pages/App.js index f34c03cd..ce6556fb 100644 --- a/src/pages/App.js +++ b/src/pages/App.js @@ -5,7 +5,6 @@ import {openSimulationSucceeded} from "../actions/simulations"; import {fetchLatestDatacenter} from "../actions/topology"; import MapStage from "../components/map/MapStage"; import Navbar from "../components/navigation/Navbar"; -import Login from "../containers/auth/Login"; class AppContainer extends React.Component { static propTypes = { @@ -19,12 +18,11 @@ class AppContainer extends React.Component { render() { return ( -
    +
    -
    ); } diff --git a/src/pages/Home.js b/src/pages/Home.js index bd32d0d9..dd5fd492 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,8 +1,11 @@ import React from 'react'; -import Login from "../containers/auth/Login"; +import Navbar from "../components/navigation/Navbar"; +import "./Home.css"; -const Index = () => ( - +const Home = () => ( +
    + +
    ); -export default Index; +export default Home; diff --git a/src/pages/Home.sass b/src/pages/Home.sass new file mode 100644 index 00000000..58fbf6b2 --- /dev/null +++ b/src/pages/Home.sass @@ -0,0 +1,4 @@ +// Fix for the white space appearing otherwise on the right of the page, on mobile +.body-wrapper + overflow-x: hidden + overflow-y: hidden diff --git a/src/pages/Profile.js b/src/pages/Profile.js index 3c3b0899..d4594c9e 100644 --- a/src/pages/Profile.js +++ b/src/pages/Profile.js @@ -2,15 +2,12 @@ import React from 'react'; import {connect} from "react-redux"; import {openDeleteProfileModal} from "../actions/profile"; import Navbar from "../components/navigation/Navbar"; -import Login from "../containers/auth/Login"; import DeleteProfileModal from "../containers/profile/DeleteProfileModal"; -import "./Profile.css"; const ProfileContainer = ({onDelete}) => (
    -
    -

    Profile Settings

    +

    This does not delete your Google account, it simply disconnects it from the OpenDC app and deletes any @@ -19,7 +16,6 @@ const ProfileContainer = ({onDelete}) => (

    -
    ); diff --git a/src/pages/Profile.sass b/src/pages/Profile.sass deleted file mode 100644 index 9bb0a7e4..00000000 --- a/src/pages/Profile.sass +++ /dev/null @@ -1,2 +0,0 @@ -.profile-page-container - padding-top: 2rem diff --git a/src/pages/Simulations.js b/src/pages/Simulations.js index 8218b1a4..6c40516d 100644 --- a/src/pages/Simulations.js +++ b/src/pages/Simulations.js @@ -5,10 +5,8 @@ import {fetchAuthorizationsOfCurrentUser} from "../actions/users"; import Navbar from "../components/navigation/Navbar"; import SimulationFilterPanel from "../components/simulations/FilterPanel"; import NewSimulationButton from "../components/simulations/NewSimulationButton"; -import Login from "../containers/auth/Login"; import NewSimulationModal from "../containers/simulations/NewSimulationModal"; import VisibleSimulationList from "../containers/simulations/VisibleSimulationAuthList"; -import "./Simulations.css"; class SimulationsContainer extends React.Component { componentDidMount() { @@ -19,13 +17,12 @@ class SimulationsContainer extends React.Component { return (
    -
    +
    {this.props.openNewSimulationModal()}}/>
    -
    ); } diff --git a/src/pages/Simulations.sass b/src/pages/Simulations.sass deleted file mode 100644 index d639ba83..00000000 --- a/src/pages/Simulations.sass +++ /dev/null @@ -1,2 +0,0 @@ -.simulation-page-container - padding-top: 2rem diff --git a/src/style-globals/_variables.sass b/src/style-globals/_variables.sass index 4386059d..00c2b479 100644 --- a/src/style-globals/_variables.sass +++ b/src/style-globals/_variables.sass @@ -14,6 +14,7 @@ $navbar-padding: 10px $transition-length: 150ms // Colors +$gray-very-dark: #5c5c5c $gray-dark: #aaa $gray-semi-dark: #bbb $gray-semi-light: #ccc @@ -23,3 +24,8 @@ $blue: #00A6D6 $blue-dark: #0087b5 $blue-very-dark: #006182 $blue-light: #deebf7 + +// Media queries +$screen-sm: 768px +$screen-md: 992px +$screen-lg: 1200px -- cgit v1.2.3