Annikka/evennia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Further work with css.

Browse source
This commit is contained in:
Griatch 2015-06-19 15:01:23 +02:00
parent f7f0e93214
commit 5ea9d100d9
2 changed files with 75 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

77
evennia/web/webclient/static/webclient/css/evennia.css
View file

@ -2,37 +2,70 @@
html, body { html, body {
height: 100%; height: 100%;
background: darkgreen;
} }
#outputsection { #header {
min-height: 80%; background: yellow;
} padding: 5px;
#header > a {
color: red;
} }
#main { #main {
height: auto; height: 100%;
padding-top: 10px; width:auto;
padding-left: 10px; background: beige;
padding-right: 10px; padding: 5px;
padding-bottom: 1px;
} }
.textoutput { .textoutput {
position:absolute; width: 80%;
top:30px; height: 100%;
bottom: 40px;
left:10px;
right: 10px;
overflow: hidden; overflow: hidden;
background: rgba(201, 201, 201, 0.65); background: lightpink;
float: left;
border: 2px solid black;
margin-right: 2px;
} }
#footer { #sidepanel {
position: relative; height: 100%;
height: 40px; width: 100%;
width: 98%; background: red;
clear: both; }
.lookoutput {
width: 19%;
height: 50%;
overflow: hidden;
background: lightgreen;
border: 2px solid black;
margin-bottom: 2px;
}
.contentoutput {
width: 19%;
height: calc(50% - 6px);
overflow: hidden;
background: lightblue;
border: 2px solid black;
}
/* Input footer */
#footer {
padding: 5px;
height: auto;
clear: both;
background: darkgray;
margin-top: 2px;
}
#input_singleline_field {
width:90%;
visibility: hidden;
}
#input_multiline_field {
width:90%;
} }

86
evennia/web/webclient/static/webclient/js/testclient.html
View file

@ -2,82 +2,38 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Evennia test client</title>
<link rel="stylesheet" href="../css/foundation.css" />
<link rel="stylesheet" href="../css/evennia.css" /> <link rel="stylesheet" href="../css/evennia.css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="modernizr.js"></script>
<script src="evennia.js"></script>
<!--[if !IE 7]>
<style type="text/css">
#outputsection {display:table;height:100%}
</style>
<![endif]-->
</head> </head>
<body> <body>
<div id="outputsection"> <!-- Config menu button -->
<!-- Config menu button --> <div id="header">
<div id="header"> <a href="#configmenu" class="button">Config</a>
<a href="#" data-reveal-id="ConfigMenu">Config</a> </div>
</div> <!-- Config menu itself -->
<div id="main"> <div id="configmenu">
<!--Outputs --> <!-- close button -->
<div class="textoutput">Test textoutput </div> <a href="#" class="close">&times;</a>
</div>
<div id="main">
<!--Outputs -->
<div class="textoutput">Test textoutput </div>
<div id="sidepanel">
<div class="lookoutput">Look textoutput </div>
<div class="contentoutput">Content textoutput </div>
</div> </div>
</div> </div>
<!-- Inputs --> <!-- Inputs -->
<div id="footer"> <div id="footer">
<!-- hide inputs behind tabs --> <form class="input_singleline" action="send">
<ul class="tabs" data-tab> <!-- multi-line input -->
<li class="tab-title active"><a href="#singleinput">Single-line</a></li> <textarea id="input_multiline_field"></textarea>
<li class="tab-title"><a href="#multiinput">Multi-line</a></li> <input id="sendbutton" type="submit" value="Send">
</ul> </form>
<!-- single-line input -->
<div class="tabs-content">
<div class="content active" id=singleinput>
<form class="input_singleline" action="send">
<div class="row">
<div class="small-11 large-11 columns">
<input type="text">
</div>
<div class="small-1 large-1 columns">
<input type="submit" value="Send">
</div>
</div>
</form>
</div>
<!-- multi-line input-->
<div class="content" id=multiinput>
<form class="input_multiline" action="send">
<div class="row">
<div class="large-11 columns">
<textarea></textarea>
</div>
<div class="large-1 columns">
<input type="submit" value="Send">
</div>
</div>
</form>
</div>
</div>
</div> </div>
<!-- Config area popup -->
<div id="ConfigMenu" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class="switch">
<input type="checkbox" id="exampleCheckboxSwitch" class="config echo" checked>echo</input>
<label for="exampleCheckboxSwitch"></label>
</div>
</div>
<script src="foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body> </body>
</html> </html>