Projects and Home Pages: Pin Projects Filter to the Top of the Projects List - Mobile View

[essencegoff]

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

• [ ] Add a count of the filters selected to the filter bar.
  • Currently, filter selections are listed, causing limited space in mobile view (figure 3a)
  • [ ] Change the filter bar so that the total number of filters chosen shows up (figure 3b)
• [ ] Add a Clear all function to the filter bar (figures 2b, 3b, 4b)
  • "Clear All" option should be aligned with filter option and appear after the number of filters chosen, if any.
  • [ ] Remove the Clear All that currently appears under the filter pills
• [ ] Update the filter open view to show the filters chosen at the top (2b)
• [ ] Pin the filter and search bar to the top of the page when a user scrolls (figure 4b)
  • The pin should start at the top of the pink area so that the filter does not end up behind the logo
  • [ ] Add a scroll bar to the project display

Resources/Instructions

• viewport changes for viewport widths below 767px
• Hack for LA projects page
• _dropdown_filters.scss
• ER that generated this issue: https://github.com/hackforla/website/issues/4530

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