Make WordPress Core

Changeset 45323


Ignore:
Timestamp:
05/16/2019 06:31:43 PM (5 years ago)
Author:
desrosj
Message:

Site Health: Improve alignment and spacing for section headers.

This changes the CSS for Site Health headers to use flexbox, which helps ensure the text is vertically aligned center and consistently spaced in both the Status and Info tabs. It also fixes an issue where the loading spinner GIF was cut off on smaller screens (originally reported in #47203.

Merges [45322] to the 5.2 branch.

Props Presskopp, odminstudios, kjellr, afercia, desrosj, hedgefield, ianbelanger, xavortm.
Fixes #47063.

Location:
branches/5.2
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • branches/5.2

  • branches/5.2/src/wp-admin/css/site-health.css

    r45314 r45323  
    269269    color: #32373c;
    270270    cursor: pointer;
    271     display: block;
     271    display: flex;
    272272    font-weight: 400;
    273273    margin: 0;
    274274    padding: 1em 3.5em 1em 1.5em;
     275    min-height: 46px;
    275276    position: relative;
    276277    text-align: left;
    277278    width: 100%;
     279    align-items: center;
     280    justify-content: space-between;
    278281}
    279282
     
    298301
    299302.health-check-accordion-trigger .title {
    300     display: inline-block;
    301303    pointer-events: none;
    302304    font-weight: 600;
     305    flex-grow: 1;
    303306}
    304307
     
    317320
    318321.health-check-accordion-trigger .badge {
    319     float: right;
    320322    padding: 0.1rem 0.5rem 0.15rem;
    321323    color: #32373c;
     
    378380
    379381.health-check-wp-paths-sizes.spinner {
    380     position: absolute;
    381382    visibility: visible;
    382383    float: none;
    383384    margin: 0 4px;
     385    flex-shrink: 0;
    384386}
    385387
     
    399401    }
    400402
    401     .health-check-accordion-trigger .title {
    402         display: block;
    403         margin-bottom: 1em;
     403    .site-health-issues-wrapper .health-check-accordion-trigger {
     404        flex-direction: column;
     405        align-items: flex-start;
    404406    }
    405407
    406408    .health-check-accordion-trigger .badge {
    407         float: left;
    408         margin: 0;
     409        margin: 1em 0 0;
    409410    }
    410411}
Note: See TracChangeset for help on using the changeset viewer.