From f7ba566df7167369062324a989c8c848e12433ab Mon Sep 17 00:00:00 2001
From: Aleksandr Nogikh <nogikh@google.com>
Date: Thu, 6 Apr 2023 18:39:39 +0200
Subject: dashboard: display collapsible info sections on the bug page

Instead of showing tons of extra information to the user, only show the
collapsed titles with counts and let user toggle the sections they need.
---
 pkg/html/pages/common.js | 14 ++++++++++++++
 pkg/html/pages/style.css | 29 +++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)

(limited to 'pkg/html')

diff --git a/pkg/html/pages/common.js b/pkg/html/pages/common.js
index 95e6c8f61..80db71c8f 100644
--- a/pkg/html/pages/common.js
+++ b/pkg/html/pages/common.js
@@ -99,3 +99,17 @@ function addInputGroup(node) {
 	values.insertBefore(newGroup, lastGroup.nextSibling)
 	return false
 }
+
+document.addEventListener("DOMContentLoaded", function() {
+	document.addEventListener('click', function(event) {
+		const collapsible = event.target.closest('.collapsible')
+		if (!collapsible) {
+			return
+		}
+		const toggle = event.target.closest('.collapsible .head');
+		if (toggle) {
+			collapsible.classList.toggle("collapsible-hide");
+			collapsible.classList.toggle("collapsible-show");
+		}
+	})
+})
diff --git a/pkg/html/pages/style.css b/pkg/html/pages/style.css
index 09bcc90a0..5e19eebef 100644
--- a/pkg/html/pages/style.css
+++ b/pkg/html/pages/style.css
@@ -342,3 +342,32 @@ aside {
 	clear: both;
 	margin-bottom: 10px;
 }
+
+.collapsible {
+	border: 1px solid lightgrey;
+	margin-bottom: 15px;
+}
+
+.collapsible .content {
+	overflow-x: auto;
+}
+
+.collapsible .head {
+	max-width: 100%;
+	background-color: lightgrey;
+	padding: 5pt;
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.collapsible-hide .content {
+	display: none;
+}
+
+.collapsible-hide .hide-icon {
+	display: none;
+}
+
+.collapsible-show .show-icon {
+	display: none;
+}
-- 
cgit mrf-deployment