Improving layout
This commit is contained in:
parent
d5430812bc
commit
2239a3685d
|
@ -13,12 +13,10 @@
|
||||||
<script src="/js/app.js" async defer></script>
|
<script src="/js/app.js" async defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="header">
|
|
||||||
<button type="button" class="btn btn-success" id="runButton">Run</button>
|
|
||||||
</div>
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div id="editor" class="column"></div>
|
<div id="editor" class="column"></div>
|
||||||
<div id="terminal" class="column"></div>
|
<div id="terminal" class="column"></div>
|
||||||
|
<button type="button" class="btn btn-success" id="runButton">Run</button>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -69,7 +69,10 @@ term.onData((data) =>
|
||||||
socket.send(JSON.stringify({ event: "terminalInput", input: data }))
|
socket.send(JSON.stringify({ event: "terminalInput", input: data }))
|
||||||
);
|
);
|
||||||
|
|
||||||
const editor = monaco.editor.create(document.getElementById("editor"));
|
const editor = monaco.editor.create(document.getElementById("editor"), {
|
||||||
|
minimap: { enabled: false },
|
||||||
|
scrollbar: { verticalScrollbarSize: 0 },
|
||||||
|
});
|
||||||
window.addEventListener("resize", () => editor.layout());
|
window.addEventListener("resize", () => editor.layout());
|
||||||
|
|
||||||
document.getElementById("runButton").addEventListener("click", () => {
|
document.getElementById("runButton").addEventListener("click", () => {
|
||||||
|
|
|
@ -3,18 +3,14 @@ body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header {
|
|
||||||
height: 50px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#runButton {
|
#runButton {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
top: 25px;
|
||||||
|
right: calc(50% + 25px);
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
height: calc(100% - 50px);
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
|
|
Loading…
Reference in New Issue