From ecbd36c5a8b7afa23ffc701d56febca3e1e97dc3 Mon Sep 17 00:00:00 2001 From: Griatch Date: Sun, 6 Feb 2011 17:06:29 +0000 Subject: [PATCH] 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 | 182 ++++++++++-------- src/web/media/javascript/evennia_webclient.js | 90 ++++----- src/web/templates/prosimii/webclient.html | 37 ++-- 3 files changed, 164 insertions(+), 145 deletions(-) diff --git a/src/web/media/css/webclient.css b/src/web/media/css/webclient.css index 94aeeda2fe..381dab5fe5 100644 --- a/src/web/media/css/webclient.css +++ b/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? -*/ + Style sheet for Evennia's web client. -/*Overall element look */ -body{ - background:#000; - color:#fff; - font-size:.9em; -} -a:link{ - color:#fff; -} -a:visited{ - color:#ccc; -} + 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: #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{ - margin-left:10px; - color: #555; -} \ No newline at end of file +#playercount { margin-left: .8em } + +/* Testing */ +/*#inputform { + outline: 1px dotted blue } + +#messagewindow { + outline: 1px dotted red } + +#wrapper { + outline: 1px dotted green }*/ diff --git a/src/web/media/javascript/evennia_webclient.js b/src/web/media/javascript/evennia_webclient.js index 3a65e07743..e0b3a84bb5 100644 --- a/src/web/media/javascript/evennia_webclient.js +++ b/src/web/media/javascript/evennia_webclient.js @@ -12,13 +12,13 @@ This implements an ajax mud client for use with Evennia, using jQuery for simplicity. It communicates with the Twisted server on the address /webclientdata through POST requests. Each request must at least contain the 'mode' of the request to be handled by the protocol: - mode 'receive' - tell the server that we are ready to receive data. This is a + mode 'receive' - tell the server that we are ready to receive data. This is a long-polling (comet-style) request since the server will not reply until it actually has data available. The returned data object has two variables 'msg' and 'data' - where msg should be output and 'data' is an arbitrary piece + where msg should be output and 'data' is an arbitrary piece of data the server and client understands (not used in default - client). + client). mode 'input' - the user has input data on some form. The POST request should also contain variables 'msg' and 'data' where the 'msg' is a string and 'data' is an arbitrary piece @@ -26,10 +26,10 @@ contain the 'mode' of the request to be handled by the protocol: deal with (not used in this example client). mode 'init' - starts the connection. All setup the server is requered to do should happen at this point. The server returns a data object - with the 'msg' property containing the server address. + with the 'msg' property containing the server address. mode 'close' - closes the connection. The server closes the session and does - cleanup at this point. + cleanup at this point. */ // jQuery must be imported by the calling html page before this script @@ -41,9 +41,9 @@ contain the 'mode' of the request to be handled by the protocol: var CLIENT_HASH = '0'; // variable holding the client id function webclient_receive(){ - // This starts an asynchronous long-polling request. It will either timeout + // This starts an asynchronous long-polling request. It will either timeout // or receive data from the 'receivedata' url. In both cases a new request will - // immediately be started. + // immediately be started. $.ajax({ type: "POST", @@ -54,41 +54,41 @@ function webclient_receive(){ dataType:"json", data: {mode:'receive', 'suid':CLIENT_HASH}, - // callback methods + // callback methods - success: function(data){ // called when request to waitreceive completes + success: function(data){ // called when request to waitreceive completes msg_display("out", data.msg); // Add response to the message area webclient_receive(); // immediately start a new request }, - error: function(XMLHttpRequest, textStatus, errorThrown){ + error: function(XMLHttpRequest, textStatus, errorThrown){ webclient_receive(); // A possible timeout. Resend request immediately }, }); }; function webclient_input(){ - // Send an input from the player to the server + // Send an input from the player to the server var outmsg = $("#inputfield").val(); // get data from form $.ajax({ type: "POST", url: "/webclientdata", - async: true, + async: true, cache: false, timeout: 30000, data: {mode:'input', msg:outmsg, data:'NoData', 'suid':CLIENT_HASH}, - + //callback methods - success: function(data){ + success: function(data){ //if (outmsg.length > 0 ) msg_display("inp", outmsg) // echo input on command line history_add(outmsg); HISTORY_POS = 0; $('#inputform')[0].reset(); // clear input field - }, + }, error: function(XMLHttpRequest, textStatus, errorThrown){ - msg_display("err", "Error: Server returned an error or timed out. Try resending or reloading the page."); + msg_display("err", "Error: Server returned an error or timed out. Try resending or reloading the page."); }, }) } @@ -99,22 +99,23 @@ function webclient_init(){ $.ajax({ type: "POST", url: "/webclientdata", - async: true, + async: true, cache: false, timeout: 50000, dataType:"json", data: {mode:'init', 'suid':CLIENT_HASH}, - + // callback methods success: function(data){ // called when request to initdata completes $("#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 - $("#playercount").fadeOut('slow'); - }, 10000); - + // A small timeout to stop 'loading' indicator in Chrome + setTimeout(function () { + $("#playercount").fadeOut('slow', webclient_set_sizes); + }, 10000); + // Report success msg_display('sys',"Connected to " + data.msg + "."); @@ -123,13 +124,13 @@ function webclient_init(){ }, error: function(XMLHttpRequest, textStatus, errorThrown){ msg_display("err", "Connection error ..." + " (" + errorThrown + ")"); - setTimeout('webclient_receive()', 15000); // try again after 15 seconds + setTimeout('webclient_receive()', 15000); // try again after 15 seconds }, }); } function webclient_close(){ - // Kill the connection and do house cleaning on the server. + // Kill the connection and do house cleaning on the server. $.ajax({ type: "POST", url: "/webclientdata", @@ -150,11 +151,11 @@ function webclient_close(){ }); } -// Display messages +// Display messages function msg_display(type, msg){ // Add a div to the message window. - // type givews the class of div to use. + // type givews the class of div to use. $("#messagewindow").append( "
"+ msg +"
"); // scroll message window to bottom @@ -174,15 +175,15 @@ function history_step_back() { return HISTORY[HISTORY.length-1 - HISTORY_POS]; } function history_step_fwd() { - // step forward in history stack + // step forward in history stack HISTORY_POS = Math.max(--HISTORY_POS, 0); return HISTORY[HISTORY.length-1 - HISTORY_POS]; } function history_add(input) { // add an entry to history if (input != HISTORY[HISTORY.length-1]) { - if (HISTORY.length >= HISTORY_MAX_LENGTH) { - HISTORY.shift(); // kill oldest history entry + if (HISTORY.length >= HISTORY_MAX_LENGTH) { + HISTORY.shift(); // kill oldest history entry } HISTORY[HISTORY.length-1] = input; HISTORY[HISTORY.length] = ''; @@ -196,12 +197,12 @@ $(document).keypress( function(event) { // always focus input field $("#inputfield")[0].focus(); - if (code == 13) { // Enter key - webclient_input(); + if (code == 13) { // Enter key + webclient_input(); event.preventDefault(); - return false; + return false; } - else { + else { if (code == 38) { // arrow up $("#inputfield").val(function(index, value){ return history_step_back(); @@ -212,7 +213,7 @@ $(document).keypress( function(event) { return history_step_fwd(); }); } - } + } }); // handler to avoid double-clicks until the ajax request finishes @@ -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 inp_h = $('#inputform').height(); - var inp_w = $('#inputsend').width() - $("#messagewindow").css({'height':win_h-inp_h - 20}); - $("#inputfield").css({'width':win_w-inp_w - 20}); + //var win_w = $('#wrapper').width(); + var inp_h = $('#inputform').outerHeight(true); + //var inp_w = $('#inputsend').outerWidth(true); + + $("#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) @@ -234,10 +236,10 @@ $(document).ready(function(){ $('#noscript').remove(); // set sizes of elements and reposition them webclient_set_sizes(); - // a small timeout to stop 'loading' indicator in Chrome - setTimeout(function () { - webclient_init(); - }, 500); + // a small timeout to stop 'loading' indicator in Chrome + setTimeout(function () { + webclient_init(); + }, 500); }); // Callback function - called when the browser window resizes @@ -248,4 +250,4 @@ $(window).resize(function() { // Callback function - called when page is closed or moved away from. $(window).unload(function() { webclient_close(); -}); \ No newline at end of file +}); diff --git a/src/web/templates/prosimii/webclient.html b/src/web/templates/prosimii/webclient.html index 14afc8e294..f3e095a859 100644 --- a/src/web/templates/prosimii/webclient.html +++ b/src/web/templates/prosimii/webclient.html @@ -1,37 +1,38 @@ - + + - + + Evennia web MUD client - - + + - - + + - - + + - - +
- Connecting ... +
Connecting ...
-

Javascript Error: The Evennia MUD client requires that you have Javascript activated.

+

Javascript Error: The Evennia MUD client requires that you have Javascript activated.

Turn off eventual script blockers and/or switch to a web browser supporting javascript.

- -
-
- Logged in Players: {{num_players_connected}}
- +
+
+ +
Logged in Players: {{num_players_connected}}
+
- +