sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.

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

git-svn-id: https://develop.svn.wordpress.org/trunk@45322 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jonathan Desrosiers 2019-05-16 18:29:47 +00:00
parent 7bd0450833
commit b7a79cf126
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/wp-admin/css/site-health.css
View File

@ -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;
}
}