Create filter_dropdown.scss File in Elements Folder

kathrynsilvaconway commented 2 years ago

Overview

Currently, the dropdown filters menus on the projects page and the toolkit page use different SCSS classes, which creates visual inconsistency for the user and also makes it hard for future developers to apply changes correctly. We need to create an SCSS file the will contain all the classes necessary to build our filter menus and store it in the elements folder for future use.

Action Items

[x] create a new SCSS file in the elements folder called _dropdown_filters.SCSS.
[x] Copy the entire contents of the _project-filter.scss file into the new _dropdown_filters.scss file.
[x] Import the new scss file you created into main.scss and delete the import for the original _project-filter.scss
[x] After you verify that the contents has been copied correctly, delete the original _project-filter.scss file in your local repo and test the site to make sure nothing is broken.
[x] Push your code to your feature branch.
[ ] Demo your code with the merge team/tech leads. Which has not been made at this time. Check the bottom of this issue to see if an issue has been made yet. if not, leave a comment with this issue being done https://github.com/hackforla/website/issues/3277, if yes, then release dependency on the new issue that related this one.

Note to Merge Team/Tech Leads:

[ ] If moving this file does not break any code on the site, have the assignee open a pull request and the changes can be merged. If something does break, create an issue to investigate why and correct it.

Resources/Instructions

Here is the _project-filter.scss file: https://github.com/hackforla/website/blob/gh-pages/_sass/components/_project-filter.scss

github-actions[bot] commented 2 years ago

Hi @kathrynsilvaconway.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing: Role, Feature

NOTE: Please ignore the adding proper labels comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards. To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

ExperimentsInHonesty commented 2 years ago

@kathrynsilvaconway you mention that they should

After you verify that the contents has been copied correctly, you can delete the original _project-filter.scss file.

But there is no mention that they should check to see if the pages that use it still work.... and I am left wondering if there are other steps they have to do to make sure the files that use the code know where to find it.

--

Also, when you use the issue making template, please delete the no dependency part or anything else that is unnecessary to the issue. We do this to reduce cognitive load.

ExperimentsInHonesty commented 2 years ago

@kathrynsilvaconway left you a note above, and it looks like you did not address what I mentioned, but changed the labels back to ready for milestone. Please address https://github.com/hackforla/website/issues/3256#issuecomment-1253935127

blulady commented 2 years ago

Changes requested have been made.

github-actions[bot] commented 2 years ago

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

DmitriiTsy commented 2 years ago

Hi guys, hi world!

Availability: 2 hours ETA: 2 hours

jdingeman commented 1 year ago

Hello Team,

Added a couple of items to clarify the issue:

Changed name from dropdown_filters.scss to _dropdown_filters.scss to match naming convention
Added item to import new file into main.scss and delete the import statement, otherwise this will break the page

DmitriiTsy commented 1 year ago

Availability: 6 hours ETA: 2 hours

ExperimentsInHonesty commented 1 year ago

@DmitriiTsy Turns out we are trying to make sure that the filters are navigable by keyboard, not sure if the work you are doing on this issue needs to take that into account, but I thought I would drop you the resources Z has gathered

Resources

DmitriiTsy commented 1 year ago

Thank you for these resources. It's amazing

P.S. I'm on vacation till 11/28/2022

arpitapandya commented 1 year ago

As per the discussion - Dmitrii found a job, and doesn't wish to contribute for now. So, I am un-assigning and moving this issue back to prioritized backlog so that other dev can work on it.

github-actions[bot] commented 1 year ago

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

wendybarrios commented 1 year ago

i. Availability: Monday, Tuesday, Thursday : 8:00am - 12:30pm and 6:00 pm - 7:30pm ii. ETA: Tuesday, 1/17

wendybarrios commented 1 year ago

Blockers: School/Work Availability: Evenings after 6:00pm ETA: 1/27

hackforla / website