Change preservation tasks from table to cards

[djjuhasz]

I've switched the preservation tasks over to cards (note: the Bootstrap 5 card syntax has changed from the docs @fiver-watson linked in #1077).

I think the current implementation looks pretty good at desktop screen sizes, e.g:

But the card "columns" are overflowing on narrow screen widths :(

I'll do some more reading on how to fix the overflow problem and maybe @jraddaoui will have some ideas too.

[djjuhasz]

The columns also vary in width when the screen is too narrow :(

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 54.75%. Comparing base (eee1934) to head (3491515).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1086      +/-   ##
==========================================
+ Coverage   54.69%   54.75%   +0.06%     
==========================================
  Files         105      105              
  Lines        7696     7696              
==========================================
+ Hits         4209     4214       +5     
+ Misses       3228     3225       -3     
+ Partials      259      257       -2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[djjuhasz]

Here's an example with errors:

[djjuhasz]

Oops, I fixed the line breaks on the error message text:

[djjuhasz]

With @jraddaoui's help I've fixed the problem with the card values breaking out of the card body

[fiver-watson]

@djjuhasz No idea how many of my suggestions are actually viable in terms of responsiveness within the BS5 framework etc, but I did include some initial suggestions to manage narrow screens on the original ticket, including some mockups. Those included:

• On completed tasks, show only the completed time. If tasks are still in progress, show when it was started
• When the card is collapsed, use overflow / ellipses for task titles and notes. When expanded, we can switch to wrapping instead to show the full content (if that is possible!)
• For error and pending messages - as we slowly and incrementally implement updates to these (see Epic, Epic: Content validation messages are not always clear to operators preprocessing-sfa#43), error and pending messages will have a bolded summary first, and then details below. In a condensed view, only show the first line

Also added a response w some other relevant ideas on the ticket conversation, here

Either way, great progress so far!

[djjuhasz]

@fiver-watson Thank, I missed your mockup and suggestions on how to display cards on a narrow screen. I've responded to your suggestions below:

• On completed tasks, show only the completed time. If tasks are still in progress, show when it was started

I think this is a good idea that should be extended to the full width display. I think showing both the start and completed time for each task in the collapsed view is unnecessary and adds extra visual noise. If an operator wants to see the started time for a completed task I think it's reasonable that they click on the card to expand it to get that information.

• When the card is collapsed, use overflow / ellipses for task titles and notes. When expanded, we can switch to wrapping instead to show the full content (if that is possible!)

I think we implemented something like this in AtoM and I think it's a good idea. I'm not sure if eliding the text can be accomplished with pure CSS or if it would require Javascript to implement. Either way, I believe it's possible but I will have to do some reading to figure out how to implement it.

• For error and pending messages - as we slowly and incrementally implement updates to these (see Epic #43, error and pending messages will have a bolded summary first, and then details below. In a condensed view, only show the first line

I think we should only show the first line in the collapsed card at all screen widths.

[jraddaoui]

For overflow/ellipses, check https://getbootstrap.com/docs/5.3/helpers/text-truncation/, we use it in a few places already.

[jraddaoui]

One easy thing that could also help in small widths, I think the title font size is too big. If we use strong text, it looks better to me with the default font size.

[djjuhasz]

For overflow/ellipses, check https://getbootstrap.com/docs/5.3/helpers/text-truncation/, we use it in a few places already.

@jraddaoui unfortunately "text-truncate" doesn't work with display: flex so it isn't working with the card flexbox layout. :(

[djjuhasz]

I made some progress today, but moving the "status" badge to it's own column in flexbox layout causes it to break out of the card on narrow screen widths again :(

I did manage to fix this at one point by allowing the task label to wrap to the next line. The ideal fix would be truncating the text (with ellipsis) but text truncation isn't working with the the flex divs. :(

[fiver-watson]

Hi @djjuhasz, thanks so much for your persistence on this issue (i know UI design stuff can be really finnicky) and for your very helpful thoughts!

I am fine with all of your suggestions in your comment above - they make good sense and I agree that they will improve the user experience. Thanks!

I think we should only show the first line in the collapsed card at all screen widths.

This totally makes sense - I guess I just wanted to make sure that regardless of screen width, AT LEAST the first line is shown for errors and warnings, where it's important to be able to get an initial sense of why / what's going on at a glance. In most cases, I think that success messages are not going to be more than 1 line anyway.

[djjuhasz]

I've reached a good stopping point where the cards nicely display on a large screen or a small screen and I think this is a good first iteration.

I will come back to this later to add the ability to expand and collapse the cards to show detailed log and error information.

[mcantelon]

Kudos for taming the eternal dragon of responsive layout! My understanding of this realm is limited, but seems good to me!