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

wrap elements + use flex css

Browse Source
master
ManUtopiK 10 years ago
parent b16059ce0e
commit 60e7411a1f
2 changed files with 110 additions and 64 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 112
      index.php
  2. 62
      styles.css

112
index.php
Unescape 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 class="help">
commands:
krumo::backtrace();
krumo::includes();
krumo::functions();
krumo::classes();
krumo::defines();
</div>
<div class="help">
misc:
press ctrl-enter to submit
put '#\n' on the first line to enforce
\n line breaks (\r\n etc work too)
</div> </div>
<div class="footer"> <div class="footer-wrapper">
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 class="help">
debug:
&lt; foo()
krumo(foo());
</div>
<div class="help">
commands:
krumo::backtrace();
krumo::includes();
krumo::functions();
krumo::classes();
krumo::defines();
</div>
<div class="help">
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>

62
styles.css
Unescape 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;

Write Preview
Loading…
Cancel
Save