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

Officer Search UI Mobile Responsiveness #317

Merged
merged 11 commits into from
Jan 20, 2024

Conversation

joshua-rdrgz
Copy link
Collaborator

This PR contains all the updates to make the officer search page mobile responsive. Happy to make any other changes if needed. Here's a quick rundown of all the changes:

Major adjustments made:

  • header mobile responsive
    • mobile menu icon changed to hamburger (three lines)
  • incident/officer search page mobile responsive
    • removed the <Map /> and <BubbleChart /> components on mobile, leaving just the table
    • table is horizontally scrollable when screen sizes get too small
    • pagination component separated from the table itself so that it persists on the screen when horizontally scrolling the table
    • mobile page headers are added to give context to what table the user is looking at
    • tooltips were overhauled using "react-tooltip" library to account for mobile tooltip positioning

Minor adjustments made:

  • "Allegations" officer column header is shortened to "Alle..." on screens with shorter width
  • "Save" officer column is removed per last week's meeting.
  • Test snapshots updated to reflect UI changes.

Screenshots:

Screenshot 2024-01-13 at 2 22 55 PM Screenshot 2024-01-13 at 2 26 20 PM Screenshot 2024-01-13 at 2 24 00 PM Screenshot 2024-01-13 at 2 24 15 PM Screenshot 2024-01-13 at 2 24 36 PM Screenshot 2024-01-13 at 2 25 48 PM Screenshot 2024-01-13 at 2 28 28 PM Screenshot 2024-01-13 at 2 29 36 PM

adjust HTML structure and CSS media queries
add `nav.module.css` for organization
bring in react-tooltip dependency for managing tooltip positioning
shorten "allegations" column header text when on smaller screens
remove "save" column from table
update snapshot for different tooltip implementation
update snapshot for burger menu on mobile instead of ellipses
DMalone87
DMalone87 previously approved these changes Jan 17, 2024
Copy link
Collaborator

@DMalone87 DMalone87 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

@joshua-rdrgz
Copy link
Collaborator Author

Went ahead and fixed the merge conflicts, I used Abel's mock data strategy instead of the hardcoded values 👍🏽

@joshua-rdrgz joshua-rdrgz added frontend enhancement New feature or request labels Jan 19, 2024
@DMalone87 DMalone87 merged commit 2f891cc into codeforboston:main Jan 20, 2024
3 checks passed
@DMalone87
Copy link
Collaborator

Thanks! Merged

@joshua-rdrgz joshua-rdrgz deleted the josh/officer-ui-mobile branch January 20, 2024 18:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request frontend
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants