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

@@ -0,0 +1,43 @@
+/**
+ * File: header-menu.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * 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 <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { NavLink } from 'react-router-dom';
+
+export default class HeaderMenu extends React.Component {
+  render() {
+    return <div>
+      <Button className="closeButton" bsStyle="link" onClick={this.props.onClose}>&times;</Button>
+
+      <ul>
+        <li><NavLink to="/home" activeClassName="active" title="Home" onClick={this.props.onClose}>Home</NavLink></li>
+        <li><NavLink to="/projects" activeClassName="active" title="Projects" onClick={this.props.onClose}>Projects</NavLink></li>
+        <li><NavLink to="/simulations" activeClassName="active" title="Simulations" onClick={this.props.onClose}>Simulations</NavLink></li>
+        <li><NavLink to="/simulators" activeClassName="active" title="Simulators" onClick={this.props.onClose}>Simulators</NavLink></li>
+        { this.props.currentRole === 'admin' ? 
+            <li><NavLink to="/users" activeClassName="active" title="User Management" onClick={this.props.onClose}>User Management</NavLink></li> : ''
+        }
+        <li><NavLink to="/logout" title="Logout" onClick={this.props.onClose}>Logout</NavLink></li>
+      </ul>
+    </div>;
+  }
+}

src/components/header.js

@@ -19,15 +19,21 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-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 (
       <header className="app-header">
-        <h1>VILLASweb</h1>
+        <Col xs={10} smOffset={2} sm={8}>
+          <h1>VILLASweb</h1>
+        </Col>
+        <Col xs={2} smHidden mdHidden lgHidden style={{ paddingLeft: 'auto', paddingRight: 0 }}>
+          {this.props.showMenuButton &&
+            <Button bsStyle="link" onClick={this.props.onMenuButton} style={{ float: 'right', marginRight: '10px' }}><Glyphicon glyph="menu-hamburger" className="menu-icon" /></Button>
+          }
+        </Col>
       </header>
     );
   }

src/components/menu-sidebar.js

@@ -19,10 +19,10 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-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 (
       <div className="menu-sidebar">

src/components/table.js

@@ -151,7 +151,7 @@ class CustomTable extends Component {
     }
 
     return (
-      <Table style={{ width: this.props.width}} striped hover bordered>
+      <Table style={{ width: this.props.width }} striped hover>
         <thead>
           <tr>
             {this.props.children}

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 (<Redirect to="/login" />);
     }
 
     return (
-      <div className="app">
-        <NotificationSystem ref="notificationSystem" />
+      <div>
+        <Col style={{ width: this.state.showSidebarMenu ? '280px' : '0px' }} smHidden mdHidden lgHidden className="sidenav">
+          <HeaderMenu onClose={this.hideSidebarMenu} currentRole={this.state.currentRole} />
+        </Col>
 
-        <Header />
+        <div className="app">
+          <NotificationSystem ref="notificationSystem" />
 
-        <div className="app-body">
-          <SidebarMenu currentRole={ this.state.currentRole }/>
+          <Header onMenuButton={this.showSidebarMenu} showMenuButton={this.state.token != null} />
 
-          <div className="app-content">
-            <Route exact path="/" component={Home} />
-            <Route path="/home" component={Home} />
-            <Route exact path="/projects" component={Projects} />
-            <Route path="/projects/:project" component={Project} />
-            <Route path="/visualizations/:visualization" component={Visualization} />
-            <Route exact path="/simulations" component={Simulations} />
-            <Route path="/simulations/:simulation" component={Simulation} />
-            <Route path="/simulators" component={Simulators} />
-            <Route path="/users" component={Users} />
+          <div className="app-body">
+            <Col xsHidden>
+              <SidebarMenu currentRole={this.state.currentRole}/>
+            </Col>
+
+            <div className="app-content">
+              <Route exact path="/" component={Home} />
+              <Route path="/home" component={Home} />
+              <Route exact path="/projects" component={Projects} />
+              <Route path="/projects/:project" component={Project} />
+              <Route path="/visualizations/:visualization" component={Visualization} />
+              <Route exact path="/simulations" component={Simulations} />
+              <Route path="/simulations/:simulation" component={Simulation} />
+              <Route path="/simulators" component={Simulators} />
+              <Route path="/users" component={Users} />
+            </div>
           </div>
-        </div>
 
-        <Footer />
+          <Footer />
+        </div>
       </div>
     );
   }

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
  */