Pin projects filter to top of projects list mobile view

[Maarimar]

Fixes #7525

What changes did you make?

• Pinned Filter and Search Bars: The filter and search input fields are now pinned to the top of the screen when scrolling, ensuring they're always accessible for quick adjustments.
• Filter Counter and Clear All: A new counter has been added to indicate the number of active filters, alongside a convenient "Clear All" option to quickly remove all applied filters.
• Contextual Filter Pills: Filter "pills" are now displayed only within the opened filter feature, reducing clutter and providing a cleaner interface when filters aren't actively being managed.

Why did you make the changes?

• To reduce clutter and provide a cleaner interface when filters aren't actively being managed.
• Improve the usability of filter and have the opportunity to modify search when scrolling projects list.

CodeQL Alerts

After the PR has been submitted and the resulting GitHub actions/checks have been completed, developers should check the PR for CodeQL alert annotations.

Check the PR's comments. If present on your PR, the CodeQL alert looks similar as shown

Please let us know that you have checked for CodeQL alerts. Please do not dismiss alerts.

• I have checked this PR for CodeQL alerts and none were found.
• I found CodeQL alert(s), and (select one):
  • I have resolved the CodeQL alert(s) as noted
  • I believe the CodeQL alert(s) is a false positive (Merge Team will evaluate)
  • I have followed the Instructions below, but I am still stuck (Merge Team will evaluate)

Instructions for resolving CodeQL alerts

If CodeQL alert/annotations appear, refer to How to Resolve CodeQL alerts.

In general, CodeQL alerts should be resolved prior to PR reviews and merging

Screenshots of Proposed Changes To The Website:

Visuals before changes are applied

Visuals after changes are applied

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

---

From your project repository, check out a new branch and test the changes.

git checkout -b Maarimar-Pin-Projects-Filter-to-Top-of-Projects-List-MobileView-#7525 gh-pages
git pull https://github.com/Maarimar/website-HfLA.git Pin-Projects-Filter-to-Top-of-Projects-List-MobileView-#7525

[t-will-gillis]

Hi @Maarimar Please do not assign reviewers to your issue, unless either you have spoken with them already or they previously reviewed the same PR and need to re-review it.

In this case, one of the reviewers that you assigned is no longer active in the org. When other, available reviewers see that you have reviewers assigned already, they will likely skip over your PR and you may not have anyone reviewing your PR.

I will un-assign the reviewers.

[dvernon5]

ETA: EOD
Availability: Sun - Thurs: 6 PM - 8 PM | Fri: 4 PM - 6 PM

[dvernon5]

Hey @Maarimar,

Fantastic job on your PR! Here are the things you did really well:

• You added a counter next to Clear All within the filter bar.
• The Clear All button works exactly as intended.
• You pinned the filter bar correctly to the top of the pink area.
• The scroll bar is clearly visible and functional.
• Your explanation and description of the project are beautifully written.

Here are a couple of things that caught my attention:

In the filter, as the user scrolls down to select an option, especially when reaching the bottom of the list after Status, the Cancel and Apply buttons disappear.

Original Website

Pull Request

This one is a bit nitpicky: when scrolling through the project list, the filter and search bar do not fully cover the top element. A small gap remains between the filter bar and the project description. On the REI website, by comparison, the "Sort by" filter and pagination cover the entire top element while scrolling.

REI Scroll Down

Pull Request Scrolldown#1

Pull Request Scrolldown#2

Other than those critiques, everything looks great! The functionality is solid. Please re-request me once you’ve made those changes.

[Maarimar]

Thank you @dvernon5 for your feedback. I'll work on this this weekend and hopefully we can merge it soon.

[dvernon5]

Hey @Maarimar

Thank you for your changes!

What’s Done Well:

• The Filter and Search bar correctly stayed pinned while scrolling through projects.
• The Filter selection increments correctly, and the "Clear All" button works as expected.
• The website is fully functional.

What needs changes:

Website Changes.

• In desktop view, the Search Bar should display at the top of the project section. Right now, it’s placed below the “Search Tips” link.

Original Website

PR Version

• In mobile view, when the user clicks on the Filter dropdown arrow, it should display the filter contents and the Search Tips link.

Original Website

In contrast, it should not include the Search Bar.

PR Version

(I believe this will be resolved once the Search Bar is placed back in its original location.)

• I really like that the Filter and Search bar is pinned to the top and covers the projects while scrolling. However, in mobile view, the Filter and Search bar should span the entire width of the screen instead of leaving side gaps.

PR Version

For reference, see the REI website or the Hack for LA header section:
REI Mobile View

REI Desktop View

Hack for LA Desktop View

Hack for LA Mobile View (Header Section)

• No changes are needed in desktop view (once the Search Bar is back in the original position).

Code Changes

• On line 492, please add spaces in your condition for readability and consistency:

       totalSelected > 0
  

  Instead of

       totalSelected>0
  

• On line 481, great job refactoring the code and implementing the ES6 reduce function. Really nice improvement!

You’re doing a fantastic job, keep going! You’re very close.