styles: Log display

octoprint_klipper/static/css/klipper.css

@@ -5,8 +5,12 @@
 }
 
 .plugin_klipper_log {
+   padding: 0.5em;
    overflow-y: scroll;
-   height: 100%;
+   height: 400px;
+   background-color: #efefef;
+   border: 1px #eee;
+   border-radius: 3px;
 }
 
 .plugin_klipper_log .log-item {

octoprint_klipper/static/js/klipper.js

@@ -13,19 +13,17 @@ $(function() {
         self.logMessages = ko.observableArray();
 
         self.onGetStatus = function() {
-           self.shortStatus("Update Status")
+           self.shortStatus("Updating Status ...")
            OctoPrint.control.sendGcode("Status")
         }
         
         self.onRestartFirmware = function() {
-           self.logMessage("Restarted Firmware");
-           self.shortStatus("Restarting Firmware");
+           self.shortStatus("Restarting Firmware ...");
            OctoPrint.control.sendGcode("FIRMWARE_RESTART")
         };
         
         self.onRestartHost = function() {
-           self.logMessage("Restarted Host");
-           self.shortStatus("Restarting Host");
+           self.shortStatus("Restarting Host ...");
            OctoPrint.control.sendGcode("RESTART")
         };
         

octoprint_klipper/templates/klipper_tab.jinja2

@@ -1,6 +1,6 @@
 <div class="row-fluid">
   <div class="span8">
-    <hr>
+    <label>Log</label>
     <div class="plugin_klipper_log" data-bind="foreach: logMessages">
       <div class="log-item"><i data-bind="text: time"></i> <span data-bind="text: msg, css: type"></span></div>
     </div>