dashboard/app: coverage dropdown menu

1 files changed, 50 insertions, 6 deletions

diff --git a/pkg/html/pages/style.css b/pkg/html/pages/style.css
index 60e523ffa..8a7ab747d 100644
--- a/pkg/html/pages/style.css
+++ b/pkg/html/pages/style.css
@@ -19,23 +19,25 @@ h1, h2, h3, h4 {
 	border: 1px solid black;
 	padding: 4px;
 	margin: 4px;
+	display: inline-block;
 }
 
+.navigation_tab a:hover {background-color: #ddd;}
+
 .navigation_tab_selected {
 	font-weight: bold;
 	border: 3px solid black;
 	padding: 4px;
 	margin: 4px;
+	display: inline-block;
 }
 
-.position_table .navigation {
+.navigation {
 	padding-top: 15px;
 	padding-bottom: 6px;
-}
-
-.position_table .navigation-right {
-	padding-top: 15px;
-	text-align: right;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
 }
 
 table {
@@ -426,3 +428,45 @@ aside {
 	padding: 5pt;
 	margin-bottom: 5pt;
 }
+
+/* Dropdown Button */
+.dropbtn {
+	background-color: transparent;
+	color: #375EAB;
+	text-decoration: none;
+	border: none;
+	font-family: inherit;
+	font-size: inherit;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+	position: relative;
+	display: inline-block;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+	display: none;
+	position: absolute;
+	background-color: #f1f1f1;
+	z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+	color: black;
+	text-decoration: none;
+	display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #ddd;}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {display: block;}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {background-color: #ddd;}