Skip to content
Snippets Groups Projects
Commit 4879bdad authored by Sandro Weber's avatar Sandro Weber
Browse files

grid layout and flexlayout not fullscreen

parent 58d100ac
No related branches found
No related tags found
No related merge requests found
.simulation-view-wrapper {
display: grid;
grid-template-rows: 100px auto;
grid-template-columns: 100px auto;
grid-template-areas:
"simulation-view-header simulation-view-header"
"simulation-view-sidebar simulation-view-mainview";
}
.simulation-view-header {
grid-area: simulation-view-header;
background-color: yellow;
min-height: 100px;
}
.simulation-view-sidebar {
grid-area: simulation-view-sidebar;
background-color: green;
height: 100vh;
}
.simulation-view-mainview {
grid-area: simulation-view-mainview;
background-color: red;
}
.simulation-view-flexlayout {
position: relative;
height: 100%;
}
\ No newline at end of file
......@@ -2,6 +2,7 @@ import React from 'react';
import FlexLayout from 'flexlayout-react';
import '../../../node_modules/flexlayout-react/style/light.css';
import './simulation-view.css';
const jsonBaseLayout = {
global: {},
......@@ -38,6 +39,15 @@ const jsonBaseLayout = {
}
};
const classNameMapper = (className) => {
if (className === 'flexlayout__layout') {
return 'simulation-view-flexlayout';
}
else {
return className;
}
};
export default class SimulationView extends React.Component {
constructor(props) {
super(props);
......@@ -57,8 +67,17 @@ export default class SimulationView extends React.Component {
render() {
return (
<div>
<FlexLayout.Layout model={this.state.model} factory={this.factory}/>
<div className='simulation-view-wrapper'>
<div className='simulation-view-header'>
header
</div>
<div className='simulation-view-sidebar'>
sidebar
</div>
<div className='simulation-view-mainview'>
<FlexLayout.Layout model={this.state.model} factory={this.factory}
classNameMapper={classNameMapper}/>
</div>
</div>
);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment