Changeset 43674

Timestamp:

10/05/2018 02:50:31 PM (6 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%;
     }