MightyPork/php-sandbox
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+5 -2
View File
@@ -85,8 +85,11 @@ if (isset($_POST['code'])) {
<body> <body>
<div class="output"><?php echo $debugOutput ?></div> <div class="output"><?php echo $debugOutput ?></div>
<form method="POST" action=""> <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!" /> <input type="submit" name="subm" value="Try this!" />
</form> </form>
<div class="help"> <div class="help">
styles.css
+21 -25
View File
@@ -18,41 +18,37 @@ a {
color: #88f; color: #88f;
} }
.output, textarea { .output, .input {
border: 1px solid #aaa; border: 1px solid #aaa;
background: #fff; 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; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
} }
.output img.loader { .output {
margin-bottom: -4px; padding: 5px 10px;
margin: 10px .4%;
}
.input {
margin: .5% 10px;
padding: 2px 5px;
} }
.statusbar { .statusbar {
margin: 0 .5% 10px; margin-top: 3px;
padding: 2px 5px; }
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px; /* ace-editor requires to define styles by id (specificity) */
border-radius: 0 0 5px 5px; .editor#editor {
border: 1px solid #aaa; width: 100%;
border-top: 0; height: 400px;
position: relative;
}
.output img.loader {
margin-bottom: -4px;
} }
.help { .help {