Skip to content
Permalink
Browse files

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.

git-svn-id: https://develop.svn.wordpress.org/branches/5.2@45323 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information...
desrosj committed May 16, 2019
1 parent f293764 commit 88def8ac5d71341332cfa30e91e56acd40a81e87
Showing with 10 additions and 9 deletions.
  1. +10 −9 src/wp-admin/css/site-health.css
@@ -268,13 +268,16 @@
border: 0;
color: #32373c;
cursor: pointer;
display: block;
display: flex;
font-weight: 400;
margin: 0;
padding: 1em 3.5em 1em 1.5em;
min-height: 46px;
position: relative;
text-align: left;
width: 100%;
align-items: center;
justify-content: space-between;
}

.wp-core-ui .button.site-health-view-passed {
@@ -297,9 +300,9 @@
}

.health-check-accordion-trigger .title {
display: inline-block;
pointer-events: none;
font-weight: 600;
flex-grow: 1;
}

.health-check-accordion-trigger .icon,
@@ -316,7 +319,6 @@
}

.health-check-accordion-trigger .badge {
float: right;
padding: 0.1rem 0.5rem 0.15rem;
color: #32373c;
font-weight: 600;
@@ -377,10 +379,10 @@
}

.health-check-wp-paths-sizes.spinner {
position: absolute;
visibility: visible;
float: none;
margin: 0 4px;
flex-shrink: 0;
}

@media screen and (max-width: 782px) {
@@ -398,14 +400,13 @@
margin-left: 10px;
}

.health-check-accordion-trigger .title {
display: block;
margin-bottom: 1em;
.site-health-issues-wrapper .health-check-accordion-trigger {
flex-direction: column;
align-items: flex-start;
}

.health-check-accordion-trigger .badge {
float: left;
margin: 0;
margin: 1em 0 0;
}
}

0 comments on commit 88def8a

Please sign in to comment.
You can’t perform that action at this time.