eCR Library Table Formatting | Non-Integrated eCR Viewer

[gordonfarrell]

User Story

As somebody viewing the eCR Library table, I want to see a user-friendly table, so that I can easily understand and scan through the eCRs my public health department has received

Acceptance Criteria

The table must match the Figma designs linked below, specifically:

• [x] There should be a drop shadow below the table header (Y offset: -4px, Blur: 4px, Color: 000000 10% opacity)
• [x] Alternating grey and white rows, making sure colors in table match Figma designs
• [x] The table should have rounded corners (4px)
• [ ] The column widths should look visually similar to the designs. There should be a minimum width on each column such that the column header stays on one line when making the table narrower. If the user makes the browser narrower than the min width, the table should not get any narrower (the user would have to just scroll right and left on the page to see the full table)
• [x] The table should be responsive to resize when the browser is resized, so the padding around the table should be held constant
• [x] Set table height so that scrolling is inside the table, not the whole page

Scenarios

Use the scenarios below to help in testing the ticket before/during/after design review to ensure it meets the criteria above

Scenario 1:

• I resize my browser window to be wider and taller
• The table smoothly resizes to match the browser window, maintaining constant padding between the table and the edges of the page

Scenario 2:

• I resize my browser window to be narrower
• The columns all decrease in width, until they reach their minimum width
• All column headers stay on one line
• When I make it super narrow, the browser forces me to scroll right and left to see the full table

Scenario 3:

• I try to scroll while hovering outside of the table
• I should not be able to scroll
• I try scrolling within the table area, below the table header
• I am able to scroll through all of the eCRs, and I see a scroll bar to indicate how far I am in the results
• I also see that every row alternates in background color between white and light gray

Design Notes

Link to Figma design in Dev mode Link to Figma prototype

Screenshots below should not be used for working on this ticket - always refer to Figma design for most up-to-date designs:

Focus of this ticket is just on styling for the highlighted red area. not worrying about pagination components, header, page title, or search at this time (and checking the actual contents of the table is a different ticket):

[angelathe]

Alternating grey and white rows, making sure colors in table match Figma designs

@sarahtress For the alternating grey/white rows, the USWDS component starts with a grey row and then alternates to white -- but in the Figma designs, first row is white and then alternates to grey. Do you have a strong preference for this?

[sarahtress]

Alternating grey and white rows, making sure colors in table match Figma designs

@sarahtress For the alternating grey/white rows, the USWDS component starts with a grey row and then alternates to white -- but in the Figma designs, first row is white and then alternates to grey. Do you have a strong preference for this?

if it's not too much work to make it white first, I prefer it, but if it's gonna be a total pain, then it's not that important

[angelathe]

FYI, I'm closing this issue because the designs have changed. Changes made in the related PR will be carried over into https://github.com/CDCgov/phdi/issues/2244.