Changeset 45322

Timestamp:

05/16/2019 06:29:47 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.

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

File:

• trunk/src/wp-admin/css/site-health.css (modified) (5 diffs)

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

@@ -269 +269 @@
     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;
 }
 
@@ -298 +301 @@
 
 .health-check-accordion-trigger .title {
-    display: inline-block;
     pointer-events: none;
     font-weight: 600;
+    flex-grow: 1;
 }
 
@@ -317 +320 @@
 
 .health-check-accordion-trigger .badge {
-    float: right;
     padding: 0.1rem 0.5rem 0.15rem;
     color: #32373c;
@@ -378 +380 @@
 
 .health-check-wp-paths-sizes.spinner {
-    position: absolute;
     visibility: visible;
     float: none;
     margin: 0 4px;
+    flex-shrink: 0;
 }
 
@@ -399 +401 @@
     }
 
-    .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;
     }
 }