CMS-1367 Improve card styling/UX

Brilliant thanks @brandonkelly

Thanks @i-just!

• when you create a new nested entry in a matrix field (view mode cards) for an existing or brand new root entry, once the nested entry is saved, you can’t use the actions menu (3 dots); the edit icon triggers two edit slideouts, reordering doesn’t seem to work (via diamond icon); once you reload the page (or save the root entry), all of the above starts working as expected

Good catch. Looks like I introduced that in fd65d23 for #16893, so fixed on the 5.7 branch.

• matrix in cards view mode (with the standard title field), when you duplicate a nested entry via actions menu > duplicate, it shows the title as hyperlinked; if you reload, the hyperlink is gone; same with copy and paste; this doesn’t happen when duplicating in the element index view mode;

Fixed!

• if you’ve chosen to show Entry Type in the card and you’re logged in as a non-admin, the Entry Type name is hyperlinked, but you don’t have permissions to edit Entry Types; maybe it would be best not to hyperlink it for non-admins?

Doh, yeah. Updated all components’ getCpEditUrl() methods to return null for non-admins.

• if we’re hyperlinking the Entry Type in the card, should we also hyperlink the Section (to link to the Section’s settings)?

Agreed. Updated section attributes to render as chips.

• on the element index page in table view mode, there seems to be a large gap between the last item on the list and the footer

Are you referring to the 24px top margin on the footer? If so that’s intentional and hasn’t changed in 5.7 or this PR.

Once released, the CKEditor should be updated so that we don’t show the edit button and don’t hyperlink the title in the nested element cards.

Yep. Actually it would be safe to update now. The instance config passed to app/render-elements just needs to include:

showEditButton: false,
hyperlink: false,

Those values will just be ignored if running < 5.7.

Thanks!

Looks like the edit icon still opens up two slideouts (when you create a new nested entry in a matrix field (view mode cards) for an existing or brand new root entry).

Are you referring to the 24px top margin on the footer? If so that’s intentional and hasn’t changed in 5.7 or this PR.

I meant the space between the last item and the footer. It looks about 15px taller on this PR vs 5.x branch. I measured the space between the bottom of the title and the start of the footer, and it’s around 30px on 5.x and 45px on this branch. (The #footer margin-block is 9px on 5.x and 5.7 and 24px on this branch.)

5.x

this branch

Yep. Actually it would be safe to update now. The instance config passed to app/render-elements just needs to include

Yup, I already have it done locally :) I’ll PR it at some point today.

Hi! I've noticed some bugs with the new styles:

1. The active tab in the "Row" block has a white background, instead of a yellow tint.
2. The "Column" blocks, having no color set, are inheriting the yellow shade for their titlebar.
3. The text in those blocks also inherits the text color from the parent "Row" block, so it's not gray but dark brown/yellow instead (might not be immediately noticeable in the screenshot).

In addition to the above I would like to make a proposal to add "White" to the available colors for entry types. Since the default now is implicitly "Gray", it would enable keeping the palette muted but have visual grouping and hierarchy by lightness as opposed to color, like in the example bellow:

Looks like the edit icon still opens up two slideouts (when you create a new nested entry in a matrix field (view mode cards) for an existing or brand new root entry).

@i-just Doh, missed that. Fixed now!

• The active tab in the "Row" block has a white background, instead of a yellow tint.
• The "Column" blocks, having no color set, are inheriting the yellow shade for their titlebar.
• The text in those blocks also inherits the text color from the parent "Row" block, so it's not gray but dark brown/yellow instead (might not be immediately noticeable in the screenshot).

@thupsi Thanks for testing! Fixed.

@brandonkelly I found another small CSS color bug. Text in CKEditor fields inherits the text color of the containing block:

@thupsi Thanks, posted that on CKEditor’s repo: craftcms/ckeditor#390

@brandonkelly not sure if it's just me being a bit picky (apologies if I am!), but the font sizing of Blocks as inline-editable blocks feels a little off now to me. I made a few minor CSS changes using a CP CSS plugin to make a few adjustments.

Before:

After:

The sizing adjustments I made feel a little more in keeping with the spacing of everything else around it in my opinion. Just thought I'd share my opinions, hope that's okay!

@iamtompickering Thank for the feedback. I prefer the smaller font size for entry type labels, as a way to set it apart from the tab labels, but I agree the tightened-up inline-editable blocks looks a bit better. So just made that change for the next release. (ea36d22)

@brandonkelly completely fair and understand the logic behind it! I'm sure I'll learn to love the smaller font size!