From 60e7411a1f8ba03323fd5303f8c3b2c2ece148a5 Mon Sep 17 00:00:00 2001 From: ManUtopiK Date: Tue, 3 Jun 2014 12:08:45 +0200 Subject: [PATCH] wrap elements + use flex css --- index.php | 112 ++++++++++++++++++++++++++++------------------------- styles.css | 62 +++++++++++++++++++++++------ 2 files changed, 110 insertions(+), 64 deletions(-) diff --git a/index.php b/index.php index b67b53f..46c789d 100644 --- a/index.php +++ b/index.php @@ -126,60 +126,68 @@ if (isset($_POST['code'])) { -
-
-
- -
- Line: 1, Column: 1 - - Copy selection: - - - - - - - - - - Reset - -
+
+
+ +
+ +
+
+ Line: 1, Column: 1 + + Copy selection: + + + + + + + + + + Reset + +
+ + +
+
+
- - -
- debug: - < foo() - krumo(foo()); -
-
- commands: - krumo::backtrace(); - krumo::includes(); - krumo::functions(); - krumo::classes(); - krumo::defines(); -
-
- misc: - press ctrl-enter to submit - put '#\n' on the first line to enforce - \n line breaks (\r\n etc work too)
-
- php-console v - by Jordi Boggiano - sources on github +
+
+ debug: + < foo() + krumo(foo()); +
+
+ commands: + krumo::backtrace(); + krumo::includes(); + krumo::functions(); + krumo::classes(); + krumo::defines(); +
+
+ misc: + press ctrl-enter to submit + put '#\n' on the first line to enforce + \n line breaks (\r\n etc work too) +
+
+ php-console v - by Jordi Boggiano - sources on github +
diff --git a/styles.css b/styles.css index 6381955..632d64a 100644 --- 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;