Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 19 months ago

#52966 closed enhancement (fixed)

Site Health dashboard panel - css enhancement to improve UI

Reported by: mblach's profile mblach Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 5.8 Priority: normal
Severity: normal Version: 5.4
Component: Site Health Keywords: has-screenshots has-patch commit
Focuses: ui, css, administration Cc:

Description

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.

Attachments (8)

Screenshot_2021-04-03 Dashboard ‹ Karolina Jabłońska — WordPress.png (5.4 KB) - added by mblach 3 years ago.
Dashboard Site Health panel UI improvement
sitehealth-one-two-columns.png (42.7 KB) - added by hedgefield 3 years ago.
52966.patch (5.4 KB) - added by Clorith 3 years ago.
norwegian.PNG (20.5 KB) - added by Clorith 3 years ago.
Screenshot of patch applied and Norwegian as the language
russian.PNG (26.3 KB) - added by Clorith 3 years ago.
Screenshot of patch applied and Russian as the language
chinese.PNG (15.3 KB) - added by Clorith 3 years ago.
Screenshot of patch applied and Chinese as the language
52966.png (19.7 KB) - added by SergeyBiryukov 3 years ago.
wp-sitehealth-dashboard-widget-ui-comparison.png (172.2 KB) - added by mblach 3 years ago.
Evolution of original idea

Download all attachments as: .zip

Change History (26)

@mblach
3 years ago

Dashboard Site Health panel UI improvement

#1 @SergeyBiryukov
3 years ago

  • Component changed from Administration to Site Health

#2 @mblach
3 years ago

  • Keywords needs-testing added
  • Summary changed from Site Health dashboard panel - css enhacement to improve UI to Site Health dashboard panel - css enhancement to improve UI

#3 @Clorith
3 years ago

  • Version changed from trunk to 5.4

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.

#4 @hedgefield
3 years ago

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.

Last edited 3 years ago by hedgefield (previous) (diff)

@Clorith
3 years ago

@Clorith
3 years ago

Screenshot of patch applied and Norwegian as the language

@Clorith
3 years ago

Screenshot of patch applied and Russian as the language

@Clorith
3 years ago

Screenshot of patch applied and Chinese as the language

#5 @Clorith
3 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 5.8

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.

#6 @hedgefield
3 years ago

Great, looks good to me! Ship it 🙂

#7 @mblach
3 years ago

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?

#8 @Clorith
3 years ago

  • Keywords commit added; needs-testing removed

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.

#9 @mblach
3 years ago

Ok, nice to hear that!

Thanks for your explanation @Clorith :)

#10 @SergeyBiryukov
3 years ago

  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

@SergeyBiryukov
3 years ago

#11 @SergeyBiryukov
3 years ago

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.

Last edited 3 years ago by SergeyBiryukov (previous) (diff)

#12 @Clorith
3 years ago

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.

#13 @mblach
3 years ago

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.

Last edited 3 years ago by mblach (previous) (diff)

@mblach
3 years ago

Evolution of original idea

#14 @hedgefield
3 years ago

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 :)

#15 @SergeyBiryukov
3 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#16 @Clorith
3 years ago

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.

This ticket was mentioned in Slack in #design by hedgefield. View the logs.


3 years ago

#18 @Clorith
19 months ago

#49530 was marked as a duplicate.

Note: See TracTickets for help on using tickets.