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

[essencegoff]

trafficstars

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]

REI Mobile View example

[HackforLABot]

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]

Availability: Weekday mornings ETA: Oct 16 EOD

[HackforLABot]

@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.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. 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]

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]

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

[HackforLABot]

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]

Availability: weekday mornings ETA: Nov 25 Note: I got sick and wasn't able to work on this, hopefully back to speed now.

[HackforLABot]

@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.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. 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 Monday, November 25, 2024 at 11:04 PM PST.}

[HackforLABot]

Hi @aswutmaxcy, 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 :)

[aswutmaxcy]

i. Availability PST 9am - 5pm ii. ETA: I'm unsure, I'll set a date for this Friday (1/10/25) and update accordingly

[HackforLABot]

@aswutmaxcy

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.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. 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 Monday, January 13, 2025 at 11:04 PM PST.}

[aswutmaxcy]

Progress: Still currently working on this issue, having trouble with dev envivronment
Blockers: wsl and docker aren't working properly
Availability: working on this for 5hrs today 1/20/25
ETA: unknown, will update eod

[HackforLABot]

@aswutmaxcy

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.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. 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 Monday, January 27, 2025 at 11:04 PM PST.}

[HackforLABot]

@aswutmaxcy

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

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. 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 Monday, February 3, 2025 at 11:04 PM PST.}

[ExperimentsInHonesty]

@aswutmaxcy An automation is about to remove you from this issue because you have not updated. Please do an update

You mentioned that you are having trouble with docker. Why didn't that come up on the other issues you worked on (first, small, medium)?

[HackforLABot]

Hi @rogerioduenas, 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 :)

[HackforLABot]

Hi @Maarimar, 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 :)

[Maarimar]

Availability: W-F afternoon CST ETA: Around 05/28

[HackforLABot]

@Maarimar

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.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. 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, May 27, 2025 at 12:05 AM PST.}

[HackforLABot]

@Maarimar

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

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. 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, June 3, 2025 at 12:05 AM PST.}

[HackforLABot]

@Maarimar

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

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. 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, June 10, 2025 at 12:05 AM PST.}

[Maarimar]

Blockers: I had to do a hard factory reset on my computer and lost some of the work I did. Availability: Plan to finish between today and tomorrow, now a computer in working order.