Commit 7f2a0d07 authored by Matej Genci's avatar Matej Genci

Better CSS for the app

parent d21de047
.App {
body {
background-color: #282c34;
color: white;
justify-content: center;
color: white;
}
.App {
margin: 50px 20px 0px 20px;
}
.App-code-editors {
display: flex;
margin-top: 10px;
width: auto;
}
.tree-wrapper {
background: white;
margin-top: 10px;
height: 20em;
}
.ace-editor {
width: auto;
padding-right: 5px;
}
.user-io {
width: auto;
}
.user-io-input {
width: auto;
}
.user-io-output {
width: auto;
}
.warning
{
.warning {
background: rgba(255, 50, 50, 0.1);
position: absolute;
}
\ No newline at end of file
......@@ -69,7 +69,7 @@ class App extends React.Component {
readOnly={true} />
</div>
<div id="treeWrapper" style={{ width: '50em', height: '20em', background: 'white' }}>
<div className="tree-wrapper">
<Tree
data={this.state.graphData}
orientation="vertical" />
......
......@@ -18,7 +18,7 @@ class CodeEditor extends React.Component {
// Render editor
render() {
return (
<div>
<div className="ace-editor">
{this.heading()}
<AceEditor
mode="java"
......@@ -26,10 +26,12 @@ class CodeEditor extends React.Component {
className="aceeditor"
onChange={(newValue) => {
this.props.onCodeChange(newValue)
if (this.props.onCodeChange !== undefined)
this.props.onCodeChange(newValue)
}}
value={this.props.value}
markers={this.props.markers}
readOnly={this.props.readOnly}
editorProps={{ $blockScrolling: true }} />
</div>
......
......@@ -22,10 +22,10 @@ class UserIO extends React.Component {
render() {
return (
<div className="userIO">
<textarea value={this.state.programOutput} />
<div className="user-io">
<textarea className="user-io-output" value={this.state.programOutput} />
<div className="userIO-input">
<div className="user-io-input">
<input value={this.state.programInput} onChange={this.onInputChange}></input>
<button type="submit">submit</button>
</div>
......
Markdown is supported
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