Show cards in column mode or in deck mode?

[christophfriedrich]

The results of a search returning 7 items are placed like this:

POST payload: {"datetime":"2024-03-04T16:00:00.000Z/2024-03-22T16:00:00.000Z","bbox":[9.855059787160437,53.706217520227575,9.958056613332312,53.746842207166445],"limit":12,"collections":["sentinel-2-c1-l2a"]}

[m-mohr]

This is somewhat intentional. We are using Bootstrap Cards and they have two "layout" modes:

• columns
• decks

Decks (and default) are row-based and make the cards all the same height.

Columns are obviously column-based and allow flexible-height cards. We use columns and this leads to this behaviour because the columns are filled one by one and we don't have enough elements to fill the last column.

We chose columns because we have issues wrapping in deck and default mode correctly once the cards got too small.

This is maybe something to revisit with a CSS guru who can make the deck-based wrapping work. ;-) But the other question, should the cards all be equal height? Maybe not?

[christophfriedrich]

Ah okay, that explains it. IMO the column mode is absolutely not intuitive. I would 100% expect results to be ordered from left to right, then top to bottom, just as we read text (in Western culture) and how file explorers do it etc. Hence me writing this issue.

Yes, there is newer UI that puts content by columns, e.g. image sites, but I think that's mostly because they often have content with very mixed dimensions -- which is not really much the case here, is it? To me it feels that thumbnails are always squares anyway. And searches will often give results from a consistently structured collection, so very homogeneous appearance. Also, our UI is not about filling as much screen space as possible with something that might catch the user's attention to keep them on our ad-run site longer, but about rendering technical things cleanly. Therefore my answer to

the other question, should the cards all be equal height?

is a fairly strong: "I don't really see a good point why they couldn't be all equal height, especially not one that outweighs the irritation caused by the current behaviour."

---

Regarding the issue blocking my desired behaviour:

We chose columns because we have issues wrapping in deck and default mode correctly once the cards got too small. This is maybe something to revisit with a CSS guru who can make the deck-based wrapping work. ;-)

If you tell me what issues exactly you're having I'm happy to see what I can do ;)

[christophfriedrich]

@m-mohr Feedback has been given ;) If we agree on wanting to switch to rows, I would invest the time to fix that CSS issue.