Pin projects filter to top of projects list mobile view (#8196)

Maarimar · web-flow · commit ba2c4eb63fd1 · 2025-11-10T11:18:53.000-08:00
* Pinned filter and search bar to the top of the page when scrolling

* 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

* Updated the filter open view to show the filters chosen at the top

* fixed gap on top of filter for consistency

* cancel and apply buttons arent covered by the search bar

* duplicated the search bar and gave it different classes to ba able to display it at different screen sizes

* deleted message

* Fix duplicate .search-bar-mobile selector

* spaces on conditions for readability
diff --git a/_includes/current-projects.html b/_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"/>
@@ -33,24 +33,42 @@ <h3 class="filters-title">
       <div class="search-tip-link">
         <a href="#" id="search-tip-link">Search Tips</a>
       </div>
+
+      <!-- Search bar moved here to appear directly below the Search Tips link on mobile -->
+
+      <form class="search-bar-mobile">
+        <input type="text" name="Search" id="search-mobile" class="search-input" placeholder="Search By Keywords">
+        <button class="search-x" aria-label="Cancel Search" tabindex="2">
+          <svg id="search-close" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M18 6L6 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M6 6L18 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <button class="search-glass" aria-label="Search by Keywords" tabindex="1">
+          <svg id="search-magnify-glass" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3248 12.8987L19.7048 18.2787C19.8939 18.468 20 18.7246 20 18.9921C19.9999 19.2596 19.8935 19.5161 19.7043 19.7052C19.515 19.8943 19.2584 20.0005 18.9909 20.0004C18.7234 20.0003 18.4669 19.894 18.2778 19.7047L12.8978 14.3247C11.2895 15.5704 9.26705 16.1566 7.24189 15.9641C5.21674 15.7716 3.341 14.8148 1.99625 13.2884C0.6515 11.7619 -0.0612416 9.78056 0.00301976 7.74729C0.0672812 5.71402 0.903718 3.7816 2.34217 2.34315C3.78063 0.904695 5.71305 0.0682577 7.74631 0.00399633C9.77958 -0.0602651 11.761 0.652477 13.2874 1.99723C14.8138 3.34198 15.7706 5.21772 15.9631 7.24287C16.1556 9.26802 15.5694 11.2905 14.3238 12.8987H14.3248ZM7.99977 13.9997C9.59107 13.9997 11.1172 13.3676 12.2424 12.2424C13.3676 11.1172 13.9998 9.59104 13.9998 7.99974C13.9998 6.40845 13.3676 4.88232 12.2424 3.7571C11.1172 2.63189 9.59107 1.99974 7.99977 1.99974C6.40847 1.99974 4.88235 2.63189 3.75713 3.7571C2.63191 4.88232 1.99977 6.40845 1.99977 7.99974C1.99977 9.59104 2.63191 11.1172 3.75713 12.2424C4.88235 13.3676 6.40847 13.9997 7.99977 13.9997Z" fill="#333333"/>
+          </svg>
+        </button>
+      </form>
+
     </div>
   </nav>
-  
+  <!-- Projects and Filters container -->
   <div class="projects-and-filters">
-    <form id="search-bar">
-      <input type="text" name="Search" id="search" placeholder="Search By Keywords">
-      <button class="search-x" aria-label="Cancel Search" tabindex="2">
-        <svg id="search-close" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M18 6L6 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M6 6L18 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </button>
-      <button class="search-glass" aria-label="Search by Keywords" tabindex="1">
-        <svg id="search-magnify-glass" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3248 12.8987L19.7048 18.2787C19.8939 18.468 20 18.7246 20 18.9921C19.9999 19.2596 19.8935 19.5161 19.7043 19.7052C19.515 19.8943 19.2584 20.0005 18.9909 20.0004C18.7234 20.0003 18.4669 19.894 18.2778 19.7047L12.8978 14.3247C11.2895 15.5704 9.26705 16.1566 7.24189 15.9641C5.21674 15.7716 3.341 14.8148 1.99625 13.2884C0.6515 11.7619 -0.0612416 9.78056 0.00301976 7.74729C0.0672812 5.71402 0.903718 3.7816 2.34217 2.34315C3.78063 0.904695 5.71305 0.0682577 7.74631 0.00399633C9.77958 -0.0602651 11.761 0.652477 13.2874 1.99723C14.8138 3.34198 15.7706 5.21772 15.9631 7.24287C16.1556 9.26802 15.5694 11.2905 14.3238 12.8987H14.3248ZM7.99977 13.9997C9.59107 13.9997 11.1172 13.3676 12.2424 12.2424C13.3676 11.1172 13.9998 9.59104 13.9998 7.99974C13.9998 6.40845 13.3676 4.88232 12.2424 3.7571C11.1172 2.63189 9.59107 1.99974 7.99977 1.99974C6.40847 1.99974 4.88235 2.63189 3.75713 3.7571C2.63191 4.88232 1.99977 6.40845 1.99977 7.99974C1.99977 9.59104 2.63191 11.1172 3.75713 12.2424C4.88235 13.3676 6.40847 13.9997 7.99977 13.9997Z" fill="#333333"/>
-        </svg>
-      </button>
-    </form>
+    <form class="search-bar-desktop">
+    <input type="text" name="Search" id="search-desktop" placeholder="Search By Keywords">
+    <button class="search-x" aria-label="Cancel Search" tabindex="2">
+      <svg id="search-close" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M18 6L6 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M6 6L18 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+    <button class="search-glass" aria-label="Search by Keywords" tabindex="1">
+      <svg id="search-magnify-glass" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3248 12.8987L19.7048 18.2787C19.8939 18.468 20 18.7246 20 18.9921C19.9999 19.2596 19.8935 19.5161 19.7043 19.7052C19.515 19.8943 19.2584 20.0005 18.9909 20.0004C18.7234 20.0003 18.4669 19.894 18.2778 19.7047L12.8978 14.3247C11.2895 15.5704 9.26705 16.1566 7.24189 15.9641C5.21674 15.7716 3.341 14.8148 1.99625 13.2884C0.6515 11.7619 -0.0612416 9.78056 0.00301976 7.74729C0.0672812 5.71402 0.903718 3.7816 2.34217 2.34315C3.78063 0.904695 5.71305 0.0682577 7.74631 0.00399633C9.77958 -0.0602651 11.761 0.652477 13.2874 1.99723C14.8138 3.34198 15.7706 5.21772 15.9631 7.24287C16.1556 9.26802 15.5694 11.2905 14.3238 12.8987H14.3248ZM7.99977 13.9997C9.59107 13.9997 11.1172 13.3676 12.2424 12.2424C13.3676 11.1172 13.9998 9.59104 13.9998 7.99974C13.9998 6.40845 13.3676 4.88232 12.2424 3.7571C11.1172 2.63189 9.59107 1.99974 7.99977 1.99974C6.40847 1.99974 4.88235 2.63189 3.75713 3.7571C2.63191 4.88232 1.99977 6.40845 1.99977 7.99974C1.99977 9.59104 2.63191 11.1172 3.75713 12.2424C4.88235 13.3676 6.40847 13.9997 7.99977 13.9997Z" fill="#333333"/>
+      </svg>
+    </button>
+  </form>
     <div class="page-contain projects-inner" >
       <ul class="project-list unstyled-list"></ul>
     </div>
diff --git 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
@@ -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;
-}
+
+
+/* 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
