diff --git a/evennia/web/webclient/static/webclient/css/goldenlayout.css b/evennia/web/webclient/static/webclient/css/goldenlayout.css index 8096f8a89b..4c0e77d254 100644 --- a/evennia/web/webclient/static/webclient/css/goldenlayout.css +++ b/evennia/web/webclient/static/webclient/css/goldenlayout.css @@ -116,11 +116,16 @@ label { height: 100%; } +.inputfieldwrapper { + width: 100%; + height: 100%; +} + .inputsend { position: absolute; right: 0; z-index: 1; - height: inherit; + height: 100%; width: 30px; color: white; background-color: black; @@ -128,9 +133,7 @@ label { } .inputfield { - position: absolute; - top: 0; - height: inherit; + height: 100%; width: calc(100% - 30px); background-color: black; color: white; diff --git a/evennia/web/webclient/static/webclient/js/plugins/default_out.js b/evennia/web/webclient/static/webclient/js/plugins/default_out.js index 01be2f9c62..ff6eb2f34b 100644 --- a/evennia/web/webclient/static/webclient/js/plugins/default_out.js +++ b/evennia/web/webclient/static/webclient/js/plugins/default_out.js @@ -21,10 +21,19 @@ let defaultout_plugin = (function () { // // By default just show the prompt. var onPrompt = function (args, kwargs) { - // show prompt - $('#prompt') - .addClass("out") - .html(args[0]); + // show prompt on every input pane + var prompts = $('.prompt'); + + for( var x=0; x < prompts.length; x++ ) { + var prmpt = $( prompts[x] ); + var sibling = prmpt.siblings().first(); + + prmpt.addClass("out") + .html(args[0]) + .css({'height':'1.5em'}); + + sibling.css({'height':'calc(100% - 1.5em)'}); + } return true; } diff --git a/evennia/web/webclient/static/webclient/js/plugins/goldenlayout.js b/evennia/web/webclient/static/webclient/js/plugins/goldenlayout.js index 917d075ed3..d1409ab3f7 100644 --- a/evennia/web/webclient/static/webclient/js/plugins/goldenlayout.js +++ b/evennia/web/webclient/static/webclient/js/plugins/goldenlayout.js @@ -476,6 +476,7 @@ let goldenlayout = (function () { myLayout = new GoldenLayout( window.goldenlayout_config, mainsub ); + $("#prompt").remove(); // remove the HTML-defined prompt div $("#inputcontrol").remove(); // remove the cluttered, HTML-defined input divs // register our component and replace the default messagewindow with the Main component @@ -486,11 +487,16 @@ let goldenlayout = (function () { // register our new input component myLayout.registerComponent( "input", function (container, componentState) { - var inputfield = $(""); + var promptfield = $("
"); + var formcontrol = $(""); var button = $(""); + + var inputfield = $("