Implement new design for Toolkit Mobile Menu

[abuna1985]

Overview

We need to implement the Figma design provided by the design team to build our mobile menu for the Toolkit page so we can provide a better user experience

Click here to see current mobile view of the Toolkit page

Click here to see the Figma design mobile view of the Toolkit page

Action Items

• Implement the design for the Toolkit menu in mobile view
• Complete a pull request with the proposed changes

Resources/Instructions

Figma Design - Toolkit Page
Click below to see source code for text menu in Toolkit

website/pages/toolkit.html

Lines 17 to 26 in 49f5724

	<div class="toolkit-header__text-group">
	{% assign category_list = "All, Development, Design, Project Management, Professional Development" | split: ", " %}
	{% for category in category_list %}
	{% if category == "All" %}
	<a href="#{{category | replace: ' ', '+'}}" class="toolkit-header__banner-item selected-category">{{category}}</a>
	{% else %}
	<a href="#{{category | replace: ' ', '+'}}" class="toolkit-header__banner-item">{{ category }}</a>
	{% endif %}
	{% endfor %}
	</div>

[BrianCodes33]

Hi @abuna1985 . I'd like to work on this issue. I am seeing the new design on Figma that the team would like to implement on mobile view. Is there a specific breakpoint the design team would like to fire the dropdown (for tablet view as well)? Is it possible to have this dropdown menu items on desktop view to simplify the solution? Similar to the main page program areas...

[SAUMILDHANKAR]

@BrianCodes33 Request to please unassign yourself from this issue and move it to Prioritized backlog column. You can pick a good second issue from the prioritized backlog column using this link: https://github.com/hackforla/website/projects/7?card_filter_query=label%3A%22size%3A+good+second+issue%22. Once your good second issue is merged, you can come back and work on this issue. Thanks.

[Georgema20]

Hi, Been working on this for a while....Need some help. No OH tomorrow so don't know where to go. Guess I will go next OH? Can not find if you guys already have a class to make a div a filter kinda bar.

[JessicaLucindaCheng]

@Georgema20 Sorry that we did not have office hours to answer your question. However, feel free to ask us on Slack when you have questions or if you want to set up a time to meet to discuss your issue outside of our normal meeting times. I'm not sure if we already have a filter component or not, so let me do some research and I'll get back to you within a couple of days.

[JessicaLucindaCheng]

@Georgema20 In the Design System in Figma here are the filters we have (Note: Some of the SCSS properties in the classes have changed): https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=4532%3A444

If you are looking for the current SCSS class definitions and properties, they are here: https://github.com/hackforla/website/blob/063e211e2b6765e631a62af0f211941cef527f71/_sass/components/_project-filter.scss

Hopefully, you can use some of these SCSS classes to help make the filter. Let me know if you have any other questions.

[github-actions]

@Georgema20

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: "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 developer meeting discussion column 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.

_{You are receiving this comment because your last comment was before Monday, February 7, 2022 at 11:17 PM PST.}

[github-actions]

@Georgema20

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: "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 developer meeting discussion column 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.

_{You are receiving this comment because your last comment was before Monday, February 14, 2022 at 11:18 PM PST.}

[JessicaLucindaCheng]

@Georgema20 Did you need help or have questions? Also, please provide a weekly progress update in a comment below that includes the following:

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

[JessicaLucindaCheng]

Left a Slack message on Fri, Feb 25, 2022.

[github-actions]

@Georgema20

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: "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 developer meeting discussion column 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.

_{You are receiving this comment because your last comment was before Monday, February 28, 2022 at 11:18 PM PST.}

[SAUMILDHANKAR]

@Georgema20 Moving the issue back to the Prioritized Backlog column due to inactivity. Please feel free to pick it back up when available. Will leave a slack message about the same. Thanks.

[kathrynsilvaconway]

ETA: End of the day on 4/19
Availability : 6 hours

[kathrynsilvaconway]

1. Progress: Got theGained better overall understanding of how we organize CSS and HTML. basic style of the dropdown menu in place. Nav bar appears above 480px, dropdown appears for everythin below. Feeling confident I can finish it this week.
2. Blockers: Struggling to understand how html and CSS are organized on the site in general. I can't tell if there are existing classes I should be using or not, and I am not sure that I am organizing my CSS correctly. Will consult team leads on this.
3. Availability: 6 Hours
4. ETA: End of the Day on 4/26

[github-actions]

@kathrynsilvaconway

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: "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 developer meeting discussion column 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.

_{You are receiving this comment because your last comment was before Tuesday, April 26, 2022 at 12:21 AM PST.}

[ExperimentsInHonesty]

@kathrynsilvaconway I noticed the menu carrots are different than our other menus. Has this received design sign off?

Toolkit

Projects page

[JessicaLucindaCheng]

Leaving a note here to show you what I see on my Galaxy Note 9 using Firefox:

Galaxy Note 9 using Firefox screenshot

[ExperimentsInHonesty]

@kathrynsilvaconway I have reopened this issue. It's actually larger than originally thought, but let's have you make a new issue for the outstanding problem.

Here is the problem.

You created a new dropdown filter css instead of using one that already existed. Its not surprising that you didn't use one that already existed, because it's in a specific SCSS file related to another page. The solution should have been to examine the elements folder, see there was no SCSS file for filter, identify which pages that have filters (projects page, wins page). Get the classes from those pages SCSS file and figure out how to make a new SCSS file that will serve both those pages and the new one you built.

[kathrynsilvaconway]

@kathrynsilvaconway I have reopened this issue. It's actually larger than originally thought, but let's have you make a new issue for the outstanding problem.

Here is the problem.

You created a new dropdown filter css instead of using one that already existed. Its not surprising that you didn't use one that already existed, because it's in a specific SCSS file related to another page. The solution should have been to examine the elements folder, see there was no SCSS file for filter, identify which pages that have filters (projects page, wins page). Get the classes from those pages SCSS file and figure out how to make a new SCSS file that will serve both those pages and the new one you built.

Hi Bonnie, I think I was way off base with this issue from the start. I thought they justed wanted me to take the toolkit navbar and put it in a dropdown menu. It didn't seem like it had any relationship to the filter menus on the other pages. I will at how the other files in the elements folder are built and start writing an issue this coming week.

[ExperimentsInHonesty]

@kathrynsilvaconway please put a link to the new issue here, once you create it. Then you can close this issue 😀

[kathrynsilvaconway]

The elements in this issue will be reworked in the future to make the dropdown more consistent with other filter menus on the site. This menu should ultimately use the same classes used by the filters on the wins and projects pages. I have created a new issue to move all of classes for the projects filter over to the elements folder. This will allow future developers to access them more easily:

• Create filter_dropdown.scss File in Elements Folder #3256