Andreas/evennia
1
0
Fork 0
mirror of https://github.com/evennia/evennia.git synced 2026-03-26 17:56:32 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

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

@ -2,37 +2,70 @@
html, body {
height: 100%;
background: darkgreen;
}
#outputsection {
min-height: 80%;
}
#header > a {
color: red;
#header {
background: yellow;
padding: 5px;
}
#main {
height: auto;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 1px;
height: 100%;
width:auto;
background: beige;
padding: 5px;
}
.textoutput {
position:absolute;
top:30px;
bottom: 40px;
left:10px;
right: 10px;
width: 80%;
height: 100%;
overflow: hidden;
background: rgba(201, 201, 201, 0.65);
background: lightpink;
float: left;
border: 2px solid black;
margin-right: 2px;
}
#footer {
position: relative;
height: 40px;
width: 98%;
#sidepanel {
height: 100%;
width: 100%;
background: red;
}
.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">
<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" />
<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>
<body>
<div id="outputsection">
<!-- Config menu button -->
<div id="header">
<a href="#" data-reveal-id="ConfigMenu">Config</a>
</div>
<div id="main">
<!--Outputs -->
<div class="textoutput">Test textoutput </div>
<!-- Config menu button -->
<div id="header">
<a href="#configmenu" class="button">Config</a>
</div>
<!-- Config menu itself -->
<div id="configmenu">
<!-- close button -->
<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>
<!-- Inputs -->
<div id="footer">
<!-- hide inputs behind tabs -->
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#singleinput">Single-line</a></li>
<li class="tab-title"><a href="#multiinput">Multi-line</a></li>
</ul>
<!-- 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>
<form class="input_singleline" action="send">
<!-- multi-line input -->
<textarea id="input_multiline_field"></textarea>
<input id="sendbutton" type="submit" value="Send">
</form>
</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>
</html>