From b8d7fae7864ea9a2bb9f985191d1aa69b4e28e13 Mon Sep 17 00:00:00 2001
From: Griatch <griatch@gmail.com>
Date: Sun, 14 Feb 2016 18:53:48 +0100
Subject: [PATCH] Fixed up the webclient html+css to make for a workable
 example.

---
 .../static/webclient/css/webclient.css        | 81 +++++++++++--------
 .../static/webclient/js/webclient_gui.js      | 13 ++-
 .../webclient/templates/webclient/base.html   |  8 +-
 .../templates/webclient/webclient.html        |  9 ++-
 4 files changed, 67 insertions(+), 44 deletions(-)

diff --git a/evennia/web/webclient/static/webclient/css/webclient.css b/evennia/web/webclient/static/webclient/css/webclient.css
index eeabf6881a..93c6e02c9e 100644
--- a/evennia/web/webclient/static/webclient/css/webclient.css
+++ b/evennia/web/webclient/static/webclient/css/webclient.css
@@ -10,13 +10,15 @@
 /* Overall element look */
 html, body { height: 100% }
 body {
-  margin: 0;
-  padding: 0;
-  background: #000;
-  color: #ccc;
-  font-size: .9em;
-  font-family: 'DejaVu Sans Mono', Consolas, Inconsolata, 'Lucida Console', monospace;
-  line-height: 1.6em }
+    margin: 0;
+    padding: 0;
+    background: #000;
+    color: #ccc;
+    font-size: .9em;
+    font-family: 'DejaVu Sans Mono', Consolas, Inconsolata, 'Lucida Console', monospace;
+    line-height: 1.6em;
+    overflow: hidden;
+}
 
 
 a:link, a:visited { color: #fff }
@@ -84,57 +86,70 @@ div {margin:0px;}
 .bgdimgray { background-color: #696969;}
 .bgblack { background-color: black;}
 
-/* Container surrounding entire chat */
+/* Container surrounding entire client */
 #wrapper {
-  position: relative;
-  height: 100% }
+    position: relative;
+    height: 100%
+}
 
 /* Main scrolling message area */
 #messagewindow {
-  height: 93%;
-  overflow: auto }
+    position: relative;
+    height: 90%;
+    overflow: auto;
+    padding: 1em;
+}
 
 /* Input area containing input field and button */
 #inputform {
-  position: absolute;
-  width: 100%;
-  padding: .8em 0;
-  bottom: 0 }
+    position: absolute;
+    width: 100%;
+    padding: .8em 0;
+    bottom: -50px;
+}
 
 #inputcontrol {
-  padding: 0 .8em;
-  overflow: auto }
+    padding: 0 .8em;
+    overflow: auto
+}
 
 /* Input field */
 #inputfield {
-  float: left;
-  width: 87%;}
+    float: left;
+    width: 93%;
+    height: 40px;
+    margin-right: .5em
+}
 
 #inputfield:focus {
-  outline: 0 }
+    outline: 0;
+}
 
 /* Input 'send' button */
 #inputsend {
-  float: left;
-  width: 8% }
-
-#inputfield { margin-right: .5em }
+    float: left;
+    width: 4%
+}
 
 #inputfield, #inputsend {
-  border: 1px solid #555;
-  background: #000;
-  color: #fff;
-  padding: .4em .45em;
-  font-size: 1.1em;
-  font-family: 'DejaVu Sans Mono', Consolas, Inconsolata, 'Lucida Console', monospace }
+    height: 40px;
+    border: 1px solid #555;
+    background: #000;
+    color: #fff;
+    padding: .4em .45em;
+    font-size: 1.1em;
+    font-family: 'DejaVu Sans Mono', Consolas, Inconsolata, 'Lucida Console', monospace;
+}
 
 /* prompt area above input field */
 #prompt {
-  margin-top: .8em;}
+    margin-top: .8em;
+}
 
 /* No javascript warning */
 #connecting {
-  padding: .5em .9em }
+    padding: .5em .9em
+}
 
 /*Example player count display */
 #playercount { margin-left: .8em }
diff --git a/evennia/web/webclient/static/webclient/js/webclient_gui.js b/evennia/web/webclient/static/webclient/js/webclient_gui.js
index 12db6b2f49..27cd43f6e9 100644
--- a/evennia/web/webclient/static/webclient/js/webclient_gui.js
+++ b/evennia/web/webclient/static/webclient/js/webclient_gui.js
@@ -88,6 +88,7 @@ function doWindowResize() {
     var winh = $(document).height();
     var formh = $('#inputform').outerHeight(true);
     $("#messagewindow").css({'height': winh - formh - 1});
+    $("#inputform").css({'bottom': JSON.stringify(-$("#inputform").height()-10)+"px"});
 }
 
 // Handle text coming from the server
@@ -96,7 +97,9 @@ function onText(args, kwargs) {
     // the bottom.
     mwin = $("#messagewindow");
     mwin.append("<div class='msg out'>" + args[0] + "</div>");
-    mwin.scrollTop(mwin[0].scrollHeight);
+    mwin.animate({
+        scrollTop: document.getElementById("messagewindow").scrollHeight
+    }, 0);
 }
 
 // Handle prompt output from the server
@@ -106,10 +109,10 @@ function onPrompt(args, kwargs) {
            "<div id='prompt' class='msg out'>" + args[0] + "</div>");
 }
 
-// Handler silencing events we don't do anything with.
+// Handle silencing events we don't do anything with.
 function onSilence(cmdname, args, kwargs) {}
 
-// Handler unrecognized commands from server
+// Handle unrecognized commands from server
 function onDefault(cmdname, args, kwargs) {
     mwin = $("#messagewindow");
     mwin.append(
@@ -127,7 +130,8 @@ function onDefault(cmdname, args, kwargs) {
 //
 
 // Event when client window changes
-$(window).resize(doWindowResize);
+$(window).bind("resize", doWindowResize);
+$("#inputfield").bind("resize", doWindowResize);
 
 // Evenit when any key is pressed
 $(document).keydown(onKeydown);
@@ -148,6 +152,7 @@ $(document).ready(function() {
     // Event when closing window (have to have Evennia initialized)
     $(window).bind("beforeunload", Evennia.connection.close);
 
+    doWindowResize();
     // set an idle timer to send idle every 3 minutes,
     // to avoid proxy servers timing out on us
     setInterval(function() {
diff --git a/evennia/web/webclient/templates/webclient/base.html b/evennia/web/webclient/templates/webclient/base.html
index d23edf7e9f..490391f6ed 100644
--- a/evennia/web/webclient/templates/webclient/base.html
+++ b/evennia/web/webclient/templates/webclient/base.html
@@ -33,7 +33,7 @@ JQuery available.
             var wsactive = true;
         {% else %}
             var wsactive = false;
-        {% endif %} 
+        {% endif %}
 
         {% if websocket_url %}
             var wsurl = "{{websocket_url}}:{{websocket_port}}";
@@ -50,7 +50,7 @@ JQuery available.
 
   </head>
   <body>
-    
+
     <div id="connecting">
         {% block connecting %}
         {% endblock %}
@@ -58,12 +58,12 @@ JQuery available.
 
     <div id="noscript" class="err">
         <h3>Javascript Error: The Evennia MUD client requires that you
-            have Javascript activated.</h3> 
+            have Javascript activated.</h3>
             <p>Turn off eventual script blockers and/or switch to a
             web browser supporting javascript. <p>
             This error could also be due to not being able to access
             the online jQuery javascript library.</p>
-        <!-- This is will only fire if javascript is actually active --> 
+        <!-- This is will only fire if javascript is actually active -->
         <script language="javascript" type="text/javascript">
             $('#noscript').remove();
         </script>
diff --git a/evennia/web/webclient/templates/webclient/webclient.html b/evennia/web/webclient/templates/webclient/webclient.html
index c0315f2694..3052bcbd97 100644
--- a/evennia/web/webclient/templates/webclient/webclient.html
+++ b/evennia/web/webclient/templates/webclient/webclient.html
@@ -9,11 +9,14 @@
 
 {% block client %}
 
-<div id="client">
+<div id="wrapper">
     <div id="messagewindow"></div>
     <div id="inputform">
-        <textarea id="inputfield" type="text"> </textarea>
-        <input id="send" type="button" onClick="doSendText()" value="&gt;"/>
+        <div id="prompt"></div>
+        <div id="inputcontrol">
+            <textarea id="inputfield" type="text"> </textarea>
+            <input id="inputsend" type="button" onClick="doSendText()" value="&gt;"/>
+        </div>
     </div>
 </div>