Projects and Home Pages: Pin Projects Filter to the Top of the Projects List - Mobile View #7525
Labels
Complexity: Large
P-Feature: Projects page
https://www.hackforla.org/projects/
role: front end
Tasks for front end developers
size: 2pt
Can be done in 7-12 hours
Milestone
Overview
We need to improve the usability of the filters, search and project display on mobile so that it is easy for people to navigate the project list.
Details
See how the REI website implements their page when scrolling through the merchandise on the website. The revision that we are making to the Hack for LA projects filter and list should look and behave similar to it. Note that the difference between REI and ours is that we have a search bar, that will stay pinned at the top as well.
REI Mobile View example
Action Items
Resources/Instructions
images
Filter bar
Figure 1a: Current behavior (this will not change): Mobile view filter when you arrive at the page and have not scrolled past the filter
Figure 1b: Current behavior (this will not change): Mobile view filter opened when you have not yet chosen filters
Figure 2a: Before changes: Mobile view, when filter is open, and you have chosen some filters
Figure 2b: After changes: Mobile view, when filter is open and you have chosen some filters
ignore the color behind the labels, It's supposed to be the same color as the rest
Figure 3a: Before Changes Mobile view filter after you have selected some filters and closed the filter dropdown
Figure 3b: Mobile view filter after you have selected some filters and closed the filter dropdown
Figure 4a: Before changes: Mobile view when you scroll down the page
Figure 4b: After changes: Mobile view when you scroll down the page
The text was updated successfully, but these errors were encountered: