codeforpdx / PASS

PASS project - with HMIS module integration
MIT License
30 stars 26 forks source link

Enhancement: Add mobile cards view to profile document list #502

Closed Jared-Krajewski closed 4 months ago

Jared-Krajewski commented 11 months ago

Describe the Current Behavior/Feature:

After the Table (see screenshot below of existing design) gets converted into an MUI data grid, we'll probably want a better mobile view experience for the document list.

Screenshot 2023-11-07 at 7 46 08 PM

For a while, a card design has been under discussion, see screenshot from Issue #222 (which was for contactsList, formerly clientList). However, the designs has yet to be implemented.

Screenshot 2023-08-23 at 1 28 42 PM

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'));.

Rationale:

While MUI data grids might look great for Desktop, it might be better to adopt a card design instead for mobile, even if it lack some of the features like sorting and filtering. But, we could always create a custom function for sorting and filtering for those cards in the future, if needed.

leekahung commented 4 months ago

Duplicate issue. Updated issue in #606.