WordPress.org
Get WordPress

Make WordPress Core

Changeset 45071


Ignore:
Timestamp:
03/29/2019 06:43:09 PM (8 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.