Update Toolkit page's mobile filter

[daniellex0]

Dependency
#2171

Overview

We need to redesign the Toolkit page mobile filter banner, because the filter categories' font is too small when all filters are displayed in one row in mobile

Action Items

Design

• Review the Toolkit page filter in mobile (using Inspect Element)
• View the Homepage filter in mobile for an example of effectively adapting filter to mobile
• Create a rough recreation of the current Toolkit page mobile filter in the Toolkit page file on Figma
• Redesign the Toolkit page mobile filter
• Get design review from UX team

Development

• Review the mobile (dropdown) version of the Toolkit page filter banner on Figma (in pink rectangle)
• Develop the mobile-only dropdown filter (should stay same beige banner in tablet and desktop - the change should only be in mobile)
  • Follow same code as dropdown in Wins page

Resources/Instructions

Toolkit page
Figma Toolkit page file (final mobile version in pink rectangle]
Homepage

New mobile version of Toolkit page filter (beige banner):

[daniellex0]

@shinhope will figure out improvements to desktop version as well

[shinhope]

mobile version ideas:

[shinhope]

new desktop versions:

[akibrhast]

@daniellex0 What is the news on this, where do you want to go with this?

[daniellex0]

@akibrhast We are discussing, will add update here when it's finalized!

[daniellex0]

New final mobile dropdown version of filter:

See design on Figma (in pink rectangle)

[qiqicodes]

@danyc23 Can you let us know your progress in regards to this issue? Thank you =]

Progress:
Blockers:

[danyc23]

Blockers: Haven't find any blockers yet.
Progress: Working on it.
ETA: May 19, 2021

[wendywilhelm10]

@danyc23 Could you please update your issue?

[danyc23]

Blockers: No blockers.
Progress: Still working on it.
ETA: June 2, 2021

[Sihemgourou]

@danyc23
Please add update

1. Progress
2. Blockers
3. Availability
4. ETA

[ExperimentsInHonesty]

@danyc23 I see that you reassigned this to yourself, but I'll need more info that that, because we didn't have an update from Since May 28th, even though we asked a couple of times. So please provide an update now so I can decide if we can keep you on this issue. Apologies if you notified the team that you were going to be out and I am just unaware. For reference though, you do have to put that information on your issue or ask someone else to do that. Then based on the projected absence we decide to keep you on the issue or put it back in the prioritized backlog.

[danyc23]

@danyc23 I see that you reassigned this to yourself, but I'll need more info that that, because we didn't have an update from Since May 28th, even though we asked a couple of times. So please provide an update now so I can decide if we can keep you on this issue. Apologies if you notified the team that you were going to be out and I am just unaware. For reference though, you do have to put that information on your issue or ask someone else to do that. Then based on the projected absence we decide to keep you on the issue or put it back in the prioritized backlog.

Hi Bonnie, I was away for personal reasons and I mentioned it to Josh. I have done some advancements to this issue and still need to fix some small things to finish the filtering functionality. Attached you will see an image of my progress. Let me know if you have any question

[ExperimentsInHonesty]

@danyc23 - I want to talk again to the design team. I'm not satisfied with the solution they have proposed.

[danyc23]

@danyc23 - I want to talk again to the design team. I'm not satisfied with the solution they have proposed.

Ok, I'll be waiting for the new design. Should I move it back to In Review?

[github-actions]

@danyc23

Please add update using this template (even if you have a pull request)

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: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at a Tuesday or Sunday 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.

_{You are receiving this comment because your last comment was before Tuesday, August 3, 2021 at 7:53 AM.}

---

Note: This comment was created as part of a GitHub Action during its trial phase. If you find this GitHub Action to be disruptive/unhelpful, or if you believe there might be a bug, please leave a comment on this issue. All feedback will be used to further improve it. Thank you for your time.

[github-actions]

@danyc23

Please add update using this template (even if you have a pull request)

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: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at a Tuesday or Sunday 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.

_{You are receiving this comment because your last comment was before Tuesday, August 10, 2021 at 12:10 AM.}

---

Note: This comment was created as part of a GitHub Action during its trial phase. If you find this GitHub Action to be disruptive/unhelpful, or if you believe there might be a bug, please leave a comment on this issue. All feedback will be used to further improve it. Thank you for your time.

[github-actions]

@danyc23

Please add update using this template (even if you have a pull request)

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: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) 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.

_{You are receiving this comment because your last comment was before Tuesday, August 17, 2021 at 12:02 AM PST.}

[Aveline-art]

@danyc23 There has been no updates on this, so this issue is being recycled. When you are ready to join us, please come to a meeting so that we can fill you in on our new procedures and get you started with us!

[blakes24]

@hackforla/website-design I have a few questions about the design.

1. The non-mobile view of this page does not have the option to filter for multiple categories at once, but the proposed mobile view does (checkboxes rather than standard dropdown). I just want to make sure this is correct because it seems like the page should have the same functionality no matter the screen size.

2. The design for the filter includes a checkbox for the option "all". The other pages on the site that use checkbox dropdowns default to all categories if nothing is selected and do not have a checkbox for all. Should the "all" option be removed to remain consistent with the rest of the site?

3. The design shows the top bar of the dropdown displaying the category that is selected. This makes sense for a traditional dropdown where only one category can be selected at a time. How should this be handled when multiple categories are selected?

[ExperimentsInHonesty]

@blakes24 sorry about the confusion, the is issue need a new design before we can make the change. I added a dependency

[ExperimentsInHonesty]

@blakes24 we got the design done, so now the issue will go into the prioritized backlog.

[ExperimentsInHonesty]

• @blakes24 opps. Adam already made an issue for implementing. its Implement new design for Toolkit Mobile Menu #2391 I will close this one. Just letting you know since you had been assigned. The new issue is in the backlog.