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

Merge pull request #35 from ManUtopiK/vertical-panel

Browse Source 
wrap elements + use flex css
master
Jordi Boggiano 11 years ago
parent b16059ce0e 60e7411a1f
commit 8a49326b7b
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>
</head>
<body>
<div class="output"><?php echo $debugOutput ?></div>
<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 class="statusbar">
<span class="position">Line: 1, Column: 1</span>
<span class="copy">
Copy selection: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="110" height="14" id="clippy">
<param name="movie" value="clippy/clippy.swf"/>
<param name="allowScriptAccess" value="always" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param NAME="FlashVars" value="text=">
<param name="bgcolor" value="#E8E8E8">
<embed src="clippy/clippy.swf"
width="110"
height="14"
name="clippy"
quality="high"
allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
FlashVars="text="
bgcolor="#E8E8E8"
/>
</object>
</span>
<a href="" class="reset">Reset</a>
<span class="runtime-info"></span>
</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">
Copy selection: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="110" height="14" id="clippy">
<param name="movie" value="clippy/clippy.swf"/>
<param name="allowScriptAccess" value="always" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param NAME="FlashVars" value="text=">
<param name="bgcolor" value="#E8E8E8">
<embed src="clippy/clippy.swf"
width="110"
height="14"
name="clippy"
quality="high"
allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
FlashVars="text="
bgcolor="#E8E8E8"
/>
</object>
</span>
<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>
<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 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 class="footer-wrapper">
<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>
</body>
</html>

62
styles.css
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save