Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
daras-cu merged 9 commits into from
Nov 10, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
85011fd
Pinned filter and search bar to the top of the page when scrolling
Maarimar Jun 18, 2025
278c40b
Added a count of the filters selected to the filter bar, added clar a…
Maarimar Jun 18, 2025
cdfb5df
Updated the filter open view to show the filters chosen at the top
Maarimar Jun 18, 2025
e74bc27
fixed gap on top of filter for consistency
Maarimar Aug 26, 2025
7c6f411
cancel and apply buttons arent covered by the search bar
Maarimar Aug 27, 2025
fe7ae6e
duplicated the search bar and gave it different classes to ba able to…
Maarimar Oct 28, 2025
3cdedae
deleted message
Maarimar Oct 28, 2025
ec20bbe
Fix duplicate .search-bar-mobile selector
Maarimar Oct 28, 2025
a7696b0
spaces on conditions for readability
Maarimar Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 34 additions & 16 deletions _includes/current-projects.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down Expand Up @@ -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>
Expand Down
71 changes: 57 additions & 14 deletions _sass/elements/_dropdown_filters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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
}
}
105 changes: 57 additions & 48 deletions _sass/elements/_search-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading