Added a count of the filters selected to the filter bar, added clar all function and removed pills of filters to reduce clutter on mobile view

Author: Maarimar

_includes/current-projects.html

@@ -4,7 +4,7 @@
   <nav class="filter-toolbar" aria-label="Filter Navbar">
     <div class="filtersDiv">
       <h3 class="filters-title">
-        Filters
+        <span class="filters-label-group">Filters <span id="counter_total" class="number-of-checked-boxes"></span> <a href="#" id="clear-all-filters" class="clear-filter-tags">Clear All</a></span>
         <button class="show-filters-button" aria-label="Show All Filters">
           <svg id='hamburger-filter-nav' width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M21.6297 12.2046H3.6297" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

_sass/elements/_dropdown_filters.scss

@@ -239,6 +239,20 @@ a.clear-filter-tags {
   }
 }
 
+// Style for the Clear All link 
+.filters-title .number-of-checked-boxes {
+  font-size: 0.85em; // slightly smaller than heading
+  color: $color-black; // same color as the "Filters" text
+  margin-left: 2px;
+}
+
+.filters-title .clear-filter-tags {
+  margin-left: 4px; // space between counter and link
+  white-space: nowrap;
+  display: none; // shown via JS when filters selected
+  color: $color-cement;
+}
+
 .number-of-checked-boxes {
   color: $color-red;
 }
@@ -252,6 +266,10 @@ a.clear-filter-tags {
     padding: 32px 16px;
     // flex-direction: column;
   }
+  // Hide applied filter tags on mobile to conserve space
+  .filter-tag-container {
+    display: none !important;
+  }
   .scroll-lock {
     overflow: hidden;
   }
@@ -364,4 +382,28 @@ a.clear-filter-tags {
 .show-none + .dropdown li {
   display: block;
 }
+
+  // Align Filters label, counter, and Clear All link 
+  .filters-label-group {
+    display: flex;
+    align-items: baseline;
+  }
+  .filters-label-group .number-of-checked-boxes {
+    font-size: 0.85em;
+    color: $color-black;
+    margin-left: 4px;
+  }
+  .filters-label-group .clear-filter-tags {
+    margin-left: 8px;
+    white-space: nowrap;
+    display: none;
+    color: $color-cement;
+  }
+}
+
+@media #{$bp-tablet-up} {
+  .filters-label-group .number-of-checked-boxes,
+  .filters-label-group .clear-filter-tags {
+    display: none !important; // hide on desktop
+  }
 }

assets/js/current-projects.js

@@ -478,13 +478,24 @@ function updateCategoryCounter(filterParams){
           }
         }
 
-        for(const [key,value] of container){
-          // for issue #4648, added this to show the sum of selected filters for both technology and language filters
-          let totalValue = 0
-          for (const innerValue of container){
-            totalValue += innerValue[1]
-          }
-          document.querySelector(`#${key}`).innerHTML = ` (${totalValue})`;
+        // Calculate total selected filters across all categories (excluding Search)
+        let totalSelected = container.reduce((sum, [,val]) => sum + val, 0);
+
+        // Update each category counter – preserve existing behaviour of showing combined totals
+        for(const [key] of container){
+          document.querySelector(`#${key}`) && (document.querySelector(`#${key}`).innerHTML = ` (${totalSelected})`);
+        }
+
+        // Update the new overall filters counter in the title
+        const totalCounterSpan = document.querySelector('#counter_total');
+        if (totalCounterSpan){
+          totalCounterSpan.innerHTML = totalSelected>0 ? ` (${totalSelected})` : '';
+        }
+
+        // Show/hide Clear All link
+        const clearAllLink = document.getElementById('clear-all-filters');
+        if(clearAllLink){
+            clearAllLink.style.display = totalSelected>0 ? 'inline' : 'none';
         }
 
 }
@@ -621,13 +632,14 @@ function attachEventListenerToFilterTags(){
             button.addEventListener('click',filterTagOnClickEventHandler)
         })
 
-        // If there exist a filter-tag button on the page add a clear all button after the last filter tag button
-        if(!document.querySelector('.clear-filter-tags')){
-            document.querySelector('.filter-tag:last-of-type').insertAdjacentHTML('afterend',`<a class="clear-filter-tags" tabindex="0" aria-label="Clear All Filters" style="white-space: nowrap;">Clear All</a>`);
+        // No longer inserting bottom Clear All link; top link exists.
+    }
 
-            //Attach an event handler to the clear all button
-            document.querySelector('.clear-filter-tags').addEventListener('click',clearAllEventHandler);
-        }
+    // Attach event to top Clear All link once (after DOM ready)
+    const clearAllTop = document.getElementById('clear-all-filters');
+    if(clearAllTop && !clearAllTop.dataset.listenerAdded){
+        clearAllTop.addEventListener('click', function(e){ e.preventDefault(); clearAllEventHandler(); });
+        clearAllTop.dataset.listenerAdded = 'true';
     }
 }
 
@@ -647,12 +659,16 @@ function noUrlParameterUpdate(){
 
     // Clear all number of checkbox counters
     document.querySelectorAll('.number-of-checked-boxes').forEach(checkBoxCounter => {checkBoxCounter.innerHTML = ''} );
+    const totalCounterSpan = document.querySelector('#counter_total');
+    if (totalCounterSpan) { totalCounterSpan.innerHTML = ''; }
 
-    // Clear all filter tags
-    document.querySelectorAll('.filter-tag') && document.querySelectorAll('.filter-tag').forEach(filterTag => filterTag.remove() );
+    const clearAllLink = document.getElementById('clear-all-filters');
+    if(clearAllLink){ clearAllLink.style.display='none'; }
 
-    // Remove Clear All Button
-    document.querySelector('.clear-filter-tags') && document.querySelector('.clear-filter-tags').remove();
+    // Remove any legacy bottom Clear All links if present
+    document.querySelectorAll('.clear-filter-tags').forEach(el => {
+        if(el.id !== 'clear-all-filters') el.remove();
+    });
     return;
 }