-
+
diff --git a/_sass/elements/_dropdown_filters.scss b/_sass/elements/_dropdown_filters.scss
index 44fd5a66bd..021ea011c6 100644
--- a/_sass/elements/_dropdown_filters.scss
+++ b/_sass/elements/_dropdown_filters.scss
@@ -32,7 +32,7 @@ a.filter-item {
.filter-toolbar {
padding: 8px 32px;
box-sizing: border-box;
- height: calc(100vh - 60px);
+ height: auto;
position: sticky;
flex-shrink: 0;
top: 64px;
@@ -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;
}
@@ -249,18 +263,23 @@ a.clear-filter-tags {
//resize dropdown on tablet and mobile view
section.filter-content-container {
display: block;
- padding: 32px 16px;
+ padding: 0 16px 32px 16px;
// flex-direction: column;
}
+ // Hide applied filter tags in collapsed mobile toolbar
+ .filter-tag-container {
+ display: none;
+ }
.scroll-lock {
overflow: hidden;
}
.filter-toolbar {
- background-color: $color-pink;
- height: 100%;
- position: static;
- padding: 0;
+ background-color: #f7f5f5;
+ position: sticky;
+ padding: 32px 0 0 0;
+ top: 40px;
+ z-index: 99;
}
.filtersDiv {
@@ -277,8 +296,9 @@ a.clear-filter-tags {
left: 0;
bottom: 0;
right: 0;
- overflow-y: scroll;
background: $color-white;
+ display: flex;
+ flex-direction: column;
}
.filters-title {
background: $color-white;
@@ -300,7 +320,8 @@ a.clear-filter-tags {
border: none;
}
.filter-toolbar.show-filters .filter-tag-container {
- display: none;
+ display: flex;
+ flex-direction: column;
}
ul.filter-list {
display: none;
@@ -315,17 +336,15 @@ a.clear-filter-tags {
.filter-toolbar.show-filters ul.filter-list {
display: flex;
- padding: 0 12px 65px 12px;
+ flex-grow: 1;
+ overflow-y: auto;
+ padding: 0 12px 20px 12px;
}
.filter-toolbar.show-filters .mobile-filter-buttons {
display: flex;
box-sizing: border-box;
justify-content: space-evenly;
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
+ flex-shrink: 0;
background: $color-white;
padding: 8px;
box-shadow: 0px -1px 4px 0px $color-mediumgrey;
@@ -363,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
+ }
}
diff --git a/_sass/elements/_search-bar.scss b/_sass/elements/_search-bar.scss
index f10840eed3..e604ea2e00 100644
--- a/_sass/elements/_search-bar.scss
+++ b/_sass/elements/_search-bar.scss
@@ -1,56 +1,65 @@
-#search-bar {
- height: 44px;
- padding: 10px 16px;
- border-radius: 5px;
- border: 1px solid rgba(0, 0, 0, 0.24);
- display: flex;
- flex-direction: row;
- background: $color-white;
- gap: 4px;
- margin-bottom: 10px;
-}
-form#search-bar {
- position: sticky;
- padding: 10px;
- top: 60px;
- z-index: 10;
+
+/* Search bar container (was #search-bar) */
+.search-bar-desktop,
+.search-bar-mobile {
+ height: 44px;
+ padding: 10px 16px;
+ border-radius: 5px;
+ border: 1px solid rgba(0, 0, 0, 0.24);
+ display: flex;
+ flex-direction: row;
+ background: $color-white;
+ gap: 4px;
+ margin-bottom: 10px;
}
-// // Ensure search-bar does not pin on mobile
-@media #{$bp-below-tablet} {
- form#search-bar {
- position: static;
- }
+
+/* Override _forms.scss (was #search) */
+#search-desktop,
+#search-mobile {
+ padding-right: 0px;
+ padding-left: 0px;
+ appearance: none;
+ background: $color-white;
+ border: none;
+ border-radius: 0px;
+ box-shadow: none;
+ color: $color-black;
+ font-size: 1rem;
+ height: 22px;
+ margin-bottom: 10px;
+ width: 100%;
}
-//Styles to override the styles from _forms.scss
-#search{
- padding-right: 0px;
- padding-left: 0px;
- appearance: none;
- background: $color-white;
- border: none;
- border-radius: 0px;
- box-shadow: none;
- color: $color-black;
- font-size: 1rem;
- height: 22px;
- margin-bottom: 10px;
- width: 100%;
+
+/* Buttons */
+.search-x,
+.search-glass {
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ margin: 0;
+ border: none;
}
.search-x {
- width: 24px;
- height: 24px;
- padding: 0;
- margin: 0;
- display: none;
- border:none;
+ display: none;
}
-.search-glass {
- width: 24px;
- height: 24px;
- padding: 0;
- margin: 0;
- border: none;
-}
\ No newline at end of file
+
+
+/* Mobile and below: show mobile search bar only (unchanged behaviour) */
+@media #{$bp-below-tablet} {
+ .search-bar-desktop { display: none; }
+ .search-bar-mobile { display: flex; position: static; }
+}
+
+/* Desktop and up: show desktop search bar; sticky below header */
+@media #{$bp-desktop-up} {
+ .search-bar-mobile { display: none; }
+ .search-bar-desktop {
+ display: flex;
+ position: sticky;
+ top: 61px;
+ z-index: 90;
+ }
+}
diff --git a/assets/js/current-projects.js b/assets/js/current-projects.js
index 90ff896271..ffabcc897f 100644
--- a/assets/js/current-projects.js
+++ b/assets/js/current-projects.js
@@ -101,11 +101,17 @@ document.addEventListener("DOMContentLoaded",function(){
// Add onclick event handlers to close search tips modal if it is open.
attachEventListenerCloseModal();
- //events related to search bar
- document.querySelector("#search").addEventListener("focus",searchOnFocusEventHandler);
- document.querySelector("#search").addEventListener("keydown", searchEnterKeyHandler);
- document.querySelector(".search-glass").addEventListener("click",searchEventHandler);
- document.querySelector(".search-x").addEventListener("click",searchCloseEventHandler);
+ // events related to search bar (adjusted selectors only)
+ const inputEl = document.querySelector('#search-desktop') || document.querySelector('#search-mobile') || document.querySelector('#search');
+ const glassEl = document.querySelector('.search-bar-desktop .search-glass') || document.querySelector('.search-bar-mobile .search-glass') || document.querySelector('.search-glass');
+ const closeEl = document.querySelector('.search-bar-desktop .search-x') || document.querySelector('.search-bar-mobile .search-x') || document.querySelector('.search-x');
+
+ if (inputEl) {
+ inputEl.addEventListener('focus', searchOnFocusEventHandler);
+ inputEl.addEventListener('keydown', searchEnterKeyHandler);
+ }
+ if (glassEl) { glassEl.addEventListener('click', searchEventHandler); }
+ if (closeEl) { closeEl.addEventListener('click', searchCloseEventHandler); }
// Update UI on page load based on url parameters
updateUI()
@@ -338,7 +344,8 @@ function cancelMobileFiltersEventHandler(e) {
//search bar event handler
function searchEventHandler(e){
e.preventDefault();
- let searchTerm=document.querySelector("#search").value;
+ const input = document.querySelector('#search-desktop') || document.querySelector('#search-mobile') || document.querySelector('#search');
+ let searchTerm = input ? input.value : '';
let tokenObj={};
tokenObj['Search']=searchTerm;
@@ -362,12 +369,14 @@ function searchEnterKeyHandler(e){
}
function searchOnFocusEventHandler(){
- document.querySelector(".search-x").style.display='block';
+ const xBtn = document.querySelector('.search-bar-desktop .search-x') || document.querySelector('.search-bar-mobile .search-x') || document.querySelector('.search-x');
+ if (xBtn) xBtn.style.display='block';
}
function searchCloseEventHandler(e){
e.preventDefault();
- document.querySelector("#search").value="";
+ const input = document.querySelector('#search-desktop') || document.querySelector('#search-mobile') || document.querySelector('#search');
+ if (input) input.value="";
}
/**
@@ -478,13 +487,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 +641,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',`
Clear All`);
+ // 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 +668,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;
}