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

[Thinking-Panda]

@bonniewolfe Bonnie says: If @mademarc has not done a medium size issue yet, please assign him to this issue when its ready

[roslynwythe]

Hi @Thinking-Panda great job writing this issue. I have a few suggestions:

• Along with the second action item I would add "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
• Along with the third action item, please mention that testing should be performed for mobile, tablet, desktop and large desktop sizes.

[github-actions[bot]]

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

[ExperimentsInHonesty]

@Thinking-Panda Have you had a chance to update this draft with Roslyn's comments yet. I don't see any activity in this issue for the last 2 weeks

[Thinking-Panda]

@ExperimentsInHonesty I have updated the action items based on Roslyn's comment.

[github-actions[bot]]

Hi @mademarc, 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]]

@mademarc

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 Monday, March 4, 2024 at 11:06 PM PST.}

[Thinking-Panda]

@mademarc Whenever possible please update your availability, and ETA for this issue. Thanks!

[mademarc]

Hey @Thinking-Panda here is the info below regarding this issues:

i. Availability: 03/19/2024

ii. ETA: 04/09/2024

[github-actions[bot]]

@mademarc

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, March 19, 2024 at 12:06 AM PST.}

[mademarc]

Progress: gonna work on a assigned medium issue coming up and need to re install docker/git on my local machine 1st.

Blockers: No Blockers

Availability: 03/27/2024 ETA: 04/23/202

[github-actions[bot]]

@mademarc

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 2, 2024 at 12:05 AM PST.}

[ExperimentsInHonesty]

@mademarc When I assigned you this issue it was with the understanding that you were ready to start working on it. If you still have not started working on it and are not going to be ready for a week or more, I would like you to unassign this issue and add the ready for prioritization label and put it back into the new issue approval column. Otherwise, we will expect an update.

[mademarc]

Hey @bonniewolfe Thanks for the message and i shall start doing this By next week ASAP as you can see on my current update status

[mademarc]

Progress: Going to start working a assigned medium issue ASAP coming up next week and i just need to re install docker/git on my local machine 1st.

Blockers: No Blockers

Availability: 04/09/2024 ETA: 04/26/202

[ExperimentsInHonesty]

@mademarc I am unassigning you from the issue. When you have your development environment back up and are ready to work on issues, you can message in the hfla-site slack channel for help finding one.

[github-actions[bot]]

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

[mademarc]

Hey @bonniewolfe Thank you for the notice and the heads up. That said i shall your suggestions/recommendations once i have my development environment back up on my end.

[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[bot]]

@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: