WordPress.org
Get WordPress

Make WordPress Core

Changeset 45071


Ignore:
Timestamp:
03/29/2019 06:43:09 PM (6 years ago)
Author:
afercia
Message:

Coding Standards: Clean up the Site Health stylesheet.

  • reduces selectors specificity to avoid over-qualified selectors
  • removes unused rulesets / properties
  • renames some CSS classes

Fixes #46685.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/admin/site-health.js

    r45069 r45071  
    6969        var r, c, pct;
    7070        var $progress = $( '.site-health-progress' );
    71         var $progressCount = $progress.find( '.progress-count' );
     71        var $progressCount = $progress.find( '.site-health-progress-count' );
    7272        var $circle = $( '.site-health-progress svg #bar' );
    7373        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 );

  • trunk/src/wp-admin/css/site-health.css

    r45044 r45071  
    1 body.site-health #wpcontent {
     1.site-health #wpcontent {
    22    padding-left: 0;
    33}
    44
    5 body.site-health .wrap {
    6     margin-right: 0;
    7     margin-left: 0;
    8 }
    9 
    10 body.site-health .wrap h2 {
     5/* Emulates .wrap h1 styling */
     6.health-check-header h1 {
     7    display: inline-block;
     8    font-weight: 600;
     9    margin: 1rem 0.8rem;
     10    font-size: 23px;
     11    padding: 9px 0 4px 0;
     12    line-height: 29px;
     13}
     14
     15.health-check-body h2 {
    1116    padding: 1rem 0;
    12     font-size: 1.3em;
    1317    line-height: 1.4;
    14     font-weight: 600;
    15 }
    16 
    17 body.site-health ul li,
    18 body.site-health ol li {
    19     line-height: 1.5;
    20 }
    21 
    22 body.site-health .health-check-header {
     18}
     19
     20.health-check-body h3 {
     21    padding: 0;
     22    font-weight: 400;
     23}
     24
     25.health-check-header {
    2326    text-align: center;
    24     margin-top: 0;
    25     margin-bottom: 1rem;
     27    margin: 0 0 1rem;
    2628    background: #fff;
    2729    border-bottom: 1px solid #e2e4e7;
    2830}
    2931
    30 body.site-health .health-check-header .title-section {
     32.health-check-title-section {
    3133    display: flex;
    3234    align-items: center;
    3335    justify-content: center;
    34 }
    35 
    36 body.site-health .health-check-header .title-section h1 {
    37     display: inline-block;
    38     font-weight: 600;
    39     margin: 1rem 0.8rem 1rem 0.8rem;
    4036}
    4137
    … …  
    5147}
    5248
    53 .site-health-progress .progress-count {
     49.site-health-progress-count {
    5450    position: absolute;
    5551    display: block;
    … …  
    6561}
    6662
    67 .site-health-progress .progress-count::after {
     63.site-health-progress-count::after {
    6864    content: "";
    6965}
    7066
    71 .site-health-progress.hidden {
    72     display: none;
    73 }
    74 
    75 .site-health-progress.loading .progress-count::after {
     67.site-health-progress.loading .site-health-progress-count::after {
    7668    animation: loadingEllipsis 3s infinite ease-in-out;
    7769}
    … …  
    127119}
    128120
    129 body.site-health .health-check-header .tabs-wrapper {
    130     display: block;
    131 }
    132 
    133 body.site-health .health-check-header .tabs-wrapper .tab {
    134     float: none;
     121.health-check-tab {
    135122    display: inline-block;
    136123    text-decoration: none;
    … …  
    141128}
    142129
    143 body.site-health .health-check-header .tabs-wrapper .tab:focus {
     130.health-check-tab:focus {
    144131    color: #191e23;
    145132    outline: 1px solid #6c7781;
    … …  
    147134}
    148135
    149 body.site-health .health-check-header .tabs-wrapper .tab.active {
     136.health-check-tab.active {
    150137    box-shadow: inset 0 -3px #007cba;
    151138    font-weight: 600;
    152139}
    153140
    154 body.site-health .health-check-body {
     141.health-check-body {
    155142    max-width: 800px;
    156143    margin: 0 auto;
    157144}
    158145
    159 body.site-health .health-check-table thead th:first-child,
    160 body.site-health .health-check-table thead td:first-child {
     146.health-check-table td:first-child {
    161147    width: 30%;
    162148}
    163149
    164 body.site-health .health-check-table tbody td {
     150.health-check-table td {
    165151    width: 70%;
    166152}
    167153
    168 body.site-health .health-check-table tbody td:first-child {
    169     width: 30%;
    170 }
    171 
    172 body.site-health .health-check-table tbody td ul,
    173 body.site-health .health-check-table tbody td ol {
     154.health-check-table ul,
     155.health-check-table ol {
    174156    margin: 0;
    175157}
    176158
    177 .site-health .pass::before,
    178 .site-health .good::before {
     159.health-check-body li {
     160    line-height: 1.5;
     161}
     162
     163.health-check-body .pass::before,
     164.health-check-body .good::before {
    179165    content: "\f147";
    180166    display: inline-block;
    … …  
    184170}
    185171
    186 .site-health .warning::before {
     172.health-check-body .warning::before {
    187173    content: "\f460";
    188174    display: inline-block;
    … …  
    191177}
    192178
    193 .site-health .info::before {
     179.health-check-body .info::before {
    194180    content: "\f348";
    195181    display: inline-block;
    … …  
    198184}
    199185
    200 .site-health .fail::before,
    201 .site-health .error::before {
     186.health-check-body .fail::before,
     187.health-check-body .error::before {
    202188    content: "\f335";
    203189    display: inline-block;
    … …  
    206192}
    207193
    208 body.site-health .spinner {
    209     float: none;
    210 }
    211 
    212194.site-health-copy-buttons {
    213     display: block;
    214195    margin: 1rem 0;
    215196}
    … …  
    229210    display: inline-block;
    230211    height: 28px;
    231     line-height: 28px;
    232 }
    233 
    234 body.site-health .site-status-has-issues {
    235     display: block;
    236 }
    237 
    238 body.site-health .site-status-has-issues.hide {
     212    line-height: 28px;
     213}
     214
     215.site-status-has-issues.hide {
    239216    display: none;
    240217}
    241218
    242 body.site-health h3 {
    243     padding: 0;
    244     font-weight: 400;
    245 }
    246 
    247 body.site-health .view-more {
     219.site-health-view-more {
    248220    text-align: center;
    249221}
    250222
    251 body.site-health .issues-wrapper:first-of-type {
     223.site-health-issues-wrapper:first-of-type {
    252224    margin-top: 3rem;
    253225}
    254226
    255 body.site-health .issues-wrapper {
     227.site-health-issues-wrapper {
    256228    margin-bottom: 3rem;
    257229    margin-top: 2rem;
    258230}
    259231
    260 body.site-health .site-status-all-clear {
     232.site-status-all-clear {
    261233    display: flex;
    262234    flex-direction: column;
    … …  
    270242
    271243@media all and (min-width: 784px) {
    272     body.site-health .site-status-all-clear {
     244    .site-status-all-clear {
    273245        margin: 5rem 0;
    274246    }
    275247}
    276248
    277 body.site-health .site-status-all-clear.hide {
     249.site-status-all-clear.hide {
    278250    display: none;
    279251}
    280252
    281 body.site-health .site-status-all-clear .dashicons {
     253.site-status-all-clear .dashicons {
    282254    font-size: 150px;
    283255    height: 130px;
    … …  
    285257}
    286258
    287 body.site-health .site-status-all-clear .encouragement {
     259.site-status-all-clear .encouragement {
    288260    font-size: 1.5rem;
    289261    font-weight: 600;
    290262}
    291263
    292 body.site-health .site-status-all-clear p {
     264.site-status-all-clear p {
    293265    margin: 0;
    294266}
    295267
    296 body .health-check-accordion {
     268.health-check-accordion {
    297269    border: 1px solid #e2e4e7;
    298270}
    299271
    300 body .health-check-accordion dt {
     272.health-check-accordion dt {
    301273    font-weight: 600;
    302274    border-top: 1px solid #e2e4e7;
    303275}
    304276
    305 body .health-check-accordion dt:first-child {
    306     border-radius: 0.3em 0.3em 0 0;
     277.health-check-accordion dt:first-child {
    307278    border-top: none;
    308279}
    309280
    310 body .health-check-accordion .health-check-accordion-trigger {
     281.health-check-accordion-trigger {
    311282    background: #fff;
    312283    border: 0;
    … …  
    322293}
    323294
    324 body .health-check-accordion .health-check-accordion-trigger:hover,
    325 body .health-check-accordion .health-check-accordion-trigger:active {
     295.health-check-accordion-trigger:hover,
     296.health-check-accordion-trigger:active {
    326297    background: #f8f9f9;
    327298}
    328299
    329 body .health-check-accordion .health-check-accordion-trigger:focus {
     300.health-check-accordion-trigger:focus {
    330301    color: #191e23;
    331302    border: none;
    … …  
    335306}
    336307
    337 body .health-check-accordion .health-check-accordion-trigger .title {
     308.health-check-accordion-trigger .title {
    338309    display: inline-block;
    339310    pointer-events: none;
    … …  
    341312}
    342313
    343 body .health-check-accordion .health-check-accordion-trigger .icon {
     314.health-check-accordion-trigger .icon {
    344315    border: solid #191e23;
    345316    border-width: 0 2px 2px 0;
    … …  
    353324}
    354325
    355 body .health-check-accordion .health-check-accordion-trigger .badge {
     326.health-check-accordion-trigger .badge {
    356327    display: inline-block;
    357328    padding: 0.1rem 0.5rem 0.15rem;
    … …  
    363334}
    364335
    365 body .health-check-accordion .health-check-accordion-trigger .badge.blue {
     336.health-check-accordion-trigger .badge.blue {
    366337    background-color: #0073af;
    367338    color: #fff;
    368339}
    369340
    370 body .health-check-accordion .health-check-accordion-trigger .badge.orange {
     341.health-check-accordion-trigger .badge.orange {
    371342    background-color: #ffb900;
    372343    color: #000;
    373344}
    374345
    375 body .health-check-accordion .health-check-accordion-trigger .badge.red {
     346.health-check-accordion-trigger .badge.red {
    376347    background-color: #dc3232;
    377348    color: #fff;
    378349}
    379350
    380 body .health-check-accordion .health-check-accordion-trigger .badge.green {
     351.health-check-accordion-trigger .badge.green {
    381352    background-color: #40860a;
    382353    color: #fff;
    383354}
    384355
    385 body .health-check-accordion .health-check-accordion-trigger .badge.pink {
     356.health-check-accordion-trigger .badge.pink {
    386357    background-color: #f4b0fc;
    387358    color: #000;
    388359}
    389360
    390 body .health-check-accordion .health-check-accordion-trigger .badge.gray {
     361.health-check-accordion-trigger .badge.gray {
    391362    background-color: #ccc;
    392363    color: #000;
    393364}
    394365
    395 body .health-check-accordion .health-check-accordion-trigger .badge.light-blue {
     366.health-check-accordion-trigger .badge.light-blue {
    396367    background-color: #10e9fb;
    397368    color: #000;
    398369}
    399370
    400 body .health-check-accordion .health-check-accordion-trigger .badge.light-green {
     371.health-check-accordion-trigger .badge.light-green {
    401372    background-color: #60f999;
    402373    color: #000;
    403374}
    404375
    405 body .health-check-accordion .health-check-accordion-trigger[aria-expanded="true"] .icon {
     376.health-check-accordion-trigger[aria-expanded="true"] .icon {
    406377    transform: translateY(-30%) rotate(-135deg)
    407378}
    408379
    409 body .health-check-accordion .health-check-accordion-panel {
     380.health-check-accordion-panel {
    410381    margin: 0;
    411382    padding: 1em 1.5em;
    … …  
    413384}
    414385
    415 body .health-check-accordion .health-check-accordion-panel > div {
    416     display: block;
    417 }
    418 
    419 body .health-check-accordion .health-check-accordion-panel[hidden] {
     386.health-check-accordion-panel[hidden] {
    420387    display: none;
    421388}
    422389
    423 body .health-check-accordion dl dd {
    424     margin: 0 0 0.5em 2em;
    425 }
    426 
    427390@media screen and (max-width: 782px) {
    428     body.site-health .health-check-body {
     391    .health-check-body {
    429392        margin: 0 12px;
    430         width: initial;
     393        width: auto;
    431394    }
    432395}
    … …  
    434397/* The breakpoint is usually at 960px, the additional space is to allow for the margin. */
    435398@media only screen and (max-width: 1004px) {
    436     body.site-health .health-check-body {
     399    .health-check-body {
    437400        margin: 0 22px;
    438         width: initial;
    439     }
    440 }
     401        width: auto;
     402    }
     403}

  • trunk/src/wp-admin/site-health-info.php

    r45070 r45071  
    3131?>
    3232
    33     <div class="wrap health-check-header">
    34         <div class="title-section">
     33    <div class="health-check-header">
     34        <div class="health-check-title-section">
    3535            <h1>
    3636                <?php _ex( 'Site Health', 'Menu, Section and Page Title' ); ?>
    … …  
    4343                </svg>
    4444                <span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
    45                 <span class="progress-count"></span>
     45                <span class="site-health-progress-count"></span>
    4646            </div>
    4747        </div>
    4848
    49         <nav class="tabs-wrapper" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
    50             <a href="<?php echo esc_url( admin_url( 'site-health.php' ) ); ?>" class="tab">
     49        <nav class="health-check-tabs-wrapper" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
     50            <a href="<?php echo esc_url( admin_url( 'site-health.php' ) ); ?>" class="health-check-tab">
    5151                <?php _e( 'Status' ); ?>
    5252            </a>
    5353
    54             <a href="<?php echo esc_url( admin_url( 'site-health.php?tab=debug' ) ); ?>" class="tab active" aria-current="true">
     54            <a href="<?php echo esc_url( admin_url( 'site-health.php?tab=debug' ) ); ?>" class="health-check-tab active" aria-current="true">
    5555                <?php _e( 'Info' ); ?>
    5656            </a>
    … …  
    6060    </div>
    6161
    62     <div class="wrap health-check-body">
     62    <div class="health-check-body">
    6363        <?php
    6464        WP_Debug_Data::check_for_updates();

  • trunk/src/wp-admin/site-health.php

    r45070 r45071  
    3636?>
    3737
    38 <div class="wrap health-check-header">
    39     <div class="title-section">
     38<div class="health-check-header">
     39    <div class="health-check-title-section">
    4040        <h1>
    4141            <?php _ex( 'Site Health', 'Menu, Section and Page Title' ); ?>
    … …  
    4848            </svg>
    4949            <span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
    50             <span class="progress-count"></span>
     50            <span class="site-health-progress-count"></span>
    5151        </div>
    5252    </div>
    5353
    54     <nav class="tabs-wrapper" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
    55         <a href="<?php echo esc_url( admin_url( 'site-health.php' ) ); ?>" class="tab active" aria-current="true">
     54    <nav class="health-check-tabs-wrapper" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
     55        <a href="<?php echo esc_url( admin_url( 'site-health.php' ) ); ?>" class="health-check-tab active" aria-current="true">
    5656            <?php _e( 'Status' ); ?>
    5757        </a>
    5858
    59         <a href="<?php echo esc_url( admin_url( 'site-health.php?tab=debug' ) ); ?>" class="tab">
     59        <a href="<?php echo esc_url( admin_url( 'site-health.php?tab=debug' ) ); ?>" class="health-check-tab">
    6060            <?php _e( 'Info' ); ?>
    6161        </a>
    … …  
    6565</div>
    6666
    67 <div class="wrap health-check-body">
     67<div class="health-check-body">
    6868    <div class="site-status-all-clear hide">
    6969        <p class="icon">
    … …  
    8787        <p><?php _e( 'The site health check shows critical information about your WordPress configuration and items that require your attention.' ); ?></p>
    8888
    89         <div class="issues-wrapper" id="health-check-issues-critical">
     89        <div class="site-health-issues-wrapper" id="health-check-issues-critical">
    9090            <h3>
    9191                <span class="issue-count">0</span> <?php _e( 'Critical issues' ); ?>
    … …  
    9595        </div>
    9696
    97         <div class="issues-wrapper" id="health-check-issues-recommended">
     97        <div class="site-health-issues-wrapper" id="health-check-issues-recommended">
    9898            <h3>
    9999                <span class="issue-count">0</span> <?php _e( 'Recommended improvements' ); ?>
    … …  
    104104    </div>
    105105
    106     <div class="view-more">
     106    <div class="site-health-view-more">
    107107        <button type="button" class="button site-health-view-passed" aria-expanded="false" aria-controls="health-check-issues-good">
    108108            <?php _e( 'Passed tests' ); ?>
    … …  
    110110    </div>
    111111
    112     <div class="issues-wrapper hidden" id="health-check-issues-good">
     112    <div class="site-health-issues-wrapper hidden" id="health-check-issues-good">
    113113        <h3>
    114114            <span class="issue-count">0</span> <?php _e( 'Items with no issues detected' ); ?>
Note: See TracChangeset for help on using the changeset viewer.