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