Changeset 43674

Timestamp:

10/05/2018 02:50:31 PM (8 years ago)

Author:

adamsilverstein

Message:

Try Gutenberg callout: improve formatting for Internet Explorer 11.

Correct an issue where the layout of the "Try Gutenberg" callout added in #41316 falls apart under IE11.

Props kjellr, ianbelanger, pbiron, Luciano Croce, belcherj, ryansommers.
Fixes #44742.

File:

• branches/4.9/src/wp-admin/css/dashboard.css (modified) (4 diffs)

branches/4.9/src/wp-admin/css/dashboard.css

@@ -227 +227 @@
 
 .try-gutenberg-panel .try-gutenberg-panel-column-container {
-        display: -ms-grid;
-        display: grid;
-        -ms-grid-columns: 36% 32% 32%;
-        grid-template-columns: 36% 32% 32%;
+        display: flex;
         margin-bottom: 13px;
 }
 
+@supports (display: grid) {
+        .try-gutenberg-panel .try-gutenberg-panel-column-container {
+                display: -ms-grid;
+                display: grid;
+                -ms-grid-columns: 36% 32% 32%;
+                grid-template-columns: 36% 32% 32%;
+        }
+}
+
+.try-gutenberg-panel .try-gutenberg-panel-image-column {
+        width: 36%;
+}
+
+@supports (display: grid) {
+        .try-gutenberg-panel .try-gutenberg-panel-image-column {
+                width: auto;
+        }
+}
+
 .try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) {
-        display: -ms-grid;
-        display: grid;
-        -ms-grid-rows: auto 100px;
-        grid-template-rows: auto 100px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 32%;
+}
+
+@supports (display: grid) {
+        .try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) {
+                display: -ms-grid;
+                display: grid;
+                -ms-grid-rows: auto 100px;
+                grid-template-rows: auto 100px;
+                width: auto;
+        }
+}
+
+.try-gutenberg-panel .try-gutenberg-action {
+        height: 100px;
+}
+
+@supports (display: grid) {
+        .try-gutenberg-panel .try-gutenberg-action {
+                height: auto;
+        }
 }
 
@@ -256 +292 @@
 
 .welcome-panel .welcome-panel-column ul {
-                margin: 0.8em 1em 1em 0;
+        margin: 0.8em 1em 1em 0;
 }
 
@@ -1270 +1306 @@
                 display: none;
         }
+
+        .try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) {
+                width: 50%;
+        }
+
+        @supports (display: grid) {
+                .try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) {
+                        width: auto;
+                }
+        }
 }
 
@@ -1281 +1327 @@
 
         .try-gutenberg-panel .try-gutenberg-panel-column-container {
-                -ms-grid-columns: 100%;
-                grid-template-columns: 100%;
+                flex-wrap: wrap;
+        }
+
+        @supports (display: grid) {
+                .try-gutenberg-panel .try-gutenberg-panel-column-container {
+                        -ms-grid-columns: 100%;
+                        grid-template-columns: 100%;
+                }
+        }
+
+        .try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) {
+                width: 100%;
         }