Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the drop downs on Wins page to avoid unnecessary wrapping #6272

Open
3 tasks done
Thinking-Panda opened this issue Feb 9, 2024 · 22 comments · May be fixed by #6766
Open
3 tasks done

Improve the drop downs on Wins page to avoid unnecessary wrapping #6272

Thinking-Panda opened this issue Feb 9, 2024 · 22 comments · May be fixed by #6766
Assignees
Labels
Complexity: Medium P-Feature: Wins Page https://www.hackforla.org/wins/ role: front end Tasks for front end developers size: 1pt Can be done in 4-6 hours

Comments

@Thinking-Panda
Copy link
Member

Thinking-Panda commented Feb 9, 2024

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)

ER6225

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

@Thinking-Panda Thinking-Panda added role: front end Tasks for front end developers Complexity: Medium P-Feature: Wins Page https://www.hackforla.org/wins/ ready for dev lead Issues that tech leads or merge team members need to follow up on size: 1pt Can be done in 4-6 hours Draft Issue is still in the process of being created labels Feb 9, 2024
@HackforLABot HackforLABot added this to New Issue Approval in Project Board Feb 9, 2024
@Thinking-Panda

This comment was marked as outdated.

@roslynwythe

This comment was marked as outdated.

@roslynwythe roslynwythe removed the ready for dev lead Issues that tech leads or merge team members need to follow up on label Feb 16, 2024

This comment was marked as outdated.

@ExperimentsInHonesty

This comment was marked as outdated.

@Thinking-Panda

This comment was marked as outdated.

@roslynwythe roslynwythe added Ready for Prioritization and removed Draft Issue is still in the process of being created labels Feb 28, 2024
@ExperimentsInHonesty ExperimentsInHonesty moved this from New Issue Approval to In progress (actively working) in Project Board Mar 1, 2024

This comment was marked as outdated.

@github-actions github-actions bot added the To Update ! No update has been provided label Mar 8, 2024

This comment was marked as outdated.

@Thinking-Panda

This comment was marked as outdated.

@mademarc

This comment was marked as outdated.

@github-actions github-actions bot removed the To Update ! No update has been provided label Mar 15, 2024

This comment was marked as outdated.

@github-actions github-actions bot added the To Update ! No update has been provided label Mar 22, 2024
@mademarc

This comment was marked as outdated.

@github-actions github-actions bot added To Update ! No update has been provided and removed To Update ! No update has been provided labels Mar 29, 2024

This comment was marked as outdated.

@ExperimentsInHonesty

This comment was marked as outdated.

@mademarc

This comment was marked as outdated.

@mademarc

This comment was marked as outdated.

@ExperimentsInHonesty

This comment was marked as outdated.

@ExperimentsInHonesty ExperimentsInHonesty removed the To Update ! No update has been provided label Apr 7, 2024
@ExperimentsInHonesty ExperimentsInHonesty moved this from In progress (actively working) to Prioritized backlog in Project Board Apr 7, 2024
@gdkoo gdkoo self-assigned this Apr 9, 2024
Copy link

github-actions bot commented Apr 9, 2024

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
Copy link
Member

gdkoo commented Apr 9, 2024

Availability: Wednesday and Thursday evening
ETA: April 17

@mademarc

This comment was marked as outdated.

@gdkoo
Copy link
Member

gdkoo commented Apr 12, 2024

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.

@JackCasica JackCasica moved this from Prioritized backlog to In progress (actively working) in Project Board Apr 14, 2024
@github-actions github-actions bot added the To Update ! No update has been provided label Apr 19, 2024
Copy link

@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
Copy link
Member

gdkoo commented Apr 21, 2024

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:
desktop-nowrap
Tablet view after changes:
tablet-nowrap2

@github-actions github-actions bot removed the To Update ! No update has been provided label Apr 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Complexity: Medium P-Feature: Wins Page https://www.hackforla.org/wins/ role: front end Tasks for front end developers size: 1pt Can be done in 4-6 hours
Projects
Project Board
  
In progress (actively working)
Development

Successfully merging a pull request may close this issue.

5 participants