Fix the dropdown menu for toolkit page

[blulady]

Dependency

• Fix the dropdown menu design for projects page #3744 (its the issue that makes the component)
• Create filter_dropdown.scss File in Elements Folder #3256

Overview

During recent audits, the team realized that the drop-down menu design is not uniform. In an attempt to unify all drop-down menus the design team has redesigned the drop-down menu. This issue is to implement the new uniform design specifically on the toolkit page using the component designed for the project page.

Action Items

• Update the drop-down menu on the toolkit page to reflect the design in Figma using the component designed for the project page.
  • You do not need to develop the search bar function. The goal is to make this component reusable on multiple pages with different filters specified
• Make the appropriate changes to the CSS, HTML, and JS as you need to
• Ensure that changes to the component on the Toolkit page do not break pages in other pages (i.e. Projects Page, Wins, etc.)

Resources/Instructions

• final design
• for a reference a link to related design issue: Design a fix for the dropdown menu design for toolkit page #3626
• in the elements folder https://github.com/hackforla/website/tree/gh-pages/_sass/elements you should find _dropdown_filters.SCSS that have been modified and should be ready to use
• in the pages you should find the toolkit page https://github.com/hackforla/website/blob/gh-pages/pages/toolkit.html
• in the assets/js you should find toolkit
• how to code for re-useability Standardized Component
• write up on accessibility (not specifically for drop down menus)

[github-actions]

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

[kwangric]

i. Availability: Weekdays after 1pm PDT
ii. ETA: May 12th

[kwangric]

Progress: Haven't had as much time as I would have liked this past week, but I've removed the original dropdown menu and started reviewing the code for the new dropdown menu already implemented on the projects page.
Blockers: Having a little difficulty understanding the workflow of the code mentioned above. I'm slowly piecing it together and will try to contact Chris if I get completely stuck.
Availability: Most days I'm free after 3pm PDT
ETA: Still hoping to be completed by May 12th, will update if anything changes.

[kwangric]

Progress: Been working through the issue this week, made progress populating the filters based on the guide-pages. Gonna be working on the filter functionality next.
Blockers: Having a little difficulty understanding the workflow of the code mentioned above. I'm slowly piecing it together and will try to contact Chris if I get completely stuck.
Availability: Most days I'm free after 5pm PDT
ETA: Gonna work on it through next week and hoping to get it done by Friday.
Pictures:

[kwangric]

Progress: Implemented the filter functionality. Just need to add additional features to make it uniform with the filters on the projects page. This includes:

1. Adding a number in parenthesis indicating how many guides are in each filter.
2. Adding buttons that show all applied filters, with the ability to clear the individual filters or all of them.
3. Add 'view all' button in each category with more than 8 filters.
4. Allow user to collapse each category.

Blockers: See comments below.

Availability: Most days I'm free after 3pm PDT

ETA: Within the next two weeks.

---

Details on blocker

As per the design on Figma, I've added all the filter categories for the guide pages except for "Technologies". Looking through the data for the guide-pages, there doesn't seem to be any information on technologies used. See pictures for details.

---

Design on Figma showing Technology section

• Filters on the mockup on Figma show a Technology category with different technologies used.

Guide-Page in the repository without any technology information

• The html file for the guide pages that I'm pulling the information to create the filters do not include technology.

---

Is there another location where the technology used can be found? If not, should I just exclude it? Thanks.

[ExperimentsInHonesty]

Hi @kwangric. I think that the guides that are there now, are not great examples... However, you can add the following to the one you are using an an example.

Create a Kanban Project Board from Our Template
The Technology for it should be GitHub
the Tool name Kanban

Building a Survey Reporting Dashboard
Technology: Looker Studio
Tool: Dashboard

[kwangric]

Progress: Finished most of the requirements of the issue. Last main issue is making it mobile friendly as well as some minor style details.
Blockers: N/A
Availability: Most days I'm free after 3pm PDT
ETA: On course to finish it this week