wrap elements + use flex css

11 years ago · 60e7411a1f
parent b16059ce0e
commit 60e7411a1f
2 changed files with 110 additions and 64 deletions
--- a/index.php
+++ b/index.php
@ -126,10 +126,12 @@ if (isset($_POST['code'])) {
        </script>
    </head>
    <body>
-        <div class="output"><?php echo $debugOutput ?></div>
+        <div class="console-wrapper">
+            <div class="input-wrapper">
                <form method="POST" action="">
                    <div class="input">
                        <textarea class="editor" id="editor" name="code"><?php echo (isset($_POST['code']) ? htmlentities($_POST['code'], ENT_QUOTES, 'UTF-8') : "&lt;?php\n\n") ?></textarea>
+                    </div>
                        <div class="statusbar">
                            <span class="position">Line: 1, Column: 1</span>
                            <span class="copy">
@ -156,9 +158,14 @@ if (isset($_POST['code'])) {
                            <a href="" class="reset">Reset</a>
                            <span class="runtime-info"></span>
                        </div>
-            </div>
                    <input type="submit" name="subm" value="Try this!" />
                </form>
+            </div>
+            <div class="output-wrapper">
+                <div class="output"><?php echo $debugOutput ?></div>
+            </div>
+        </div>
+        <div class="footer-wrapper">
            <div class="help">
            debug:
                &lt; foo()
@ -181,5 +188,6 @@ if (isset($_POST['code'])) {
            <div class="footer">
                php-console v<?php echo PHP_CONSOLE_VERSION ?> - by <a href="http://seld.be/">Jordi Boggiano</a> - <a href="http://github.com/Seldaek/php-console">sources on github</a>
            </div>
+        </div>
    </body>
 </html>
--- a/styles.css
+++ b/styles.css
@ -4,14 +4,31 @@ body, textarea, input {

 body {
    background: #eee;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+
+}
+
+.console-wrapper {
+    flex: 1 1 auto;
+    display: flex;
+}
+
+.footer-wrapper {
+    flex: 0 1 auto;
 }

 input {
-    width: 99%;
-    margin: auto;
+    width: 80%;
+    margin: 10px auto;
    display: block;
-    height: 30px;
-    font-size: 20px;
+    font-size: 2em;
 }

 a {
@ -24,20 +41,41 @@ a {
 }

 .output, .input {
-    border: 1px solid #aaa;
    background: #fff;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
+}
+
+.output-wrapper, .input-wrapper {
+    flex: 1 1 50%;
+    position: relative;
 }

 .output {
-    padding: 5px 10px;
-    margin: 10px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: auto;
+    padding: 0 5px;
+}
+
+.input-wrapper {
+    border-right: 4px solid #EEE;
+}
+
+.input-wrapper form {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
 }

 .input {
-    margin: .5% 10px;
+    flex: 1 1 auto;
+    display: flex;
 }

 .statusbar {
@ -64,11 +102,11 @@ a {
 /* ace-editor requires to define styles by id (specificity) */
 .editor#editor {
    width: 100%;
-    height: 400px;
    position: relative;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
+    flex: 1 1 auto;
 }
 #editor .ace_gutter {
    -webkit-border-top-left-radius: 5px;