[Enhancement] - add responsive mobile view for documents table

ogorman89 commented 3 months ago

Describe the Current Behavior/Feature:

Implement a mobile layout for the profile document table using cards. With the existing list of objects implemented in PASS, while it would end up showing the metadata for all documents stored within the Documents container, users could technically still trigger user permissions to block other users from viewing specific files. As such, we could still utilize this list to generate our cards.

In PASS, we have an example of how cards are implemented from a list of objects, check out the existing implementation of message previews from our custom Inbox/Outbox and the MessagePreview component itself.

Rationale:

implements the desired layout from figma design

Proposed Changes:

add a mobile view for the document table
~should switch to mobile when the table starts to have a horizontal scroll around 900px~
mobile view should be cards like the current figma design [Update: see issue #626, also see: link to figma]
should be responsive
For the responsive breakpoint we could use the existing MUI breakpoint at theme.breakpoints.down('sm') which can be obtained by importing theme and calling const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));.
should use MUI cards

Possible Drawbacks:

N/A

Alternatives Considered:

N/A

Additional Context:

N/A

joshua-cornett commented 3 months ago

Suppose I'll take a stab at this

leekahung commented 2 months ago

Updated issue description by including additional information that could be useful for implementation.

andycwilliams commented 2 months ago

If you haven't already @joshua-cornett , you can check out how we style messages (should be in MessagePreview.jsx). The base of that might be useful when creating cards for documents. And if we want, we could even create a basic card component to import into both Messages and Documents, similar to how FormSection.jsx works.

If we do decide to go that route, such a refactoring can definitely be left for a separate issue. Just want to mention this since it could save us some effort in the long run. Especially since the Contacts table will likely need cards very similar to the Documents table here as well.

andycwilliams commented 1 month ago

It hasn't been made super clear, so I wanted to mention how there will need to be additional work to finish the full design from Figma.

On mobile at least, there is an additional screen to display the details for the selected contact or document (a driver's license, in this example). In Messages, the user simply clicks on a message to expand it and read the contents. That wouldn't work as well for these, since they may contain much more information (including images).

However, I think that can be left for a separate issue and not be included in this one. The scope might already be a bit too broad, or at least not detailed enough. Maybe even leave it for after MVP.

Edit: Proposed this in #644.

andycwilliams commented 1 week ago

Hey. Just wondering if there's any update with this. Thanks.

codeforpdx / PASS