Site Health dashboard panel - css enhancement to improve UI

[mblach]

Hi, i want to propose some css code, to little improve dashboard Site Health panel interface.

Please review CSS Code below, and effect of changes in attachment.

#dashboard_site_health .site-health-progress-label {
  margin: 0;
}
#dashboard_site_health .health-check-title-section {
  justify-content: left;
  width: auto;
  display: block;
  float: left;
  text-align: center;
  border-right: 1px solid #8c8f94;
  padding-right: 10px;
  padding-top: 5px;
  margin-right: 10px;
  height: 50px;
}

Regards MBlach.

[mblach]

Dashboard Site Health panel UI improvement

[Clorith]

Hi there, and welcome to the WordPress trac!

I like the idea you're going for, I'm going to ping @hedgefield, who did the UI/UX work for the Site Health component, to get a more experienced opinion, but I kinda like it.

One thing that needs accounted for is how this will scale when translated, on both sides of the separator line.

[hedgefield]

Hey, welcome! That's a good idea, on wider screens it would look much nicer side by side like that.

I took the liberty to rewrite it using css grids, to get a slightly more flexible result for translations and make it easy to switch to a one-column layout for smaller screens, as the text gets a bit squashed otherwise with two columns.

For .health-check-title-section, just add:
text-align: center;
padding-top: 8px;
display: block;

Then, wrap the two <p>'s below it in a new div, with these css rules:
border-left: 1px solid #c3c4c7;
padding-left: 16px;

Next, wrap those two divs in another div with these css rules:
display: grid;
grid-template-columns: 1fr 2fr;
grid-auto-rows: minmax(64px, auto);
column-gap: 16px;
align-items: center;

And finally, define a media query breakpoint for <480px where it switches from this two-column layout to a single column layout (to do that, all you have to do is change the value of grid-template-columns from 1fr 2fr to 100% and turn off the border and padding on the second div.)

Then we'll have to test the possible states in a few translations to see if it holds up.

[Clorith]

Screenshot of patch applied and Norwegian as the language

[Clorith]

Screenshot of patch applied and Russian as the language

[Clorith]

Screenshot of patch applied and Chinese as the language

[Clorith]

52966.patch​ takes the styles as refined by @hedgefield, and I included screenshots in 3 very different languages, as Tim we already had screenshots in English, I've included Norwegian, Russian, And Chinese, which were the three most different languages I could think of to test with, and they all seem to work well with the proposed adjustment here.

[hedgefield]

Great, looks good to me! Ship it 🙂

[mblach]

Thanks fellas for your job, it looks great and seems to scale well now.

But I'm new here so can anyone tell me what is the procedure, how we can merge this enhancement with official WP?

[Clorith]

I've set the Milestone field to 5.8, and added the workflow keyword has-patch to the ticket, which is part of the flow to get something included in an upcoming release. The has-patch lets others know there is code attached to this ticket that can be reviewed. What often happens after this is that a Component Maintainer will test the code, and may add the workflow keyword commit if they think the code is ready to be added to WordPress. The Milestone field is which version one hopes to have the code included in.

Once that's all in place, a Core Committer can confirm the patch, and add it to WordPress.

[mblach]

Ok, nice to hear that!

Thanks for your explanation @Clorith :)

[SergeyBiryukov]

Thanks for the ticket and the patch!

Would it be OK to remove the vertical border here? I don't think it adds much benefit, and none of the other dashboard widgets have a vertical line like that, so it looks a bit out of place to me.

Here's how it would like like without the vertical line: 52966.png​.

[Clorith]

I suspect the border is there to hint at separation if the text strings should at any point become long enough, but will lean on @hedgefield for a final sanity call on this.

As for differing slightly from other widgets, I'm not too worried, the Site Health component in general took some bold steps in differing from other administrative screens when first introduced after all.

[mblach]

I think this kind of border is nice for dashboard UI, some of elements already have similar decorative border on the left edge, in some way it corespond to that, but if it will be leave there, it should be darker than @hedgefield proposed, i think it should be like textarea field border color.

I attached graphic project, which present a evolution of original idea placed in dashboard ui environment, maybe it will help make final decision - wp-sitehealth-dashboard-widget-ui-comparison.png

In my humble opinion the 1st and 3rd screen at attached project looks good. Border looks good in 2 rows layout like on 1st screen of the project, but it will need additional code improvment and testing. So finally i think the 3rd screen like proposed by @SergeyBiryukov can be good enough for this moment, but honestly, first project looks better for me, of course it's my subjective opinion.

[mblach]

Evolution of original idea

[hedgefield]

Let's remove the border, enough whitespace will create that separation as well, and looking at @Clorith's screenshots that seems to be in order. This also makes it a little bit easier to switch between the horizontal and vertical layouts as you won't have hide/show the border then :)

[SergeyBiryukov]

In 50833:

Site Health: Improve the appearance of Site Health Status dashboard widget.

This better utilizes the available screen space on wider screens.

Props mblach, hedgefield, Clorith.
Fixes #52966.

[Clorith]

In 50845:

Site Health: Remove status text indentation.

This removes the left-side margin from the status text in the Site Health dashboard widget, which caused the text to be slightly indented, and not centered under the status indicator circle.

Follow-up to [50833].

See #52966.

[Clorith]

#49530 was marked as a duplicate.