rearranged statusbar (its now in the same container with the textarea)
added ace-editor and styles
This commit is contained in:
@@ -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
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user