diff --git a/website/web/sri.txt b/website/web/sri.txt
index ae12e5e..2599d90 100644
--- a/website/web/sri.txt
+++ b/website/web/sri.txt
@@ -35,8 +35,8 @@
"secure.svg": "H8ni7t0d60nCJDVGuZpuxC+RBy/ipAjWT627D12HlZGg6LUmjSwPTQTUekm3UJupEP7TUkhXyq6WHc5gy7QBjg==",
"stats.css": "/kY943FwWBTne4IIyf7iBROSfbGd82TeBicEXqKkRwawMVRIvM/Pk5MRa7okUyGIxaDjFQGmV/U1vy+PhN6Jbw==",
"stats_graph.js": "S/sMNQK1UMMLD0xQeEa7sq3ce8o6oPxwxGlyKVtaHOODjair86dbBDm7cu6pa/elMRDJT1j09jEFjWp+5GbhTw==",
- "tree.css": "R/pWQnE8kMacDrzGy/NpA1tJoHAZpOjFiX6dqtBe+PqAnhYMn1CIQzODh8Ifvh6hBTPLRWX3bsabfEvfaI7Z6A==",
- "tree.js": "B14s0PA3EsL4eZw5e+bpQabUVy75t8z8o1PLHurwBD27w2A1Cn/98dA3r4g511Bmwkh09J142LH4y0bVsQeqmQ==",
+ "tree.css": "AvSJOleYapo+xOCcOPGxTcKg+t1TxFkmr/VvgVJbXaeDOnYECzmJOIVNZii/eFouTh85uDSgr+WLQHq3hft6Kg==",
+ "tree.js": "MezKYufVkOBLm/Z4ENrMhKzBNDslhXYTlDhjDDAbhHo6XqRzCnTMIgYtikQ1mxkwF5P61Tl1w0kalIPe4Sca6g==",
"up.jpg": "d1ljZJ9f5JekyM6RLFFH2Ua44j6neiQBdUIXOenRTjGppQr3JaeglpQIH6BjPCJL177+TH52U3UIRNS5YAyKIg==",
"up_right.jpg": "OMmz+n+MxR34P8/fn5t4DkqKqdJRzQbXQ7fAi2lhkZIJGhVs2vIyY1f2hpYoBxDAX1OcYsSE2lqIR2vXNDGZsA==",
"video.png": "gJtmkfr8I1Kw43pYEKjg6CAjgmhl1vIBKBQ3ZkxCu3wvxQm+6kf93iLrrFiY2WuiXzxEn2Leu52GJzmVN5id0g==",
diff --git a/website/web/static/tree.css b/website/web/static/tree.css
index feea838..431642b 100644
--- a/website/web/static/tree.css
+++ b/website/web/static/tree.css
@@ -28,6 +28,24 @@
scroll-margin: 50px;
}
+#help {
+ text-align: center;
+ border-style: solid;
+ border-color: #0d6efd;
+ border-radius: 25px;
+ text-decoration: none;
+ height: 50px;
+ width: 50px;
+ background-color: #0d6efd;
+ color: white;
+ align-content: center;
+}
+
+#help:hover {
+ background-color: white;
+ color: blue;
+}
+
/* Generic parts of menus */
hr {
display: block;
@@ -47,20 +65,14 @@ hr {
left: 5px;
background: white;
border: 2px solid;
- padding-top: 5px;
- padding-right: 5px;
- padding-bottom: 5px;
- padding-left: 5px;
+ padding: 5px;
}
#menu_container_vertical {
position: fixed;
top: 5px;
left: 5px;
- padding-top: 5px;
- padding-right: 5px;
- padding-bottom: 5px;
- padding-left: 5px;
+ padding: 5px;
}
#menu_container_vertical .menu-header {
@@ -73,14 +85,14 @@ hr {
padding: 10px 0;
}
+
#menu_container_vertical ul li a {
padding: 5px;
font-size: 1.1em;
display: block;
+ text-align: center;;
}
-#menu_container_vertical ul li a:hover {
-}
/* menu horizontal */
#menu_horizontal {
@@ -88,9 +100,7 @@ hr {
top: 5px;
background: white;
border: 2px solid;
- padding-top: 5px;
- padding-right: 5px;
- padding-left: 5px;
+ padding: 5px;
}
#menu_container_horizontal {
@@ -98,38 +108,80 @@ hr {
top: 5px;
left: 5px;
left: 217px;
- padding-top: 5px;
- padding-right: 5px;
- padding-left: 5px;
+ padding: 5px;
+ width: 80%;
}
-#menu_container_horizontal .container {
- width: 800px;
+.hstack{
+ height: 106.6px;
}
-#menu_container_horizontal ul.components {
- padding: 5px;
+
+
+/* Dropdown Menus */
+.dropbtn {
+ background-color: #0d6efd;
+ color: white;
+ font-size: 16px;
+ border: none;
+ width: 180px;
+ text-align: center;
+ height: 50px;
}
-#menu_container_horizontal ul li a {
- padding: 1px;
- font-size: 1.1em;
- display: block;
+.dropbtn:hover, .dropbtn:focus {
+ background-color: #0067fc;
}
-#menu_container_horizontal ul li a:hover {
- background: #fff;
+.dropdown {
+ position: relative;
+ display: inline-block;
}
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f9f9f9;
+ width: 180px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+
+.dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown-content a:hover {
+ background-color: #f1f1f1;
+}
+
+/* Show the dropdown menus on hover */
+#capture-menu:hover #capture-menu-content {
+ display: block;
+}
+#actions-menu:hover #actions-menu-content {
+ display: block;
+}
+#tools-menu:hover #tools-menu-content {
+ display: block;
+}
+#admin-menu:hover #admin-menu-content {
+ display: block;
+}
+#extra-menu:hover #extra-menu-content {
+ display: block;
+}
+
+
/* legend */
#legend_container {
position: fixed;
bottom: 5px;
right: 5px;
- padding-top: 5px;
- padding-right: 5px;
- padding-bottom: 5px;
- padding-left: 5px;
+ padding: 5px;
}
#legend {
@@ -138,8 +190,5 @@ hr {
right: 5px;
background: white;
border: 2px solid;
- padding-top: 5px;
- padding-right: 5px;
- padding-bottom: 5px;
- padding-left: 5px;
-}
+ padding: 5px;
+}
\ No newline at end of file
diff --git a/website/web/static/tree.js b/website/web/static/tree.js
index c4d4b09..88495ed 100644
--- a/website/web/static/tree.js
+++ b/website/web/static/tree.js
@@ -3,13 +3,13 @@
// Set the dimensions and margins of the diagram
let margin = {
- top: document.getElementById('menu_horizontal_content').clientHeight + 10,
+ top: document.getElementById('menu_horizontal_content').clientHeight + 30,
right: 200,
bottom: 10,
left: 90
};
-let menuHeight = document.getElementById('menu_vertical').clientHeight;
+let menuHeight = document.getElementById('menu_vertical').clientHeight + 60;
let width = 960 - margin.left - margin.right;
let height = menuHeight * 2;
diff --git a/website/web/templates/tree.html b/website/web/templates/tree.html
index 52e4919..9ef3791 100644
--- a/website/web/templates/tree.html
+++ b/website/web/templates/tree.html
@@ -258,39 +258,30 @@
-
+
+