Display debug panel at fixed position and scroll internally

This commit is contained in:
Kijin Sung 2016-02-15 14:40:01 +09:00
parent 283a1a73bc
commit 115738a84b
2 changed files with 7 additions and 7 deletions

View file

@ -317,11 +317,13 @@ button.btn {
}
#rhymix_debug_panel {
display: none;
position: absolute;
position: fixed;
left: 0; top: 0;
max-width: 96%;
min-height: 100%;
max-width: 100%;
height: 100%;
overflow-y: scroll;
background: #fcfcfc;
box-sizing: border-box;
border-right: 1px solid #ccc;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.18), 0 0 8px 0 rgba(0, 0, 0, 0.12);
z-index: 1073741824;

View file

@ -15,9 +15,7 @@ $(function() {
// Initialize the debug button.
$('<a href="#"></a>').text("DEBUG").appendTo(button).click(function(event) {
event.preventDefault();
panel.css({ width: 0 }).show().animate({ width: 640 }, 200, function() {
$(window).scrollTop(0);
});
panel.css({ width: 0 }).show().animate({ width: 540 }, 200);
button.hide();
});
@ -25,7 +23,7 @@ $(function() {
var header = $('<div class="debug_header"></div>').appendTo(panel);
header.append('<h2>RHYMIX DEBUG</h2>');
header.append($('<a class="debug_maximize" href="#">+</a>').click(function(event) {
panel.animate({ width: "95%" }, 300);
panel.animate({ width: "100%" }, 300);
}));
header.append($('<a class="debug_close" href="#">&times;</a>').click(function(event) {
event.preventDefault();