From 85011fd920dc4d79eacb12b78f56196b37564aaf Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 18 Jun 2025 14:43:08 -0500 Subject: [PATCH 1/9] Pinned filter and search bar to the top of the page when scrolling --- _includes/current-projects.html | 30 ++++++++++++++------------- _sass/elements/_dropdown_filters.scss | 7 ++++--- _sass/elements/_search-bar.scss | 15 +++++++------- 3 files changed, 27 insertions(+), 25 deletions(-) diff --git a/_includes/current-projects.html b/_includes/current-projects.html index 66673061a6..60a8923536 100644 --- a/_includes/current-projects.html +++ b/_includes/current-projects.html @@ -33,24 +33,26 @@

Search Tips
+ + +
-
    diff --git a/_sass/elements/_dropdown_filters.scss b/_sass/elements/_dropdown_filters.scss index 44fd5a66bd..9950bcb6fb 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; @@ -258,9 +258,10 @@ a.clear-filter-tags { .filter-toolbar { background-color: $color-pink; - height: 100%; - position: static; + position: sticky; padding: 0; + top: 64px; + z-index: 99; } .filtersDiv { diff --git a/_sass/elements/_search-bar.scss b/_sass/elements/_search-bar.scss index f10840eed3..b81821c85d 100644 --- a/_sass/elements/_search-bar.scss +++ b/_sass/elements/_search-bar.scss @@ -13,15 +13,8 @@ form#search-bar { position: sticky; padding: 10px; - top: 60px; - z-index: 10; -} -// // Ensure search-bar does not pin on mobile -@media #{$bp-below-tablet} { - form#search-bar { - position: static; - } } + //Styles to override the styles from _forms.scss #search{ padding-right: 0px; @@ -53,4 +46,10 @@ form#search-bar { padding: 0; margin: 0; border: none; +} + +@media #{$bp-below-tablet} { + form#search-bar { + padding: 10px; + } } \ No newline at end of file From 278c40b147d8395fdc386fae9f7e95b159b161f0 Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 18 Jun 2025 16:02:30 -0500 Subject: [PATCH 2/9] 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 --- _includes/current-projects.html | 2 +- _sass/elements/_dropdown_filters.scss | 42 ++++++++++++++++++++++ assets/js/current-projects.js | 50 ++++++++++++++++++--------- 3 files changed, 76 insertions(+), 18 deletions(-) diff --git a/_includes/current-projects.html b/_includes/current-projects.html index 60a8923536..5f34f56fd0 100644 --- a/_includes/current-projects.html +++ b/_includes/current-projects.html @@ -4,7 +4,7 @@
    - +
    +
    + + + +
      diff --git a/_sass/elements/_search-bar.scss b/_sass/elements/_search-bar.scss index b81821c85d..78f99a5f49 100644 --- a/_sass/elements/_search-bar.scss +++ b/_sass/elements/_search-bar.scss @@ -1,55 +1,68 @@ -#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; + + +/* 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; } -form#search-bar { - position: sticky; - padding: 10px; +/* 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; -} + +/* Mobile and below: show mobile search bar only (unchanged behaviour) */ @media #{$bp-below-tablet} { - form#search-bar { - padding: 10px; - } -} \ No newline at end of file + .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; + } + .search-bar-mobile { + display: none; + } +} diff --git a/assets/js/current-projects.js b/assets/js/current-projects.js index d0e7a9d3ce..5c265f250a 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=""; } /** From 3cdedae80f00f9781ec4ca6a2c3fe7f829b3b7e2 Mon Sep 17 00:00:00 2001 From: Mariana Date: Tue, 28 Oct 2025 00:37:28 -0500 Subject: [PATCH 7/9] deleted message --- _sass/elements/_search-bar.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_sass/elements/_search-bar.scss b/_sass/elements/_search-bar.scss index 78f99a5f49..5fca4f7a23 100644 --- a/_sass/elements/_search-bar.scss +++ b/_sass/elements/_search-bar.scss @@ -14,7 +14,7 @@ margin-bottom: 10px; } -/* Override _forms.scss (was #search) */ + #search-desktop, #search-mobile { padding-right: 0px; @@ -47,13 +47,13 @@ -/* Mobile and below: show mobile search bar only (unchanged behaviour) */ +/* Mobile and below: show mobile search bar only */ @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 */ +/* Desktop and up: show desktop search bar */ @media #{$bp-desktop-up} { .search-bar-mobile { display: none; } .search-bar-desktop { From ec20bbe16b2713121b9297d34ed7abb355198fa3 Mon Sep 17 00:00:00 2001 From: Mariana Date: Tue, 28 Oct 2025 09:43:26 -0500 Subject: [PATCH 8/9] Fix duplicate .search-bar-mobile selector --- _sass/elements/_search-bar.scss | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/_sass/elements/_search-bar.scss b/_sass/elements/_search-bar.scss index 5fca4f7a23..e604ea2e00 100644 --- a/_sass/elements/_search-bar.scss +++ b/_sass/elements/_search-bar.scss @@ -14,7 +14,7 @@ margin-bottom: 10px; } - +/* Override _forms.scss (was #search) */ #search-desktop, #search-mobile { padding-right: 0px; @@ -47,13 +47,13 @@ -/* Mobile and below: show mobile search bar only */ +/* 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 */ +/* Desktop and up: show desktop search bar; sticky below header */ @media #{$bp-desktop-up} { .search-bar-mobile { display: none; } .search-bar-desktop { @@ -62,7 +62,4 @@ top: 61px; z-index: 90; } - .search-bar-mobile { - display: none; - } } From a7696b0bf4d7a83f9e9463a068d765167bfd2c87 Mon Sep 17 00:00:00 2001 From: Mariana Date: Tue, 28 Oct 2025 10:02:23 -0500 Subject: [PATCH 9/9] spaces on conditions for readability --- assets/js/current-projects.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/current-projects.js b/assets/js/current-projects.js index 5c265f250a..ffabcc897f 100644 --- a/assets/js/current-projects.js +++ b/assets/js/current-projects.js @@ -498,13 +498,13 @@ function updateCategoryCounter(filterParams){ // Update the new overall filters counter in the title const totalCounterSpan = document.querySelector('#counter_total'); if (totalCounterSpan){ - totalCounterSpan.innerHTML = totalSelected>0 ? ` (${totalSelected})` : ''; + 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'; + clearAllLink.style.display = totalSelected > 0 ? 'inline' : 'none'; } }