aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAaron LI <aaronly.me@outlook.com>2016-11-17 14:02:41 +0800
committerAaron LI <aaronly.me@outlook.com>2016-11-17 14:02:41 +0800
commit597a5896af66e4dafdc812669aaa5658565d4c90 (patch)
tree08ad595e860e836b5786eda89f86e361b1f86bcf
parent0af497625be03bea330b02738e6ba2c6f2c492e9 (diff)
downloadfg21sim-597a5896af66e4dafdc812669aaa5658565d4c90.tar.bz2
webui: Support toggle the body/contents of sections
The section header has class "heading" and a toggle control with class "toggle", which will toggle the display of the next block with the "body" class.
-rw-r--r--fg21sim/webui/static/css/main.css24
-rw-r--r--fg21sim/webui/static/js/main.js17
2 files changed, 38 insertions, 3 deletions
diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css
index a0d7e1b..510b342 100644
--- a/fg21sim/webui/static/css/main.css
+++ b/fg21sim/webui/static/css/main.css
@@ -79,6 +79,24 @@ header.masthead {
/**
+ * Section headings
+ */
+.heading > .icon {
+ margin-right: 0.2rem;
+}
+.heading > .toggle {
+ opacity: 0.2;
+ color: #606c76;
+ font-size: 65%;
+ vertical-align: middle;
+ margin-left: 1rem;
+ cursor: pointer;
+}
+.heading > .toggle:hover {
+ opacity: 0.9;
+}
+
+/**
* Navigation
*/
.navigation {
@@ -378,13 +396,13 @@ button,
margin-right: 0.2rem;
}
.panel-title > .toggle {
- margin-left: 0.5rem;
- opacity: 0.5;
+ opacity: 0.2;
vertical-align: middle;
+ margin-left: 0.5rem;
cursor: pointer;
}
.panel-title > .toggle:hover {
- opacity: 1.0;
+ opacity: 0.9;
}
.panel-control {
float: right;
diff --git a/fg21sim/webui/static/js/main.js b/fg21sim/webui/static/js/main.js
index 7f5b582..6db99e0 100644
--- a/fg21sim/webui/static/js/main.js
+++ b/fg21sim/webui/static/js/main.js
@@ -83,6 +83,23 @@ $(document).ready(function () {
scrollTarget(nav_height);
});
+ // Toggle section contents/body
+ $(".heading > .toggle").on("click", function () {
+ var toggle = $(this);
+ var body = toggle.closest(".heading").next(".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");
+ }
+ });
+
// Panel toggle control
$(".panel-title > .toggle").on("click", function () {
var toggle = $(this);