Site Health: Modify the grading indicator to remove percentage score in favor of a "Good" or "Should be improved" status.
This removes arbitrary confusion about what the numbers mean. Props Clorith, hedgefield, Cybr, arena, DavidAnderson, earnjam, daveshine, Otto42, azaozz, asadkn, KARTHOST, tigertech, maximejobin, johnbillion, raboodesign, ramiy, afragen. Fixes #47046. git-svn-id: https://develop.svn.wordpress.org/trunk@46106 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov
parent
08df15ab58
commit
4f2fc80f65
|
|
@ -87,10 +87,11 @@ jQuery( document ).ready( function( $ ) {
|
|||
function RecalculateProgression() {
|
||||
var r, c, pct;
|
||||
var $progress = $( '.site-health-progress' );
|
||||
var $progressCount = $progress.find( '.site-health-progress-count' );
|
||||
var $wrapper = $progress.closest( '.site-health-progress-wrapper' );
|
||||
var $progressLabel = $( '.site-health-progress-label', $wrapper );
|
||||
var $circle = $( '.site-health-progress svg #bar' );
|
||||
var totalTests = parseInt( SiteHealth.site_status.issues.good, 0 ) + parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
|
||||
var failedTests = parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
|
||||
var failedTests = ( parseInt( SiteHealth.site_status.issues.recommended, 0 ) * 0.5 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
|
||||
var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 );
|
||||
|
||||
if ( 0 === totalTests ) {
|
||||
|
|
@ -98,7 +99,7 @@ jQuery( document ).ready( function( $ ) {
|
|||
return;
|
||||
}
|
||||
|
||||
$progress.removeClass( 'loading' );
|
||||
$wrapper.removeClass( 'loading' );
|
||||
|
||||
r = $circle.attr( 'r' );
|
||||
c = Math.PI * ( r * 2 );
|
||||
|
|
@ -122,21 +123,18 @@ jQuery( document ).ready( function( $ ) {
|
|||
$( '#health-check-issues-recommended' ).addClass( 'hidden' );
|
||||
}
|
||||
|
||||
if ( 50 <= val ) {
|
||||
$circle.addClass( 'orange' ).removeClass( 'red' );
|
||||
}
|
||||
if ( 80 <= val && 0 === parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
|
||||
$wrapper.addClass( 'green' ).removeClass( 'orange' );
|
||||
|
||||
if ( 90 <= val ) {
|
||||
$circle.addClass( 'green' ).removeClass( 'orange' );
|
||||
}
|
||||
$progressLabel.text( __( 'Good' ) );
|
||||
wp.a11y.speak( __( 'All site health tests have finished running. Your site is looking good, and the results are now available on the page.' ) );
|
||||
} else {
|
||||
$wrapper.addClass( 'orange' ).removeClass( 'green' );
|
||||
|
||||
if ( 100 === val ) {
|
||||
$( '.site-status-all-clear' ).removeClass( 'hide' );
|
||||
$( '.site-status-has-issues' ).addClass( 'hide' );
|
||||
$progressLabel.text( __( 'Should be improved' ) );
|
||||
wp.a11y.speak( __( 'All site health tests have finished running. There are items that should be addressed, and the results are now available on the page.' ) );
|
||||
}
|
||||
|
||||
$progressCount.text( val + '%' );
|
||||
|
||||
if ( ! isDebugTab ) {
|
||||
$.post(
|
||||
ajaxurl,
|
||||
|
|
@ -147,11 +145,10 @@ jQuery( document ).ready( function( $ ) {
|
|||
}
|
||||
);
|
||||
|
||||
wp.a11y.speak( sprintf(
|
||||
// translators: %s: The percentage score for the tests.
|
||||
__( 'All site health tests have finished running. Your site scored %s, and the results are now available on the page.' ),
|
||||
val + '%'
|
||||
) );
|
||||
if ( 100 === val ) {
|
||||
$( '.site-status-all-clear' ).removeClass( 'hide' );
|
||||
$( '.site-status-has-issues' ).addClass( 'hide' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
.health-check-header h1 {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
margin: 1rem 0.8rem;
|
||||
margin: 0 0.8rem 1rem;
|
||||
font-size: 23px;
|
||||
padding: 9px 0 4px 0;
|
||||
line-height: 1.3;
|
||||
|
|
@ -37,10 +37,14 @@
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.site-health-progress-wrapper {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.site-health-progress {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
|
|
@ -62,15 +66,7 @@
|
|||
font-size: 2em;
|
||||
}
|
||||
|
||||
.site-health-progress-count::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.site-health-progress.loading .site-health-progress-count::after {
|
||||
content: "···";
|
||||
}
|
||||
|
||||
.site-health-progress.loading svg #bar {
|
||||
.loading .site-health-progress svg #bar {
|
||||
stroke-dashoffset: 0;
|
||||
stroke: #adc5d2;
|
||||
animation: loadingPulse 3s infinite ease-in-out;
|
||||
|
|
@ -88,13 +84,25 @@
|
|||
stroke: #dc3232;
|
||||
}
|
||||
|
||||
.site-health-progress svg #bar.green {
|
||||
.green .site-health-progress #bar {
|
||||
stroke: #46b450;
|
||||
}
|
||||
.green .site-health-progress .site-health-progress-label {
|
||||
color: #46b450;
|
||||
}
|
||||
|
||||
.site-health-progress svg #bar.orange {
|
||||
.orange .site-health-progress #bar {
|
||||
stroke: #ffb900;
|
||||
}
|
||||
.orange .site-health-progress .site-health-progress-label {
|
||||
color: #ffb900;
|
||||
}
|
||||
|
||||
.site-health-progress-label {
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
|
||||
@keyframes loadingPulse {
|
||||
0% {
|
||||
|
|
|
|||
|
|
@ -34,14 +34,17 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
|
|||
<h1>
|
||||
<?php _e( 'Site Health' ); ?>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="site-health-progress hide-if-no-js loading">
|
||||
<div class="health-check-title-section site-health-progress-wrapper loading hide-if-no-js">
|
||||
<div class="site-health-progress">
|
||||
<svg role="img" aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
|
||||
<circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
|
||||
</svg>
|
||||
<span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
|
||||
<span class="site-health-progress-count"></span>
|
||||
</div>
|
||||
<div class="site-health-progress-label">
|
||||
<?php _e( 'Results are still loading…' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -39,14 +39,17 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
|
|||
<h1>
|
||||
<?php _e( 'Site Health' ); ?>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="site-health-progress hide-if-no-js loading">
|
||||
<div class="health-check-title-section site-health-progress-wrapper loading hide-if-no-js">
|
||||
<div class="site-health-progress">
|
||||
<svg role="img" aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
|
||||
<circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
|
||||
</svg>
|
||||
<span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
|
||||
<span class="site-health-progress-count"></span>
|
||||
</div>
|
||||
<div class="site-health-progress-label">
|
||||
<?php _e( 'Results are still loading…' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue