#52966 closed enhancement (fixed)
Site Health dashboard panel - css enhancement to improve UI
Reported by: | mblach | Owned by: | 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)
Change History (26)
#2
@
4 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
@
4 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
@
4 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.
#5
@
4 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.
#7
@
4 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
@
4 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.
#11
@
4 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.
Here's how it would like like without the vertical line: 52966.png.
#12
@
4 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
@
4 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.
#14
@
4 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 :)
Dashboard Site Health panel UI improvement