Issue 648/contacts mobile view

andycwilliams commented 2 weeks ago

This PR:

Resolves #648

Beginning this as a draft PR to get feedback, primarily about visuals and usability.

1. Switches from MUI Table to a new custom Card and Grid-based component on smaller viewports 2. Breaks up Contacts List Table into smaller parts (similar to Navbar)
3. Adds the "copy web ID" function as an option

Screenshots (if applicable):

Smaller screen:

Smaller screen (open menu):

Smallest screen:

Additional Context (optional):

The styling is based on my own best judgment. I tried adhering to the Figma design while retaining as much information and action from the Table as possible.

Future Steps/PRs Needed to Finish This Work (optional):

Finish abstracting ContactsListTable into multiple, smaller components.

Write tests for each component.

Ensure clicking on the profile icon works as intended.

Issues needing discussion/feedback (optional):

1. Feedback on styling. Is it intuitive and user-friendly? 2. Does everything perform as intended (e.g. adding or deleting a contact, clicking through to the contact's profile page)? Want to ensure it operates as expected under as many circumstances as possible.

russfraze commented 5 days ago

Something I'm noticing is when you click on the dropdown for a contact, you can click the profile section and it seems like it should go to the profile but it doesn't unless the actual icon is clicked.

Does it seem like clicking the section should work as well as the icon itself?

https://github.com/codeforpdx/PASS/assets/81979567/03dbaa81-2b4d-46a0-8d35-98960d5aa8fb

russfraze commented 5 days ago

When checking out the smaller screens in the dev tools ( this is 375 X 667 ) it seems like the pod url overlaps the icon for the dropdown. At larger sizes when there is space between the url and the icon, it reads that ACTIONS is the label for each of those icons, but I'm wondering if we should preserve that space to make it clear on mobile. Screenshot 2024-06-25 at 1 06 37 PM

leekahung commented 5 days ago

When checking out the smaller screens in the dev tools ( this is 375 X 667 ) it seems like the pod url overlaps the icon for the dropdown. At larger sizes when there is space between the url and the icon, it reads that ACTIONS is the label for each of those icons, but I'm wondering if we should preserve that space to make it clear on mobile.

Preserving the spacing would be good I think and let's users have a clear area to use for interacting with the actions button

Could make a size condition for it

leekahung commented 5 days ago

See comments for feedback on draft 👍

andycwilliams commented 5 days ago

Something I'm noticing is when you click on the dropdown for a contact, you can click the profile section and it seems like it should go to the profile but it doesn't unless the actual icon is clicked.

Does it seem like clicking the section should work as well as the icon itself?

Screen.Recording.2024-06-25.at.12.58.25.PM.mov

Yeah I note this in my draft post. It has to do with the way ContactProfileIcon is coded, which is different than the way the other actions.

codeforpdx / PASS