mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
remove broken responsive layout
This commit is contained in:
parent
35a8842de5
commit
f1fbea22a7
5 changed files with 46 additions and 156 deletions
72
src/app.js
72
src/app.js
|
|
@ -20,7 +20,6 @@ import { DndProvider } 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 { Hidden } from 'react-grid-system'
|
||||
|
||||
import AppDispatcher from './common/app-dispatcher';
|
||||
|
|
@ -29,8 +28,7 @@ import NotificationsDataManager from './common/data-managers/notifications-data-
|
|||
import Home from './common/home';
|
||||
import Header from './common/header';
|
||||
import Footer from './common/footer';
|
||||
import SidebarMenu from './common/menu-sidebar';
|
||||
import HeaderMenu from './common/header-menu';
|
||||
import Menu from './common/menu';
|
||||
|
||||
import InfrastructureComponents from './ic/ics';
|
||||
import Dashboard from './dashboard/dashboard';
|
||||
|
|
@ -51,9 +49,7 @@ class App extends React.Component {
|
|||
type: 'config/load',
|
||||
});
|
||||
|
||||
this.state = {
|
||||
showSidebarMenu: false,
|
||||
}
|
||||
this.state = {}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -72,14 +68,6 @@ class App extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
showSidebarMenu = () => {
|
||||
this.setState({ showSidebarMenu: true });
|
||||
};
|
||||
|
||||
hideSidebarMenu = () => {
|
||||
this.setState({ showSidebarMenu: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
let token = localStorage.getItem("token");
|
||||
|
|
@ -92,46 +80,32 @@ class App extends React.Component {
|
|||
|
||||
let currentUser = JSON.parse(currentUserRaw);
|
||||
|
||||
return (
|
||||
<DndProvider backend={HTML5Backend} >
|
||||
<div>
|
||||
{/*
|
||||
<Col style={{ width: this.state.showSidebarMenu ? '280px' : '0px' }} smHidden mdHidden lgHidden className="sidenav">
|
||||
*/}
|
||||
<Hidden sm md lg xl xxl>
|
||||
<Col style={{ width: this.state.showSidebarMenu ? '280px' : '0px' }} className="sidenav">
|
||||
<HeaderMenu onClose={this.hideSidebarMenu} currentRole={currentUser.role} />
|
||||
</Col>
|
||||
</Hidden>
|
||||
return <DndProvider backend={HTML5Backend} >
|
||||
<div className="app">
|
||||
<NotificationSystem
|
||||
ref="notificationSystem"
|
||||
/>
|
||||
<Header />
|
||||
|
||||
<div className="app">
|
||||
<NotificationSystem ref="notificationSystem" />
|
||||
<div className='app-body app-body-spacing'>
|
||||
<Menu currentRole={currentUser.role} />
|
||||
|
||||
<Header onMenuButton={this.showSidebarMenu} showMenuButton={false} />
|
||||
|
||||
<div className={`app-body app-body-spacing`} >
|
||||
<Col xs={false}>
|
||||
<SidebarMenu currentRole={currentUser.role} />
|
||||
</Col>
|
||||
|
||||
<div className={`app-content app-content-margin-left`}>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path="/home" component={Home} />
|
||||
<Route exact path="/scenarios" component={Scenarios} />
|
||||
<Route path="/scenarios/:scenario" component={Scenario} />
|
||||
<Route path="/dashboards/:dashboard" component={Dashboard} />
|
||||
<Route path="/infrastructure" component={InfrastructureComponents} />
|
||||
<Route path="/account" component={User} />
|
||||
<Route path="/users" component={Users} />
|
||||
<Route path="/api" component={APIBrowser} />
|
||||
</div>
|
||||
<div className='app-content app-content-margin-left'>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path="/home" component={Home} />
|
||||
<Route exact path="/scenarios" component={Scenarios} />
|
||||
<Route path="/scenarios/:scenario" component={Scenario} />
|
||||
<Route path="/dashboards/:dashboard" component={Dashboard} />
|
||||
<Route path="/infrastructure" component={InfrastructureComponents} />
|
||||
<Route path="/account" component={User} />
|
||||
<Route path="/users" component={Users} />
|
||||
<Route path="/api" component={APIBrowser} />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</DndProvider>
|
||||
)
|
||||
</DndProvider>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
/**
|
||||
* 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" variant="link" onClick={this.props.onClose}>×</Button>
|
||||
|
||||
<ul>
|
||||
<li><NavLink to="/home" activeClassName="active" title="Home" onClick={this.props.onClose}>Home</NavLink></li>
|
||||
<li><NavLink to="/scenarios" activeClassName="active" title="Scenarios" onClick={this.props.onClose}>Scenarios</NavLink></li>
|
||||
<li><NavLink to="/infrastructure" activeClassName="active" title="Infrastructure" onClick={this.props.onClose}>Infrastructure</NavLink></li>
|
||||
{ this.props.currentRole === 'Admin' ?
|
||||
<li><NavLink to="/users" activeClassName="active" title="Users" onClick={this.props.onClose}>Users</NavLink></li> : ''
|
||||
}
|
||||
<li><NavLink to="/account" title="Account">Account</NavLink></li>
|
||||
<li><NavLink to="/logout" title="Logout" onClick={this.props.onClose}>Logout</NavLink></li>
|
||||
</ul>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
@ -25,18 +25,7 @@ class Header extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<header className="app-header">
|
||||
<Col xs={{span: 10}} sm={{span: 8, offset: 2}}>
|
||||
<h1>{config.instance} - {config.subtitle}</h1>
|
||||
</Col>
|
||||
<Hidden sm md lg xl>
|
||||
<Col xs={2} style={{ paddingLeft: 'auto', paddingRight: 0 }}>
|
||||
{this.props.showMenuButton &&
|
||||
<Button variant="link" onClick={this.props.onMenuButton} style={{ float: 'right', marginRight: '10px' }}>
|
||||
<Icon size="3x" icon="bars" className="menu-icon" />
|
||||
</Button>
|
||||
}
|
||||
</Col>
|
||||
</Hidden>
|
||||
<h1>{config.instance} - {config.subtitle}</h1>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,10 +65,11 @@ class SidebarMenu extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
if (this.state.externalAuth) {
|
||||
return (
|
||||
<div className="menu-sidebar">
|
||||
<h2>Menu</h2>
|
||||
return (
|
||||
<div className="menu">
|
||||
<h2>Menu</h2>
|
||||
|
||||
{this.state.externalAuth ?
|
||||
<ul>
|
||||
<li><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
|
||||
<li><NavLink to="/scenarios" activeClassName="active" title="Scenarios">Scenarios</NavLink></li>
|
||||
|
|
@ -80,15 +81,7 @@ class SidebarMenu extends React.Component {
|
|||
<a onClick={this.logout.bind(this)} href={this.state.logoutLink}>Logout</a>
|
||||
<li><NavLink to="/api" title="API Browser">API Browser</NavLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="menu-sidebar">
|
||||
<h2>Menu</h2>
|
||||
|
||||
<ul>
|
||||
: <ul>
|
||||
<li><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
|
||||
<li><NavLink to="/scenarios" activeClassName="active" title="Scenarios">Scenarios</NavLink></li>
|
||||
<li><NavLink to="/infrastructure" activeClassName="active" title="Infrastructure">Infrastructure</NavLink></li>
|
||||
|
|
@ -98,7 +91,7 @@ class SidebarMenu extends React.Component {
|
|||
<li><NavLink to="/account" title="Account">Account</NavLink></li>
|
||||
<li><NavLink to={this.state.logoutLink} title="Logout">Logout</NavLink></li>
|
||||
<li><NavLink to="/api" title="API Browser">API Browser</NavLink></li>
|
||||
</ul>
|
||||
</ul>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -30,37 +30,18 @@ body {
|
|||
hyphens: auto;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
/*height: 100%;*/
|
||||
}
|
||||
|
||||
.app-header {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
color: #527984;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
width: 100%;
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.app-header h1 {
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header .menu-icon {
|
||||
color: #818181;
|
||||
right: 5px;
|
||||
|
||||
padding: 6px 0 0 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
|
|
@ -83,12 +64,7 @@ body {
|
|||
}
|
||||
|
||||
.app-body-spacing {
|
||||
padding: 15px 5px 0px 5px;
|
||||
}
|
||||
|
||||
.app-body-spacing > div {
|
||||
margin-left: 7px;
|
||||
margin-right: 7px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.app-content-fullscreen {
|
||||
|
|
@ -96,7 +72,7 @@ body {
|
|||
}
|
||||
|
||||
.app-content {
|
||||
padding: 15px 20px;
|
||||
padding: 15px 20px 20px 20px;
|
||||
|
||||
width: auto;
|
||||
min-height: 300px;
|
||||
|
|
@ -106,10 +82,8 @@ body {
|
|||
0 9px 18px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.app-content-margin-left {
|
||||
margin-left: 195px !important;
|
||||
}
|
||||
.app-content-margin-left {
|
||||
margin-left: 180px !important;
|
||||
}
|
||||
|
||||
.verticalhorizontal {
|
||||
|
|
@ -122,8 +96,8 @@ body {
|
|||
/**
|
||||
* Menus
|
||||
*/
|
||||
.menu-sidebar {
|
||||
padding: 20px 25px 20px 25px;
|
||||
.menu {
|
||||
padding: 20px;
|
||||
width: 160px;
|
||||
float: left;
|
||||
|
||||
|
|
@ -132,12 +106,12 @@ body {
|
|||
0 9px 18px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.menu-sidebar a {
|
||||
.menu a {
|
||||
color: #4d4d4d;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.menu-sidebar a:hover, .menu-sidebar a:focus {
|
||||
.menu a:hover, .menu a:focus {
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
|
|
@ -145,17 +119,17 @@ body {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-sidebar ul {
|
||||
.menu ul {
|
||||
padding-top: 10px;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.menu-sidebar li {
|
||||
.menu li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.menu-sidebar a::after {
|
||||
.menu a::after {
|
||||
/* Trick to make menu items to be as wide as in bold */
|
||||
display: block;
|
||||
content: attr(title);
|
||||
|
|
@ -232,7 +206,7 @@ body {
|
|||
/**
|
||||
* Login select
|
||||
*/
|
||||
.login-select {
|
||||
.login-select {
|
||||
position: sticky;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue