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

Better CSS for the app

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