Make tutorial filter buttons more recognizable (#1790)

viamrobotics · Sep 11, 2023 · d9fd2ad · d9fd2ad
1 parent 7be784a
commit d9fd2ad
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/assets/js/tutorials.js b/assets/js/tutorials.js
@@ -216,10 +216,15 @@ search.on('render', function() {
 
 document.body.addEventListener('click', function(event) {
   let filter_box = document.getElementById('tutorial-filter-items');
-    if (!filter_box.contains(event.target)) {
-      open_elem = filter_box.getElementsByClassName("show");
-      if (open_elem) {
-        open_elem[0].classList.remove("show");
-      }
+  let tutorial_menu = document.getElementById('tutorial-menu');
+  if (!filter_box.contains(event.target) && !tutorial_menu.contains(event.target)) {
+    document.querySelectorAll('.filter').forEach( el => {
+      el.setAttribute("aria-expanded", false);
+      el.classList.add("collapsed");
+    });
+    let open_elem = filter_box.getElementsByClassName("show");
+    if (open_elem) {
+      open_elem[0].classList.remove("show");
     }
+  }
 }, true);
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -1167,6 +1167,15 @@ ul.sectionlist > li:hover {
   border: 1px solid black;
 }
 
+#tutorial-filters > .filter:hover {
+  background-color: #e7e5e4;
+  cursor: pointer;
+}
+
+#tutorial-filters > .filter[aria-expanded="true"]{
+  background-color: #e7e5e4;
+}
+
 .ais-Hits-item {
   display: flex;
 }