Improve the drop downs on Wins page to avoid unnecessary wrapping

[Thinking-Panda]

Overview

We need to adjust the display of the dropdowns on Wins page so the project names do not wrap to the next line.

Current appearance of the Wins page (tablet screen widths)

Action Items

• Locate the file _sass\elements\_old_dropdown_filters.scss
• Make necessary changes to the scss file so the project names do not wrap to the next line. Pay particular attention to media queries that affect layout in the range between mobile and desktop views. When possible, media queries should be based on the breakpoints found in /_sass/varaibles/_layout.scss
• Using Docker, test the Wins page locally in various viewport sizes. Please ensure that the project names do not wrap in tablet, desktop and large desktop sizes.

Resources/Instructions

• SCSS classes for styling the drop down menus are stored in _sass/elements/_old_dropdown_filters.scss
• Wins Page
• This issue resulted from ER: improve the drop downs on wins to avoid unnessary wrapping #6225

[github-actions]

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

[gdkoo]

Availability: Wednesday and Thursday evening
ETA: April 17

[gdkoo]

Hi @ExperimentsInHonesty and @roslynwythe: Adjustments were made following the recommendations from issue 6225 to increase the breakpoint of the existing media query that creates two columns to fill the page to prevent wrapping.

Wrapping occurs from 659 px up to 1002px, but neither are defined breakpoints in _sass/variables/_layout.scss , so I adjusted the media query to apply to a max breakpoint of the browser defined laptop size- 1024px. It made more sense to me than using the arbitrary number 1002px, or the screen-desktop-large which would mean the columns would always fill the page even when it's not necessary. Let me know if that works and I will submit the PR.

[github-actions]

@gdkoo

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 (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 Questions/In Review column of the Project Board 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. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, April 16, 2024 at 12:06 AM PST.}

[gdkoo]

Progress: Made changes and ready to submit PR.
Blockers: It wasn't clear at first the scope of changes that needed to be made (new media queries, what type of formatting). I looked back at the initial ER to find instructions to simply change the breakpoint for the existing media query in the file. The range of screen sizes where wrapping occurs are not covered by the defined breakpoints in _sass/variables/_layout.scss and includes sizes smaller than tablet and up to desktop.
Availability: Evenings
ETA: By the of the week
Pictures:
Desktop view after changes:

Tablet view after changes: