From 887faf6b9d486d2a8a44367d04231d4591618044 Mon Sep 17 00:00:00 2001 From: Richard Leurs <7275740+NextNebula@users.noreply.github.com> Date: Mon, 12 Oct 2020 17:06:47 +0200 Subject: [PATCH] Add styling to active integrations filter (#15164) Co-authored-by: Richard Leurs <7275740+EarthlingRich@users.noreply.github.com> --- sass/custom/_component_page.scss | 4 ++++ source/integrations/index.html | 7 +++++++ 2 files changed, 11 insertions(+) diff --git a/sass/custom/_component_page.scss b/sass/custom/_component_page.scss index c52b3dc6107..1b337c6d226 100644 --- 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 index 8cd023e0b51..131fe1f4bbc 100644 --- a/source/integrations/index.html +++ b/source/integrations/index.html @@ -206,6 +206,13 @@ allComponents.pop(); // remove placeholder element at the end 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();