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

2 files changed, 30 insertions, 1 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");
+    }
+  });
 });