Use CSS grid for card grid layout

[philippschmitt]

This PR implements CSS grid for the card layout to address usability concerns in #427

The implementation uses subgrid to show image placeholders across all columns when there is at least one card with an image in a certain row; and collapses the placeholders when there is no image in a row.

This behavior could be extended further to make sure headings, summaries, date times are also always aligned, but that's not implemented currently.

Demo

This is a draft. @m-mohr Could you test this and share examples for edge cases that need to be addressed before merging?

[m-mohr]

Awesome, thanks @philippschmitt ! That's the most promising proposal I've seen so far.

Here are some findings. Not sure what's possible, but let me just document what I find: (links should work with a dev env)

1. Boxes a little too high and missing spacing between the rows
   
   We can probably remove the min-height: 200px from the .item-card.queued class.

2. Also sometimes there is some overlapping:
   

3. It seems to have a side-effect on the Collection box in items, the header and the box get merged into one row.
   

4. The number of "columns" seems to be a bit too high (or the width of the cards too low). I'd say they should usually not get less wide than ~350px (which is roughly the space where the longer date/time ranges don't break), e.g. with a display width of 1920px you get 6 boxes (in the past: 4) - I think upping the minmax(300px, ...) to 350px gives more pleasant results.

5. The grid items try to fill the space, which leads to weird looking alignment sometimes:
   

6. The gray background color sometimes comes up when potentially unintended: - maybe that's fine, not sure. Maybe the image should be centered vertically? Not super sure...
   

7. Aligning the position of datetime, description and title could potentially make sense.

I'll leave it there for now and do further investigations after we fixed the first issues.

[philippschmitt]

Thank you for the feedback @m-mohr

• I fixed 1,2,3,4. See individual commits.

5. The grid items try to fill the space, which leads to weird looking alignment sometimes:

It's nontrivial (at least without more investigation) to prevent a single card from stretching across the entire horizontal space. However, I think the layout problem you noted can be mitigated by left-aligning the text on the cards. This is something I wanted to propose regardless. IMO it increases readability of the cards and looks neater overall.

6. The gray background color sometimes comes up when potentially unintended: - maybe that's fine, not sure. Maybe the image should be centered vertically? Not super sure...

I made a change in 79da502 to center the image if it's smaller than the available space. We could hide the gray background in such cases but I think it gives a little structure to the layout. Unless it creates an issue with some data, I'd keep it.

7. Aligning the position of datetime, description and title could potentially make sense.

I tried this out in d1ea484. (Only tested on catalogs!) My takeaway is that it sometimes helps a little bit and sometimes it creates chaos. Because of this I'm in favor of rolling back this commit and not doing this. What do you think? Examples below:

It works well in this example where one title needs two rows:

It looks bad in this example:

[m-mohr]

Hi @philippschmitt,

thank you for the updates! I've just merged the upstream changes into this branch and then started consolidating the CSS & code across Catalog and Item so that hopefully we have less inconsistencies / better maintenance. I also cleaned the .card-columns CSS definitions that were now unused.

I agree with all your changes and suggestions, even 7 is not too bad I think. I guess that's a matter of taste? Or is there any UI/UX best practice that would disallow the current implementation?

I've found one additional bug. There are some pixels from the fourth line showing, which was not the case before:

Any idea why that is? It works without issues on the same catalog in the old version.

[saidy-moregeo]

Hi @philippschmitt, while testing I also came across the following UI/UX issues.

1. Description alignment issue: The description is centered on rows with shorter catalog descriptions. This can be reproduced using the BON in a Box STAC catalog.
2. Grid layout for Features component: The grid layout should also be applied to the Features component. @m-mohr can provide a catalog link to test this.

[philippschmitt]

I agree with all your changes and suggestions, even 7 is not too bad I think. I guess that's a matter of taste? Or is there any UI/UX best practice that would disallow the current implementation?

If you like it, let's try it out — I'm not aware of a best practice. And looking at it again I also like it more now :)

There are some pixels from the fourth line showing, which was not the case before. Any idea why that is? It works without issues on the same catalog in the old version.

I don't quite understand why it happens but I found a solution, I think, in this article discussing workarounds until line-clamp has cross-browser support. I pushed a fix to set max-height of the description text to 3 * line-height, i.e. three lines.

[philippschmitt]

@saidy-moregeo I took a look at the BON in a Box catalog but can't reproduce the issue. Could you please send a link, screenshot, and what browser you're seeing this in?

@m-mohr Could you please send a link to reproduce this request:

Grid layout for Features component: The grid layout should also be applied to the Features component. @m-mohr can provide a catalog link to test this.

[m-mohr]

@philippschmitt Thanks for the updates, will test it.

The "Features component" task is an internal task for us, we need to update some other places once we have a final solution for items and catalogs in place.

[saidy-moregeo]

@philippschmitt I was referring to the following: in rows with a mixture of cards with different descriptions content size, those with shorter descriptions have noticeably larger spacing between the title and description compared to cards with longer content. However, @m-mohr clarified that this is intentional.

link: http://localhost:8080/external/stac.geobon.org/