Fixes webclient spacing issues in lists. Patches created by user "61924.00". Still issues with some line breaks, as per issue 121.
This commit is contained in:
Griatch
parent
2c66f039fd
commit
ecbd36c5a8
3 changed files with 164 additions and 145 deletions
|
|
@ -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;
|
||||
}
|
||||
#playercount { margin-left: .8em }
|
||||
|
||||
/* Testing */
|
||||
/*#inputform {
|
||||
outline: 1px dotted blue }
|
||||
|
||||
#messagewindow {
|
||||
outline: 1px dotted red }
|
||||
|
||||
#wrapper {
|
||||
outline: 1px dotted green }*/
|
||||
|
|
|
|||
|
|
@ -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
|
||||
$("#playercount").fadeOut('slow');
|
||||
// A small timeout to stop 'loading' indicator in Chrome
|
||||
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 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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<input type="text" id="inputfield" autocomplete='off'><input id="inputsend" type="button" value="send" onClick="sendMsg()">
|
||||
<div id="playercount">Logged in Players: {{num_players_connected}}</div>
|
||||
<div id="inputcontrol"><input type="text" id="inputfield" autocomplete="off"><input id="inputsend" type="button" value="send" onClick="sendMsg()" /></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue