Fullscreen for console

html/console.html

@@ -39,7 +39,10 @@ <h1>Microcontroller Console</h1>
         <div class="pure-u-1-4"><legend><b>Console</b></legend></div>
         <div class="pure-u-3-4"></div>
       </div>
-      <pre class="console flex-fill" id="console">--- No Content ---</pre>
+      <div class="fullscreen-box">
+        <div class="fullscreen-control"></div>
+        <pre class="console flex-fill" id="console">--- No Content ---</pre>
+      </div>
       <div>
         <div class="pure-g">
           <div class="pure-u-1-4"><legend><b>Console entry</b></legend></div>
@@ -96,6 +99,12 @@ <h1>Microcontroller Console</h1>
           function(s, st) { showWarning("Error clearing buffer in uC"); }
         );
     });
+
+    $(".fullscreen-control")[0].addEventListener("click", function(e) {
+      e.preventDefault();
+      var fbc = this.parentNode.classList;
+      fbc[fbc.contains("full") ? "remove" : "add"].call(fbc, "full");
+    });
 
     ajaxJson('GET', "/console/baud",
       function(data) { $("#baud-sel").value = data.rate; },

html/style.css

@@ -248,14 +248,58 @@ input.inline {
   margin-left: 0.5em;
 }
 
+/* Console fullscreen */
+.fullscreen-box {
+  position: relative;
+}
+
+.fullscreen-box.full {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  left: 0;
+  top: 0;
+  z-index: 1001;
+}
+
+.fullscreen-box > .fullscreen-control {
+  position: absolute;
+  border-radius: 2px;
+  top: 16px;
+  right: 16px;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  background: #00000025;
+  padding: 15px;
+  line-height: 1em;
+  color: #fff;
+  cursor: pointer;
+}
+
+.fullscreen-box > .fullscreen-control::before {
+  content: "F";
+}
+
+.fullscreen-box.full > .fullscreen-control::before {
+  content: "X";
+}
+
+.fullscreen-box > pre.console {
+  height: 500px;
+}
+
+.fullscreen-box.full > pre.console {
+  height: 100vh;
+}
+
 /* Text console */
 pre.console {
   background-color: #663300;
   border-radius: 5px;
   border: 0px solid #000000;
   color: #66ff66;
   padding: 5px;
-  overflow: scroll;
   margin: 0px;
 }