add scrolling log panel and clean padding

localjo · localjo · commit b1349f95d174 · 2014-07-08T14:26:01.000-04:00
diff --git a/views/devpanel.css b/views/devpanel.css
@@ -0,0 +1,35 @@
+body, html {
+  height: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.log-panel {
+  height: 100%;
+  overflow: scroll;
+}
+
+.sidetab-column {
+  height: 100%;
+  padding: 0;
+  position: static;
+}
+
+.panel-column {
+  height: 100%;
+  position: static;
+  padding: 0;
+  width: 70%;
+  padding: 10px;
+}
+
+.tab-content, .tab-pane {
+  height: 100%;
+}
+
+.inspector-json {
+  padding: 0;
+}
diff --git a/views/devpanel.html b/views/devpanel.html
@@ -10,25 +10,26 @@
   <link href="../bower_components/Inspector-JSON/inspector-json.css" media="all" rel="stylesheet" type="text/css">
   <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css">
   <link href="../bower_components/bootstrap-vertical-tabs/bootstrap.vertical-tabs.min.css" media="all" rel="stylesheet" type="text/css">
+  <link href="devpanel.css" media="all" rel="stylesheet" type="text/css">
 </head>
 <body>
-  <div class="col-xs-3">
+  <div class="sidetab-column col-xs-3">
     <ul class="nav nav-tabs tabs-left">
       <li><a href="#context" data-toggle="tab">Context</a></li>
       <li><a href="#logs" data-toggle="tab">Logs</a></li>
       <li><a href="#info" data-toggle="tab">Info</a></li>
     </ul>
   </div>
-  <div class="col-xs-9">
+  <div class="panel-column col-xs-9">
     <div class="tab-content">
       <div class="tab-pane active" id="context">
         <div id="pagecontext"></div>
       </div>
       <div class="tab-pane" id="logs">
-        <pre id="serverlogs"></pre>
+        <pre id="serverlogs" class="log-panel"></pre>
       </div>
       <div class="tab-pane" id="info">
-        <div id="messageholder"></div>
+        <div id="messageholder" class="alert alert-info" role="alert"></div>
       </div>
     </div>
   </div>
diff --git a/views/devpanel.js b/views/devpanel.js
@@ -42,7 +42,9 @@ function displayMessage(msg) {
 var socket = io('http://localhost:8081');
 socket.on('connect', function(){
   socket.on('log', function(data){
-    document.querySelector('#serverlogs').innerHTML += data.message + '\n';
+    var logContainer = document.querySelector('#serverlogs');
+    logContainer.innerHTML += data.message + '\n';
+    logContainer.scrollTop = logContainer.scrollHeight;
     });
   socket.on('disconnect', function(){
     document.querySelector('#serverlogs').innerHTML = 'Socket Disconnected';
