rearranged statusbar (its now in the same container with the textarea)

added ace-editor and styles
This commit is contained in:
tom tomsen
2011-12-14 15:25:02 +01:00
parent 60f016d0c1
commit 022ff3313e
2 changed files with 26 additions and 27 deletions
+5 -2
View File
@@ -85,8 +85,11 @@ if (isset($_POST['code'])) {
<body>
<div class="output"><?php echo $debugOutput ?></div>
<form method="POST" action="">
<textarea cols="100" rows="20" name="code"><?php echo (isset($_POST['code']) ? htmlentities($_POST['code'], ENT_QUOTES, 'UTF-8') : null) ?></textarea>
<div class="statusbar">Line: 1, Column: 1</div>
<div class="input">
<div class="editor" id="editor"><?php echo (isset($_POST['code']) ? htmlentities($_POST['code'], ENT_QUOTES, 'UTF-8') : null) ?></div>
<div class="statusbar">Line: 1, Column: 1</div>
</div>
<input type="submit" name="subm" value="Try this!" />
</form>
<div class="help">
+21 -25
View File
@@ -18,41 +18,37 @@ a {
color: #88f;
}
.output, textarea {
.output, .input {
border: 1px solid #aaa;
background: #fff;
}
textarea {
width: 99%;
height: 400px;
margin: auto;
display: block;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.output {
padding: 5px 10px;
margin: 10px .4%;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.output img.loader {
margin-bottom: -4px;
.output {
padding: 5px 10px;
margin: 10px .4%;
}
.input {
margin: .5% 10px;
padding: 2px 5px;
}
.statusbar {
margin: 0 .5% 10px;
padding: 2px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
border: 1px solid #aaa;
border-top: 0;
margin-top: 3px;
}
/* ace-editor requires to define styles by id (specificity) */
.editor#editor {
width: 100%;
height: 400px;
position: relative;
}
.output img.loader {
margin-bottom: -4px;
}
.help {