fix styling of console and make it 100% height

html/console.html

@@ -1,33 +1,67 @@
-  <div id="main">
+  <div id="main" class="flex-fill flex-vbox">
     <div class="header">
       <h1>Microcontroller Console</h1>
     </div>
 
-    <div class="content">
-      <p>The Microcontroller console shows the last 1024 characters
-         received from UART0, to which a microcontroller is typically attached.
-         The UART is configured for 8 bits, no parity, 1 stop bit (8N1).</p>
+    <div class="content flex-fill flex-vbox">
       <p>
         <a id="reset-button" class="pure-button button-primary" href="#">Reset µC</a>
-        &nbsp;Baud:
-        <span id="baud-btns"></span>
+        &nbsp;&nbsp;Baud:
+        <select id="baud-sel" class="pure-button" href="#">
+          <option value="460800">460800</option>
+          <option value="250000">250000</option>
+          <option value="230400">230400</option>
+          <option value="115200">115200</option>
+          <option value="57600">57600</option>
+          <option value="38400">38400</option>
+          <option value="19200">19200</option>
+          <option value="9600">9600</option>
+        </select>
+        &nbsp;&nbsp;Pgm baud:
+        <select id="baud-pgm" class="pure-button">
+          <option value="same">same</option>
+          <option value="460800">460800</option>
+          <option value="250000">250000</option>
+          <option value="230400">230400</option>
+          <option value="115200">115200</option>
+          <option value="57600">57600</option>
+          <option value="38400">38400</option>
+          <option value="19200">19200</option>
+          <option value="9600">9600</option>
+        </select>
+        &nbsp;&nbsp;Fmt: 8N1
       </p>
-      <pre class="console" id="console"></pre>
-      <legend>Console entry</legend>
-      <input type="text" id="input-text" value="">
-      <label>History buffer</label>
-      <select id="send-history" size="5" style="width:100%"></select>
-      <p>Type the command and press <b>ENTER</b>.
-         Press <b>ESC</b> to clear the entry.
-         The <b>UP</b>/<b>DOWN</b> arrow keys can be used to get previously sent commands from history.
       <div class="pure-g">
-        <div class="form-horizontal pure-u-1-2">
-          <input type="checkbox" id="input-add-cr" checked>
-          <label>Append CR (\r)</label>
+        <div class="pure-u-1-4"><legend><b>Console</b></legend></div>
+        <div class="pure-u-3-4"></div>
       </div>
-        <div class="form-horizontal pure-u-1-2">
-          <input type="checkbox" id="input-add-lf" checked>
-          <label>Append LF (\n)</label>
+      <pre class="console flex-fill" id="console">--- No Content ---</pre>
+      <div>
+        <div class="pure-g">
+          <div class="pure-u-1-4"><legend><b>Console entry</b></legend></div>
+          <div class="pure-u-2-4">
+            <legend>(ENTER to submit, ESC to clear)</legend>
+          </div>
+          <div class="pure-u-1-4">
+            <legend>Add:
+              <input type="checkbox" id="input-add-cr" checked class="inline"><label>CR(\r)</label>
+              <input type="checkbox" id="input-add-lf" checked class="inline"><label>LF(\n)</label>
+            </legend>
+          </div>
+        </div>
+        <div class="pure-g">
+          <div class="pure-u-1-1">
+            <span style="float:right; width:10px;"></span>
+            <input type="text" class="console-in" id="input-text" value="">
+          </div>
+        </div>
+        <div class="pure-g">
+          <div class="pure-u-1-4"><legend><b>History buffer</b></legend></div>
+          <div class="pure-u-2-4"><legend>(UP/DOWN arrows to select)</legend></div>
+          <div class="pure-u-1-4"></div>
+        </div>
+        <div class="pure-g">
+          <div class="pure-u-1-1"><select class="console-in" id="send-history" size="5"></select></div>
         </div>
       </div>
     </div>
@@ -37,8 +71,6 @@
 <script type="text/javascript">console_url = "/console/text"</script>
 <script src="console.js"></script>
 <script type="text/javascript">
-  var rates = [9600, 57600, 115200, 250000];
-
   onLoad(function() {
     fetchText(100, true);
 
@@ -52,14 +84,26 @@
       );
     });
 
-    rates.forEach(function(r) { baudButton(r); });
-
     ajaxJson('GET', "/console/baud",
-      function(data) { showRate(data.rate); },
+      function(data) { $("#baud-sel").value = data.rate; },
       function(s, st) { showNotification(st); }
     );
 
+    bnd($("#baud-sel"), "change", function(ev) {
+      ev.preventDefault();
+      var baud = $("#baud-sel").value;
+      ajaxSpin('POST', "/console/baud?rate="+baud,
+        function(resp) { showNotification("" + baud + " baud set"); },
+        function(s, st) { showWarning("Error setting baud rate: " + st); }
+      );
+    });
+
     consoleSendInit();
+
+    addClass($('html')[0], "height100");
+    addClass($('body')[0], "height100");
+    addClass($('#layout'), "height100");
+    addClass($('#layout'), "flex-vbox");
   });
 </script>
 </body></html>

html/console.js

@@ -1,3 +1,5 @@
+//===== Fetching console text
+
 function fetchText(delay, repeat) {
   var el = $("#console");
   if (el.textEnd == undefined) {
@@ -34,30 +36,7 @@ function retryLoad(repeat) {
   fetchText(1000, repeat);
 }
 
-//===== Console page
-
-function showRate(rate) {
-  rates.forEach(function(r) {
-    var el = $("#"+r+"-button");
-    el.className = el.className.replace(" button-selected", "");
-  });
-
-  var el = $("#"+rate+"-button");
-  if (el != null) el.className += " button-selected";
-}
-
-function baudButton(baud) {
-  $("#baud-btns").appendChild(m(
-    ' <a id="'+baud+'-button" href="#" class="pure-button">'+baud+'</a>'));
-
-  $("#"+baud+"-button").addEventListener("click", function(e) {
-    e.preventDefault();
-    ajaxSpin('POST', "/console/baud?rate="+baud,
-      function(resp) { showNotification("" + baud + " baud set"); showRate(baud); },
-      function(s, st) { showWarning("Error setting baud rate: " + st); }
-    );
-  });
-}
+//===== Text entry
 
 function consoleSendInit() {
   var sendHistory = $("#send-history");
@@ -136,9 +115,11 @@ function consoleSendInit() {
         var text = inputText.value;
         if (inputAddCr.checked) text += '\r';
         if (inputAddLf.checked) text += '\n';
+        pushHistory(inputText.value);
+        inputText.value = "";
         ajaxSpin('POST', "/console/send?text=" + encodeURIComponent(text),
-        function(resp) { showNotification("uC sent"); pushHistory(inputText.value); },
-        function(s, st) { showWarning("Error sending text to uC"); }
+          function(resp) { showNotification("Text sent"); },
+          function(s, st) { showWarning("Error sending text"); }
         );
         break;
     }

html/style.css

@@ -127,8 +127,10 @@ div.tt {
   margin: 0 auto;
   padding: 0 2em;
   max-width: 800px;
-	margin-bottom: 50px;
+  margin-bottom: 20px;
   line-height: 1.6em;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .header {
@@ -170,6 +172,16 @@ form button {
 .button-selected {
   background-color: #fc6;
 }
+select.pure-button {
+  padding: 0.465em 1em;
+  color: #009; /* same as a:link */
+}
+
+input.inline {
+  float:none;
+  margin-right: 0px;
+  margin-left: 0.5em;
+}
 
 /* Text console */
 pre.console {
@@ -180,12 +192,64 @@ pre.console {
   border: 0px solid #000000;
   color: #66ff66;
   padding: 5px;
+  overflow: scroll;
+  margin: 0px;
 }
 
 pre.console a {
   color: #66ff66;
 }
 
+.console-in {
+  background-color: #fff0b3;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  border: 0px solid #630;
+  color: #0c0;
+  padding: 5px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.console-in option:checked {
+  background-image: linear-gradient(#fc0, #fc0);
+}
+
+/* console flex */
+
+/*
+.hbox,.vbox {
+  box-sizing: border-box;
+  moz-box-sizing: border-box;
+  webkit-box-sizing: border-box;
+}
+*/
+.flex-hbox, .flex-vbox {
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+}
+.flex-hbox {
+  flex-direction: row;
+  ms-flex-direction: row;
+  webkit-flex-direction: row;
+}
+.flex-vbox {
+  flex-direction: column;
+  ms-flex-direction: column;
+  webkit-flex-direction: column;
+  /*width: 100%; */
+}
+.flex-fill {
+  flex: 1 1 auto;
+  ms-flex: 1 1 auto;
+  webkit-flex: 1 1 auto;
+}
+.height100 {
+  height: 100%;
+}
+
 /* log page */
 .dbg-btn, #refresh-button {
   vertical-align: baseline;