Add styling to active integrations filter (home-assistant#15164)

Co-authored-by: Richard Leurs <[email protected]>
tboby · Oct 12, 2020 · 887faf6 · 887faf6
1 parent 1e3337d
commit 887faf6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/sass/custom/_component_page.scss b/sass/custom/_component_page.scss
@@ -46,6 +46,10 @@
 @media only screen and (min-width: $desk-start) {
   #components-page {
     .filter-button-group {
+      .active {
+        font-weight: bold;
+      }
+
       .featured {
         margin: 12px 0;
       }

diff --git a/source/integrations/index.html b/source/integrations/index.html
@@ -206,6 +206,13 @@
 
       rendered = Mustache.render(template, data);
 
+      // set active class on active menu item
+      jQuery('.filter-button-group a.active').removeClass('active');
+      jQuery(`.filter-button-group a[href*="${hash}"]`).addClass('active');
+      if (hash === "") {
+        jQuery('.filter-button-group a[href*="#featured"]').addClass('active');
+      }
+
       // remove previous elements and css classes, add the new stuff and then trigger the fade-in css animation
       $('#componentContainer').html('').removeClass('show-items remove-items').html(rendered).addClass('show-items');
       logoLazyLoad.update();