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

essencegoff commented 1 month ago

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

essencegoff commented 1 month ago

REI Mobile View example

HackforLABot commented 1 month ago

Hi @ramitaarora, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

ramitaarora commented 1 month ago

Availability: Weekday mornings ETA: Oct 16 EOD

HackforLABot commented 4 weeks ago

@ramitaarora

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, October 15, 2024 at 12:04 AM PST.}

ramitaarora commented 3 weeks ago

Progress: I haven't had much time to work on this yet, but should get a good start on it today. Blockers: No blockers so far Availability: Weekday mornings ETA: Oct 25

ramitaarora commented 2 weeks ago

Progress: I have been sick and am still working on this Blockers: No blockers so far Availability: Weekday mornings ETA: Oct 31

hackforla / website