Fixes SCSS #technologies

[JessicaLucindaCheng]

Fixes #2754 and #2397

What changes did you make and why did you make them?

• This is a follow up to pr Revert pr 2724 and pr 2672 to fix proj profile page bug #2757. PR Revert pr 2724 and pr 2672 to fix proj profile page bug #2757 was a temporary fix that removed the mobile languages/technology dropdown with scrollbar and the desktop languages/technology dropdown with scrollbar and 4 columns from the projects page in order to fix the problem with the detail information project pages having a large gap and technologies field not being wrapped. This pr is to fix the detail information project pages having a large gap and technologies field not being wrapped while still having on the projects page the mobile languages/technology dropdown with scrollbar and the desktop languages/technology dropdown with scrollbar and 4 columns.
• I changed #technologies to ul.dropdown#technologies because ul.dropdown#technologies has a higher specificity than #technologies. Also, SCSS #technologies caused problems with the technologies field on the detailed project page since it also has an id="technologies"; this caused a problem because all the SCSS files are compiled into a main.scss, which is shared sitewide by all webpages.
• I combined ul.filter-list li ul and ul.dropdown#technologies into one @media #{$bp-below-tablet} to make it so there wasn't multiple media queries with the same $bp-below-tablet parameter.
• I edited the comments related to the media queries to make them clearer.
• 2/15/2022 I changed the languages/technologies dropdown to be 3 columns instead of 4 columns to address the problem of gaps being created when a menu item had to wrap its text onto a second line and make other menu items that only needed 1 line to have gaps. (See bullet point 3 in this comment for a picture and more details: Update the Technologies dropdown in the Projects page to match the Figma design #2397 (comment))

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Mobile view of Languages/Technologies dropdown

Desktop view of Languages/Technologies dropdown

Desktop view of 311 Data project page

Desktop view of Civic Tech Jobs project page

Desktop view of Civic Tech Index project page

Desktop view of Food Oasis project page

Visuals after changes are applied

Mobile view of Languages/Technologies dropdown

Desktop view of Languages/Technologies dropdown

Desktop view of 311 Data project page (should look the same as the before image and putting it here to show it is the same)

Desktop view of Civic Tech Jobs project page (should look the same as the before image and putting it here to show it is the same)

Desktop view of Civic Tech Index project page (should look the same as the before image and putting it here to show it is the same)

Desktop view of Food Oasis project page (should look the same as the before image and putting it here to show it is the same)

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b JessicaLucindaCheng-fix-id-technologies-2754 gh-pages
git pull https://github.com/JessicaLucindaCheng/website.git fix-id-technologies-2754

[SAUMILDHANKAR]

Review ETA: EOD 2/14/22
Availability: Few hours most days

[SAUMILDHANKAR]

Revised Review ETA: EOD 2/19/22
Availability: Saturday 8-10 PM

[JessicaLucindaCheng]

@SAUMILDHANKAR I just pushed a commit and added the following to my original pr post:

2/15/2022 I changed the languages/technologies dropdown to be 3 columns instead of 4 columns to address the problem of gaps being created when a menu item had to wrap its text onto a second line and make other menu items that only needed 1 line to have gaps. (See bullet point 3 in this comment for a picture and more details: #2397 (comment))

Also, I updated the picture for the after visual for the dropdown with 3 columns.

[JessicaLucindaCheng]

@SAUMILDHANKAR Also, added the following note to this comment: #2397 (comment)

Also, note that the mobile Languages/Technologies dropdown in the Figma design has each menu item take up one line but the font size is 12px, which is smaller than the recommended minimum size of a 16px font. Thus, the current Languages/Technologies dropdown (even before adding the scrollbar) and the Status and Program Areas may have some menu item text wrapping to a second line because the current font size for the dropdowns is 16px. If you want each menu item in each dropdown to be on one line, we can address that problem in a separate issue for all the dropdowns.

[SAUMILDHANKAR]

Revised Review ETA: EOD 2/21/22
Availability: Monday 4-6 PM

[SAUMILDHANKAR]

@JessicaLucindaCheng Changes look good to me. I can see 3 columns for tech dropdown in desktop version. Project pages look fine as well. I will merge this to a new feature branch called feature-tech-dropdown. Next steps would be discussion regarding making the dropdown dynamic and any other changes required before merging this feature branch to gh-pages. Thanks a lot for working on this.

The base branch was changed.

[SAUMILDHANKAR]

@JessicaLucindaCheng Changes look good to me. I can see 3 columns for tech dropdown in desktop version. Project pages look fine as well. I will merge this to a new feature branch called feature-tech-dropdown. Next steps would be discussion regarding making the dropdown dynamic and any other changes required before merging this feature branch to gh-pages. Thanks a lot for working on this.