DLP: harmonize/reduce horizontal margins/padding around cards

[yarikoptic]

ATM we have

IMHO there is no reason to have keywords narrower. And overall horizontal margins IMHO should be reduced to match width of the description box above them for more harmonious appearance and less waste of screen real estate.

[waxlamp]

While we're at it, the "titling" of those sections is off too: they should not be the title followed by a colon. Can we make those full-fledged metadata cards like the others?

@jtomeck, could you weigh in on this?

[waxlamp]

And overall horizontal margins IMHO should be reduced to match width of the description box above them for more harmonious appearance

I will defer to @jtomeck on this, but it is not a given that all the content should be the same width for reasons of "harmony". Setting off the metadata cards with the extra indentation was (I believe) a deliberate design choice, and one that should probably be kept.

[jtomeck]

IIRC my designs had matching widths. I just dug up the old design and screenshotted it for reference.

I agree with @waxlamp that content doesn't always need to be the same width for the sake of "harmony" or even for the sake of saving screen real estate. Sometimes there's legitimate reasons to have different margins depending on how you want your users to view/interact with the information hierarchically. However, in this case it would look better to me to have them match since the box already has defining styles to set them apart from the other content (border, background color, etc.).

There are 2 issues that I'm seeing. The first is that there is not enough space between the keywords/subject matter blocks and the contributors content is extremely tight and should be loosened up. Second, there are 3 different margins being used. There's the title, description, etc set at the widest width, then the keywords and subject matter is a little narrower, and then the actual content blocks below (contributors) are even narrower. I think everything should stay consistent width, especially because we've employed other means of differentiating between sections (so we don't need different margins to set things apart).

As for the titling comment @waxlamp, can you elaborate a bit? I am not sure what you mean by making them full-fledged metadata cards or what that means for the titles. Thanks!

[waxlamp]

As for the titling comment @waxlamp, can you elaborate a bit? I am not sure what you mean by making them full-fledged metadata cards or what that means for the titles. Thanks!

My thought was to use the same kind of cards as, e.g., the one for Contributors. That is, a card with a key icon, then Keywords, followed by the content (in that case, chips for each keyword).

There might be a better way to display these, but just having the word Keyword with a colon seems wrong.

[jtomeck]

When I designed the DLP, I just assumed that the content of these blocks was different enough from the more indepth metadata to belong in the "title/header" section. As a result I designed them with a different style to fit up in that section (ie. keeping the title on the same line to save vertical space). If the issue is the colon, we can certainly remove it and add an icon. Alternatively we can show JUST an icon, and a tooltip label on hover showing the word "keywords."

However, if it makes sense to the user for these to not be part of the top section, they can be moved into the below section with all the other metadata cards. If we move them down, I recommend displaying them side-by-side since they are not as complex as the other sections and I don't really think they need as much width.

tldr: There are a few options:

1. Remove the colon and add an icon (now that I think about it, maybe make the text a bit more bold if the colon is going away)
2. Remove the title altogether, add an icon, add title back into tooltip on hover of icon
3. Convert these blocks into metadata cards like in the section below displaying side-by-side

[waxlamp]

I think your design justification is valid, and looking at an example once more (e.g. https://dandiarchive.org/dandiset/000026) it makes sense to keep these towards the top, separate from the metadata cards below.

But I do think something akin to (1) would be good, namely: remove the colon and make the title phrase bold (no need for icons). Furthermore, we could consider placing those side-by-side but I don't think that's necessary unless there's a compelling design reason to do it.

What do you think?

[jtomeck]

I don't think that's necessary

I agree