From 2bf59d77b4475b1bca67d2c2abe615e1be0c059a Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Fri, 18 Aug 2017 11:08:20 +0200 Subject: [PATCH] Make design responsive for mobile Not all components work with touch input yet. But the most part of the website is working, you can even view visualizations. --- src/components/header-menu.js | 43 ++++++++++++++++ src/components/header.js | 16 ++++-- src/components/menu-sidebar.js | 4 +- src/components/table.js | 2 +- src/containers/app.js | 56 ++++++++++++++------- src/styles/app.css | 90 ++++++++++++++++++++++++++++------ 6 files changed, 170 insertions(+), 41 deletions(-) create mode 100644 src/components/header-menu.js diff --git a/src/components/header-menu.js b/src/components/header-menu.js new file mode 100644 index 0000000..b2daf0e --- /dev/null +++ b/src/components/header-menu.js @@ -0,0 +1,43 @@ +/** + * File: header-menu.js + * Author: Markus Grigull + * Date: 17.08.2017 + * + * This file is part of VILLASweb. + * + * VILLASweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * VILLASweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with VILLASweb. If not, see . + ******************************************************************************/ + +import React from 'react'; +import { Button } from 'react-bootstrap'; +import { NavLink } from 'react-router-dom'; + +export default class HeaderMenu extends React.Component { + render() { + return
+ + +
    +
  • Home
    • +
  • Projects
    • +
  • Simulations
    • +
  • Simulators
    • + { this.props.currentRole === 'admin' ? +
  • User Management
    • : '' + } +
  • Logout
    • +
+
; + } +} diff --git a/src/components/header.js b/src/components/header.js index 2268cb5..d0d0a87 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -19,15 +19,21 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component } from 'react'; +import React from 'react'; +import { Col, Button, Glyphicon } from 'react-bootstrap'; -import '../styles/app.css'; - -class Header extends Component { +class Header extends React.Component { render() { return (
-

VILLASweb

+ +

VILLASweb

+ + + {this.props.showMenuButton && + + } +
); } diff --git a/src/components/menu-sidebar.js b/src/components/menu-sidebar.js index 110a206..66ab5fb 100644 --- a/src/components/menu-sidebar.js +++ b/src/components/menu-sidebar.js @@ -19,10 +19,10 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component } from 'react'; +import React from 'react'; import { NavLink } from 'react-router-dom'; -class SidebarMenu extends Component { +class SidebarMenu extends React.Component { render() { return (
diff --git a/src/components/table.js b/src/components/table.js index 232cc0b..b78a84e 100644 --- a/src/components/table.js +++ b/src/components/table.js @@ -151,7 +151,7 @@ class CustomTable extends Component { } return ( - +
{this.props.children} diff --git a/src/containers/app.js b/src/containers/app.js index a0ce9e6..9141dec 100644 --- a/src/containers/app.js +++ b/src/containers/app.js @@ -25,6 +25,7 @@ import { DragDropContext } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; import NotificationSystem from 'react-notification-system'; import { Redirect, Route } from 'react-router-dom'; +import { Col } from 'react-bootstrap'; import AppDispatcher from '../app-dispatcher'; import SimulationStore from '../stores/simulation-store'; @@ -35,6 +36,7 @@ import NotificationsDataManager from '../data-managers/notifications-data-manage import Header from '../components/header'; import Footer from '../components/footer'; import SidebarMenu from '../components/menu-sidebar'; +import HeaderMenu from '../components/header-menu'; import Home from './home'; import Projects from './projects'; @@ -59,7 +61,9 @@ class App extends React.Component { nodes: NodeStore.getState(), simulations: SimulationStore.getState(), currentRole: currentUser ? currentUser.role : '', - token: UserStore.getState().token + token: UserStore.getState().token, + + showSidebarMenu: false }; } @@ -93,34 +97,50 @@ class App extends React.Component { NotificationsDataManager.setSystem(this.refs.notificationSystem); } + showSidebarMenu = () => { + this.setState({ showSidebarMenu: true }); + } + + hideSidebarMenu = () => { + this.setState({ showSidebarMenu: false }); + } + render() { if (this.state.token == null) { return (); } return ( -
- +
+
+ + -
+
+ -
- +
-
- - - - - - - - - +
+
+ + + +
+ + + + + + + + + +
- -
+
+ ); } diff --git a/src/styles/app.css b/src/styles/app.css index d5b0e95..6cc5360 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -26,16 +26,12 @@ body { background-color: #6EA2B0 !important; } -#root { - height: 100vh; -} - .app { - min-width: 800px; height: 100%; color: #4d4d4d; font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; + hyphens: auto; } .app-header { @@ -51,7 +47,25 @@ body { width: 100%; margin: 0; - text-align: center; + text-align: left; +} + +@media (min-width: 768px) { + .app-header h1 { + text-align: center !important; + } +} + +.app-header .menu-icon { + font-size: 28px; + color: #818181; + right: 5px; + + padding: 6px 0 0 0; +} + +.btn-link { + padding: 0 !important; } .app-footer { @@ -67,13 +81,6 @@ body { } .app-body { - /* Let sidebar grow and content occupy rest of the space */ - display: flex; - float: right; - width: 100%; - /* Fit between header and footer */ - min-height: calc(100vh - 140px); - padding: 15px 5px 0px 5px; } @@ -83,20 +90,30 @@ body { } .app-content { - flex: 1 1 auto; padding: 15px 20px; + width: auto; + min-height: 300px; + background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 9px 18px 0 rgba(0, 0, 0, 0.1); } +@media (min-width: 768px) { + .app-content { + margin-left: 200px !important; + } +} + /** * Menus */ .menu-sidebar { - display: inline-table; + /*display: inline-table;*/ padding: 20px 25px 20px 25px; + width: 180px; + float: left; background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), @@ -133,6 +150,49 @@ body { visibility:hidden; margin-bottom:-1px; } + +.sidenav { + height: 100%; + position: fixed; + top: 0; + right: 0; + z-index: 100; + background-color: #111; + overflow-x: hidden; + padding-top: 60px; + transition: 0.5s; +} + +.sidenav a { + padding: 8px 8px 8px 32px; + text-decoration: none; + font-size: 25px; + color: #818181; + display: block; + transition: 0.3s; +} + +.sidenav a:hover { + color: #f1f1f1; + text-decoration: none; +} + +.sidenav .closeButton { + position: absolute; + top: -15px; + right: 15px; + font-size: 56px; + margin-left: 50px; + text-decoration: none; + display: block; + color: #818181; + transition: 0.3s; +} + +.sidenav .closeButton:hover { + text-decoration: none; + color: #f1f1f1; +} /** * Login form */