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

added ace-editor and styles
13 years ago · 022ff3313e
parent 60f016d0c1
commit 022ff3313e
2 changed files with 24 additions and 25 deletions
--- a/index.php
+++ b/index.php
@ -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">
--- a/styles.css
+++ b/styles.css
@ -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;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
 }

 .output {
    padding: 5px 10px;
    margin: 10px .4%;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
 }

-.output img.loader {
-    margin-bottom: -4px;
+.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 {