updated editor styling

frontend/web-editor/public/bundle.js

@@ -43862,6 +43862,7 @@ function showConfirmation(successCallback, terminateCallback) {
 const html = require('choo/html')
 const Component = require('choo/component')
 const HydraEditor = require('./editor/editor.js')
+const log = require('./editor/log.js')
 
 module.exports = class Editor extends Component {
   constructor (id, state, emit) {
@@ -43872,6 +43873,7 @@ module.exports = class Editor extends Component {
   }
 
   load (element) {
+   log.init(this.logElement)
    this.editor = new HydraEditor(this.textEl)
    this.editor.on("*", (e, args) => {
        this.emit(e, args)
@@ -43900,13 +43902,15 @@ module.exports = class Editor extends Component {
 
   createElement ({ width = window.innerWidth, height = window.innerHeight} = {}) {
     this.textEl = html` <textarea></textarea>`
-    return html`<div id="editor-container">
-        ${this.textEl}
+    this.logElement = html`<div class="console cm-s-tomorrow-night-eighties"></div>`
+    return html`<div id="editor-container" style="display:flex;flex-direction:column;">
+       <div style="position:relative;flex:auto;padding:15px">${this.textEl}</div>
+       ${this.logElement}
        </div>`
   }
 }
 
-},{"./editor/editor.js":231,"choo/component":31,"choo/html":32}],230:[function(require,module,exports){
+},{"./editor/editor.js":231,"./editor/log.js":233,"choo/component":31,"choo/html":32}],230:[function(require,module,exports){
 const html = require('choo/html')
 const Component = require('choo/component')
 const HydraSynth = require('hydra-synth')
@@ -44137,12 +44141,14 @@ module.exports = {
 var logElement
 
 module.exports = {
-  init: () => {
-    logElement = document.createElement('div')
-    logElement.className = "console cm-s-tomorrow-night-eighties"
-    document.body.appendChild(logElement)
+  init: (el) => {
+    // logElement = document.createElement('div')
+    // logElement.className = "console cm-s-tomorrow-night-eighties"
+    // document.body.appendChild(logElement)
+    logElement = el
   },
   log: (msg, className = "") => {
+    console.log('logging', msg, className)
     if(logElement) logElement.innerHTML =` >> <span class=${className}> ${msg} </span> `
   },
   hide: () => {

frontend/web-editor/public/css/style.css

@@ -69,14 +69,15 @@ a:hover {
   height: calc(100% - 20px); */
   background: transparent;
   width: calc(100% - 60px);
+  height: calc(100% - 60px);
 }
 
 .console {
-  bottom: 0px;
+  /* bottom: 0px;
   position: absolute;
   padding: 20px;
   padding-bottom: 5px;
-  width: calc(100% - 40px);
+  width: calc(100% - 40px); */
   z-index: 6;
   left: 0px;
   font-family: monospace;
@@ -98,6 +99,8 @@ a:hover {
 #editor-container {
   width: 100%;
   height: 100%;
-  position: fixed;
-  padding: 20px;
+  /* position: fixed; */
+
+  position: absolute;
+  /* padding: 20px;  */
 }

frontend/web-editor/src/views/EditorComponent.js

@@ -1,6 +1,7 @@
 const html = require('choo/html')
 const Component = require('choo/component')
 const HydraEditor = require('./editor/editor.js')
+const log = require('./editor/log.js')
 
 module.exports = class Editor extends Component {
   constructor (id, state, emit) {
@@ -11,6 +12,7 @@ module.exports = class Editor extends Component {
   }
 
   load (element) {
+   log.init(this.logElement)
    this.editor = new HydraEditor(this.textEl)
    this.editor.on("*", (e, args) => {
        this.emit(e, args)
@@ -39,8 +41,10 @@ module.exports = class Editor extends Component {
 
   createElement ({ width = window.innerWidth, height = window.innerHeight} = {}) {
     this.textEl = html` <textarea></textarea>`
-    return html`<div id="editor-container">
-        ${this.textEl}
+    this.logElement = html`<div class="console cm-s-tomorrow-night-eighties"></div>`
+    return html`<div id="editor-container" style="display:flex;flex-direction:column;">
+       <div style="position:relative;flex:auto;padding:15px">${this.textEl}</div>
+       ${this.logElement}
        </div>`
   }
 }

frontend/web-editor/src/views/editor/log.js

@@ -1,12 +1,14 @@
 var logElement
 
 module.exports = {
-  init: () => {
-    logElement = document.createElement('div')
-    logElement.className = "console cm-s-tomorrow-night-eighties"
-    document.body.appendChild(logElement)
+  init: (el) => {
+    // logElement = document.createElement('div')
+    // logElement.className = "console cm-s-tomorrow-night-eighties"
+    // document.body.appendChild(logElement)
+    logElement = el
   },
   log: (msg, className = "") => {
+    console.log('logging', msg, className)
     if(logElement) logElement.innerHTML =` >> <span class=${className}> ${msg} </span> `
   },
   hide: () => {