ER: Filters on project page

[JessicaLucindaCheng]

Emergent Requirement - Problem

On the current homepage and Projects page, I can't see all the filter categories unless I do one of the following:

• Scroll all the way through all the projects
• Or collapse the Program Area filter in order to see the Status filter category or be able to see the View all in the Languages/Technologies filter category

To see the problem I am seeing, view the https://www.hackforla.org/projects/ page using Developer Tools and inspect it at 1024 x 659 and look at the filters on the left side while scrolling down the page.

Click here to see the problem with not being able to see all the filters while scrolling

Issue you discovered this emergent requirement in

• Not applicable

Date discovered

2023-Apr-17

Did you have to do something temporarily

• YES
• NO

Scroll all the way through the projects or collapse a filter category

Who was involved

@JessicaLucindaCheng

What happens if this is not addressed

It's not user friendly

Resources

• https://www.hackforla.org/projects/

Recommended Action Items

• Discuss with Stakeholder Rep (Bonnie) potential solutions
• Make a new issue
• Discuss with team

Potential solutions [draft]

[ExperimentsInHonesty]

We should make a new issue to fix it so that it operates the same way as REI and Amazon (pined to the top)

Also filter should be pinned to content

[Adastros]

• Issue for ER can be found in issue Projects and Home Pages: Pin Projects Filter to the Top of the Projects List #4593

[Anahisv23]

Hi @JessicaLucindaCheng @Adastros, I'm working on issue #4593. My peers and I had a question regarding the issue. The issue states that the search bar needs to be pinned on viewports width above 767px (desktop view). Is pinning the search bar for viewports below 767px (mobile view) for the homepage and project page something we want to address in this issue or in another issue? Thank you!

[ExperimentsInHonesty]

Hi @JessicaLucindaCheng @Adastros, I'm working on issue #4593. My peers and I had a question regarding the issue. The issue states that the search bar needs to be pinned on viewports width above 767px (desktop view). Is pinning the search bar for viewports below 767px (mobile view) for the homepage and project page something we want to address in this issue or in another issue? Thank you!

@Anahisv23 Good question. We are going to address the mobile separately in another issue

[ExperimentsInHonesty]

Notes for person making new ER

• We need to make a new issue to answer how we want the filter to behave when it's in mobile

How we want it to behave

• It will freeze the filter and search at the top as you scroll down.
• The applied filters will only be visible when you open the filter hamburger menu
• see REI.com website

What we need in order to make the new ER

• GIF of mobile of current site behavior
• Screenshot of REI
• revised viewport width below 767px

Once this comment has been made into an ER, then reassign Adastros to this issue, and close it.

[Anahisv23]

Hi @JessicaLucindaCheng @Adastros, I'm working on issue #4593. My peers and I had a question regarding the issue. The issue states that the search bar needs to be pinned on viewports width above 767px (desktop view). Is pinning the search bar for viewports below 767px (mobile view) for the homepage and project page something we want to address in this issue or in another issue? Thank you!

@Anahisv23 Good question. We are going to address the mobile separately in another issue

Gotcha. Thank you for the clarification!

[ExperimentsInHonesty]

• We created a new mobile issue for this, which completes this ER Projects and Home Pages: Pin Projects Filter to the Top of the Projects List - Mobile View  #7525