webui: Add panel toggle and allow expand/collapse its body

3 files changed, 37 insertions, 2 deletions

diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css
index de40123..a0d7e1b 100644
--- a/fg21sim/webui/static/css/main.css
+++ b/fg21sim/webui/static/css/main.css
@@ -266,7 +266,7 @@ input:focus {
     background-color: #d9534f;
 }
 
-.label .icon {
+.label > .icon {
     margin-right: 0.2rem;
 }
 
@@ -374,6 +374,18 @@ button,
     font-size: 1.6rem;
     font-weight: bold;
 }
+.panel-title > .icon {
+    margin-right: 0.2rem;
+}
+.panel-title > .toggle {
+    margin-left: 0.5rem;
+    opacity: 0.5;
+    vertical-align: middle;
+    cursor: pointer;
+}
+.panel-title > .toggle:hover {
+    opacity: 1.0;
+}
 .panel-control {
     float: right;
 }
diff --git a/fg21sim/webui/static/js/main.js b/fg21sim/webui/static/js/main.js
index 25bc12d..7f5b582 100644
--- a/fg21sim/webui/static/js/main.js
+++ b/fg21sim/webui/static/js/main.js
@@ -82,4 +82,21 @@ $(document).ready(function () {
     var nav_height = $("nav.navigation").outerHeight();
     scrollTarget(nav_height);
   });
+
+  // Panel toggle control
+  $(".panel-title > .toggle").on("click", function () {
+    var toggle = $(this);
+    var body = toggle.closest(".panel").find(".panel-body");
+    if (body.is(":visible")) {
+      body.slideUp("fast");
+      toggle.removeClass("fa-chevron-circle-up")
+        .addClass("fa-chevron-circle-down")
+        .attr("title", "Expand contents");
+    } else {
+      body.slideDown("fast");
+      toggle.removeClass("fa-chevron-circle-down")
+        .addClass("fa-chevron-circle-up")
+        .attr("title", "Collapse contents");
+    }
+  });
 });
diff --git a/fg21sim/webui/templates/console.html b/fg21sim/webui/templates/console.html
index 019f72a..1a682f9 100644
--- a/fg21sim/webui/templates/console.html
+++ b/fg21sim/webui/templates/console.html
@@ -30,7 +30,11 @@
 
   <div class="panel panel-default">
     <div class="panel-heading">
-      <span class="panel-title"><span class="fa fa-comments" aria-hidden="true"></span> Logging Messages</span>
+      <span class="panel-title">
+        <span class="icon fa fa-comments" aria-hidden="true"></span>
+        <span class="text">Logging Messages</span>
+        <span class="toggle fa fa-chevron-circle-up" title="Collapse contents"></span>
+      </span>
       <span class="panel-control">
         <span id="log-toggle-debug" title="Toggle display of DEBUG messages" class="btn fa fa-comment" aria-hidden="true"></span>
         <span id="log-toggle-info" title="Toggle display of INFO messages" class="btn fa fa-info-circle" aria-hidden="true"></span>
@@ -42,4 +46,6 @@
     <div id="log-messages" class="panel-body">
     </div>
   </div>
+
+  <div id="modal-console" class="modal" style="display: none;"></div>
 </section>