Fixes webclient spacing issues in lists. Patches created by user "61924.00". Still issues with some line breaks, as per issue 121.

src/web/media/css/webclient.css

@@ -1,87 +1,103 @@
-/*
+/* ---
-Style sheet for Evennia's web client. 
 
-This should possibly somehow be incoorporated with the 
+  Style sheet for Evennia's web client.
-overall website theme in the future? 
-*/
 
-/*Overall element look */
+  This should possibly somehow be incoorporated with the
-body{ 
+  overall website theme in the future?
-    background:#000;
+
-    color:#fff;
+--- */
-    font-size:.9em;    
+
-}
+/* Overall element look */
-a:link{
+html, body { height: 100% }
-    color:#fff;
+body {
-}
+  margin: 0;
-a:visited{
+  padding: 0;
-    color:#ccc;
+  background: #000;
-}
+  color: #ccc;
+  font-size: .9em;
+  font-family: 'DejaVu Sans Mono', Consolas, Inconsolata, 'Lucida Console', monospace;
+  line-height: 1.6em }
+
+a:link, a:visited { color: #fff }
+a:hover, a:active { color: #ccc }
+
+/* Base style for new messages in the main message area */
+.msg {
+  white-space: pre-wrap;
+  word-break: break-all;
+  padding: .5em .9em;}
+  /*border-bottom: 1px dotted #222 } /*optional line between messages */
+
+/* Utility messages (green) */
+.sys { color: #0f0 }
+
+/* Messages echoed back after input */
+.inp { color: #555 }
+
+/* Messages returned from the server (most messages) */
+.out { color: #aaa }
+
+/* Error messages (red) */
+.err { color: #f00 }
+
+/* Container surrounding entire chat */
+#wrapper {
+  position: relative;
+  height: 100% }
+
+/* Main scrolling message area */
+#messagewindow {
+  height: 93%;
+  overflow: auto }
+
+/* Input area containing input field and button */
+#inputform {
+  position: absolute;
+  width: 100%;
+  padding: .8em 0;
+  bottom: 0 }
+
+#inputcontrol {
+  padding: 0 .8em;
+  overflow: auto }
+
+/* Input field */
+#inputfield {
+  float: left;
+  width: 87%;}
+
+
+#inputfield:focus {
+  outline: 0 }
+
+/* Input 'send' button */
+#inputsend {
+  float: left;
+  width: 8% }
+
+#inputfield { margin-right: .5em }
+
+#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 }
+
+/* No javascript warning */
+#connecting {
+  padding: .5em .9em }
 
-/*Base style for new messages in the main message area.*/
-.msg{ 
-    background:#000;
-    padding:.2em; 
-    border-bottom:1px #000 solid
-}    
-/*Utility messages (green)*/
-.sys{ 
-    color:#0f0;
-}
-/*Messages echoed back after input*/
-.inp{ 
-    color:#555;
-}
-/*Messages returned from the server (most messages) */
-.out{ 
-    color:#aaa;
-}
-/*Error messages (red)*/
-.err{ 
-    color:#f00;
-}
-/*Container surrounding entire chat*/
-#wrapper{ 
-    margin-left:10px;
-}
-/*Main scrolling message area*/
-#messagewindow{ 
-    overflow:auto; 
-    height:400px; 
-    bottom:10px 
-}
-/*Input area containing input field and button*/
-#inputform{ 
-    position:fixed;
-    bottom:0px;
-}
-/*Input field */
-#inputfield{
-    background:#000;
-    color:#fff;
-    font-size:.9em;
-    width:120ex;
-    border:1px solid;
-    padding:4px;
-    border-color:#555;    
-    outline-style:none;
-    margin-left:10px;
-}    
-/*Input 'send' button*/
-#inputsend{ 
-    background:#000;
-    color:#fff;
-    font-size:.9em;
-    border:1px solid;
-    padding: 3px;
-    border-color:#555;
-}
-/*No javascript warning*/
-#noscript{
-    color:f00;
-}
 /*Example player count display */
-#playercount{
+#playercount { margin-left: .8em }
-    margin-left:10px;
+
-    color: #555;
+/* Testing */
-}
+/*#inputform {
+  outline: 1px dotted blue }
+
+#messagewindow {
+  outline: 1px dotted red }
+
+#wrapper {
+  outline: 1px dotted green }*/

src/web/media/javascript/evennia_webclient.js

@@ -111,8 +111,9 @@ function webclient_init(){
             $("#connecting").remove() // remove the "connecting ..." message.
             CLIENT_HASH = data.suid // unique id hash given from server
 
-            setTimeout(function () { // a small timeout to stop 'loading' indicator in Chrome
+            // A small timeout to stop 'loading' indicator in Chrome
-                $("#playercount").fadeOut('slow');
+            setTimeout(function () {
+                $("#playercount").fadeOut('slow', webclient_set_sizes);
             }, 10000);
 
             // Report success
@@ -221,11 +222,12 @@ $("#inputsend").one("click", webclient_input)
 function webclient_set_sizes() {
     // Sets the size of the message window
     var win_h = $(document).height();
-    var win_w = $('#wrapper').width();
+    //var win_w = $('#wrapper').width();
-    var inp_h = $('#inputform').height();
+    var inp_h = $('#inputform').outerHeight(true);
-    var inp_w = $('#inputsend').width()
+    //var inp_w = $('#inputsend').outerWidth(true);
-    $("#messagewindow").css({'height':win_h-inp_h - 20});
+
-    $("#inputfield").css({'width':win_w-inp_w - 20});
+    $("#messagewindow").css({'height': win_h - inp_h - 1});
+    //$("#inputfield").css({'width': win_w - inp_w - 20});
 }
 
 // Callback function - called when page has finished loading (gets things going)

src/web/templates/prosimii/webclient.html

@@ -1,5 +1,7 @@
-<html>
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
   <head>
+    <meta charset="utf-8" />
 
     <title>Evennia web MUD client</title>
 
@@ -14,22 +16,21 @@
     <script src="/media/javascript/evennia_webclient.js" type="text/javascript" charset="utf-8"></script>
 
   </head>
-  
   <body>
 
     <div id="wrapper">
       <div id="messagewindow">
         <!--javascript kills this when page has finished loading: -->
-        <span id="connecting"> Connecting ...</span> 
+        <div id="connecting"> Connecting ...</div>
         <!--this is supplied by django view - webclient/views.py: -->
-        <span id="noscript"><h3>Javascript Error: The Evennia MUD client requires that you have Javascript activated.</h3>
+        <div id="noscript"><h3>Javascript Error: The Evennia MUD client requires that you have Javascript activated.</h3>
           <p>Turn off eventual script blockers and/or switch to a web
           browser supporting javascript.</p>
-        </span>
+        </div>
       </div>
       <form id="inputform">
-        <span id="playercount">Logged in Players: {{num_players_connected}}</span> <br>
+        <div id="playercount">Logged in Players: {{num_players_connected}}</div>
-        <input type="text" id="inputfield" autocomplete='off'><input id="inputsend" type="button" value="send" onClick="sendMsg()">
+        <div id="inputcontrol"><input type="text" id="inputfield" autocomplete="off"><input id="inputsend" type="button" value="send" onClick="sendMsg()" /></div>
       </form>
     </div>