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.

Sign up for GitHub

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

Jump to bottom

Agency selector: Modal in case of 4 or more agencies #2431

Closed
machikoyasuda opened this issue Oct 7, 2024 · 3 comments · Fixed by #2516
Closed

Agency selector: Modal in case of 4 or more agencies #2431

machikoyasuda opened this issue Oct 7, 2024 · 3 comments · Fixed by #2516
Assignees
@lalver1
Labels
front-end HTML/CSS/JavaScript and Django templates

Comments

@machikoyasuda
Copy link
Member

machikoyasuda commented Oct 7, 2024 •
edited by thekaveman
Loading

Status: This ticket needs more design input.

The visual bug

Currently, there are 2 3 agencies live on production. The test site has 4 5 agencies live. This is a ticket that can be worked on when we anticipate to get a 4th agency, or might become unnecessary if at that point, it is decided to re-design the agency selection modal entirely.

Image

The agency link buttons should scale down to 2 buttons in 2 rows, rather than 3 in the first row.

Scenarios to test

All of these scenarios are in the Desktop and Tablet widths, not the Mo

  • Modal with 1 agency
  • Modal with 2 agencies
  • Modal with 3 agencies
  • Modal with 4 agencies
  • Modal with 5 agencies

The desired design

Image

For this screenshot, I achieved it by adding to card-row:

width: 75%;
margin: 0 auto;
@machikoyasuda machikoyasuda added the front-end HTML/CSS/JavaScript and Django templates label Oct 7, 2024
@machikoyasuda machikoyasuda moved this from Todo to Needs shaping in Digital Services Oct 7, 2024
@machikoyasuda
Copy link
Member Author

This results in this kind of rendering when there are 3 agencies:
Image

Would this be preferable? @srhhnry
Image

@srhhnry
Copy link
Member

srhhnry commented Oct 10, 2024

Top design is preferable! To be clear: Center the row with one agency and justify left on rows with two agencies. We will likely need to revisit with more agencies, but this design has always been an interim concept.

@machikoyasuda machikoyasuda changed the title Agency selector: Modal in case of more than 3 agencies Agency selector: Modal in case of 4 or more agencies Oct 16, 2024
@machikoyasuda
Copy link
Member Author

@indexing Putting this ticket on your radar, to be worked on as soon as the 3rd agency is live and the 4th is ready.

@thekaveman thekaveman moved this from Needs shaping to Todo in Digital Services Oct 31, 2024
@lalver1 lalver1 self-assigned this Nov 7, 2024
@lalver1 lalver1 moved this from Todo to In progress in Digital Services Nov 7, 2024
@lalver1 lalver1 mentioned this issue Nov 12, 2024
Merged
@lalver1 lalver1 moved this from In progress to In review in Digital Services Nov 20, 2024
@github-project-automation github-project-automation bot moved this from In review to Done in Digital Services Nov 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lalver1 lalver1

Labels
front-end HTML/CSS/JavaScript and Django templates
Projects
Digital Services
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: modal for 4 or more agencies cal-itp/benefits
3 participants
@machikoyasuda @srhhnry @lalver1