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

wrap elements + use flex css

Browse Source
This commit is contained in:
ManUtopiK
2014-06-03 12:08:45 +02:00
parent b16059ce0e
commit 60e7411a1f
2 changed files with 110 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+60 -52
View File
@@ -126,60 +126,68 @@ if (isset($_POST['code'])) {
</script> </script>
</head> </head>
<body> <body>
<div class="output"><?php echo $debugOutput ?></div> <div class="console-wrapper">
<form method="POST" action=""> <div class="input-wrapper">
<div class="input"> <form method="POST" action="">
<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 class="input">
<div class="statusbar"> <textarea class="editor" id="editor" name="code"><?php echo (isset($_POST['code']) ? htmlentities($_POST['code'], ENT_QUOTES, 'UTF-8') : "&lt;?php\n\n") ?></textarea>
<span class="position">Line: 1, Column: 1</span> </div>
<span class="copy"> <div class="statusbar">
Copy selection: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="110" height="14" id="clippy"> <span class="position">Line: 1, Column: 1</span>
<param name="movie" value="clippy/clippy.swf"/> <span class="copy">
<param name="allowScriptAccess" value="always" /> Copy selection: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="110" height="14" id="clippy">
<param name="quality" value="high" /> <param name="movie" value="clippy/clippy.swf"/>
<param name="scale" value="noscale" /> <param name="allowScriptAccess" value="always" />
<param NAME="FlashVars" value="text="> <param name="quality" value="high" />
<param name="bgcolor" value="#E8E8E8"> <param name="scale" value="noscale" />
<embed src="clippy/clippy.swf" <param NAME="FlashVars" value="text=">
width="110" <param name="bgcolor" value="#E8E8E8">
height="14" <embed src="clippy/clippy.swf"
name="clippy" width="110"
quality="high" height="14"
allowScriptAccess="always" name="clippy"
type="application/x-shockwave-flash" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"
FlashVars="text=" type="application/x-shockwave-flash"
bgcolor="#E8E8E8" pluginspage="http://www.macromedia.com/go/getflashplayer"
/> FlashVars="text="
</object> bgcolor="#E8E8E8"
</span> />
<a href="" class="reset">Reset</a> </object>
<span class="runtime-info"></span> </span>
</div> <a href="" class="reset">Reset</a>
<span class="runtime-info"></span>
</div>
<input type="submit" name="subm" value="Try this!" />
</form>
</div>
<div class="output-wrapper">
<div class="output"><?php echo $debugOutput ?></div>
</div> </div>
<input type="submit" name="subm" value="Try this!" />
</form>
<div class="help">
debug:
&lt; foo()
krumo(foo());
</div> </div>
<div class="help"> <div class="footer-wrapper">
commands: <div class="help">
krumo::backtrace(); debug:
krumo::includes(); &lt; foo()
krumo::functions(); krumo(foo());
krumo::classes(); </div>
krumo::defines(); <div class="help">
</div> commands:
<div class="help"> krumo::backtrace();
misc: krumo::includes();
press ctrl-enter to submit krumo::functions();
put '#\n' on the first line to enforce krumo::classes();
\n line breaks (\r\n etc work too) krumo::defines();
</div> </div>
<div class="footer"> <div class="help">
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> misc:
press ctrl-enter to submit
put '#\n' on the first line to enforce
\n line breaks (\r\n etc work too)
</div>
<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> </div>
</body> </body>
</html> </html>
styles.css
+50 -12
View File
@@ -4,14 +4,31 @@ body, textarea, input {
body { body {
background: #eee; 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 { input {
width: 99%; width: 80%;
margin: auto; margin: 10px auto;
display: block; display: block;
height: 30px; font-size: 2em;
font-size: 20px;
} }
a { a {
@@ -24,20 +41,41 @@ a {
} }
.output, .input { .output, .input {
border: 1px solid #aaa;
background: #fff; background: #fff;
-moz-border-radius: 5px; }
-webkit-border-radius: 5px;
border-radius: 5px; .output-wrapper, .input-wrapper {
flex: 1 1 50%;
position: relative;
} }
.output { .output {
padding: 5px 10px; position: absolute;
margin: 10px; 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 { .input {
margin: .5% 10px; flex: 1 1 auto;
display: flex;
} }
.statusbar { .statusbar {
@@ -64,11 +102,11 @@ a {
/* ace-editor requires to define styles by id (specificity) */ /* ace-editor requires to define styles by id (specificity) */
.editor#editor { .editor#editor {
width: 100%; width: 100%;
height: 400px;
position: relative; position: relative;
-webkit-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px; -moz-border-radius-topright: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
flex: 1 1 auto;
} }
#editor .ace_gutter { #editor .ace_gutter {
-webkit-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px;