Fix the dropdown menu design for projects page

[blulady]

Dependency

• 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 projects page.

Action Items

• [x] Update the drop-down menu on the projects page to reflect the design in Figma
• [x] The goal is to make this component reusable on multiple pages with different filters specified
• [x] Take into account accessibility of navigating the filters with keyboard -see resources below
• [x] Make the appropriate changes to the CSS, HTML, and JS as you need to
• [x] Note: The final design shows a "Search by keword" function, but you can ignore this for now, as this will be worked on in a different issue.

Resources/Instructions

• for reference a link to related design issue: #3277
• in the elements folder you should find _dropdown_filters.scss and that is where you will want to make the changes to the CSS
• in the _includes page you should find the current-projects.html
• in the assets/js folder you should find project.js
• Final design

Design Systems Accessibility Resources Standardized Components Wiki specifically:

• Keyboard Accessible - sufficient techniques
• Using CSS when component receives focus - Focus visible
• Navigable Guideline 2.4
• Focus Not Obscured

[github-actions[bot]]

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

[github-actions[bot]]

@kurikurichan

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 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, March 6, 2023 at 11:17 PM PST.}

[github-actions[bot]]

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

[chrismenke45]

Availability: Tues, Wed 8am-12pm. Thurs 12pm-6pm. ETA: 3/24

[chrismenke45]

Progress: I've set up the general layout and the functionality of the filters works Blockers: I will need to learn more about keyboard accessibility to finish Availability: Mon-Fri 8am-12pm ETA: 3/24

[chrismenke45]

3/24 Update: PR Created Available: 3/25 8am-12pm

[ExperimentsInHonesty]

@chrismenke45 Please change your pr to a draft and fix the following issue then take off the draft label

The current mockup shows the filter on the side being higher. And even without the search bar, its still to low.

Current mockup from Figma

Your screenshots from your dev

[chrismenke45]

@ExperimentsInHonesty Will do! Thank you for looking over it so quickly!

[ExperimentsInHonesty]

@chrismenke45 While you are waiting for your PR to get reviewed. Can you add a write up of what files go into the filter component and any other details that a person adding the same component to another page (e.g., toolkit page) will need to know. You can leave that write up here in this issue as a comment.

[chrismenke45]

How to Implement Dropdown Filters on Another Page

Files to reference

• _dropdown_filters.scss: This contains the styling for the filters you will be using. It is responsive and the classes are used to reflect changes in the UI due to user input
• current-projects.js: This is an example of how the js should be pulling information from our files and using it to build/filter items. It adds all the required classes to the filter elements to allow them to be responsive and react to user input.
• current-projects.html: This is an example of the base html required for the js file to build and add elements as needed

  Recommended workflow

• Begin with reviewing current-projects.js: and understand workflow
• Import data to be displayed and assign to a variable (see retrieveProjectDataFromCollection and projectDataSorter functions in current-projects.js
• Build data cards (see projectCardComponent function in current-projects.js)
• Specify which attributes of the data the filter should work on (see createFilter function in current-projects.js)
• Specify filter titles (many will just be the attribute that is being filter on, see main function in current-projects.js)
• Add event listeners

  Functions that will need to be changes to reflect you page's needs:

• retrieveProjectDataFromCollection and projectDataSorter will need to be changed to whatever data is being displayed
• createFilter will need to get new keys with values pulled from data
• projectCardComponent will need to be changed to whatever data is being displayed
• updateProjectCardDisplayState will need to be updated to whatever data is being displayed
• main will need to specify what filter titles will be used on new data
• updateFilterFrequency will need to query select from different class assuming data cards class is no longer '.project-card'
• updateUI & noUrlParameterUpdate will need to be updated to reflect name changes of the functions listed above
• All other functions regarding the filters should be good to go as is once the above functions have been changed