Changeset 47266

Timestamp:

02/11/2020 04:30:13 PM (5 years ago)

Author:

afercia

Message:

Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers.

Implementation of bottom padding in overflow content differs across browsers. See ​https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method.

• uses a CSS after pseudo element or simply a bottom margin to reserve some bottom spacing
• removes a couple leftovers from [40428]
• fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border

Props sabernhardt, afercia.
See #40152.
Fixes #48378.

Location:

trunk/src

Files:

• js/media/views/settings/attachment-display.js (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (10 diffs)

trunk/src/js/media/views/settings/attachment-display.js

@@ -84 +84 @@
 
         $input.closest( '.setting' ).removeClass( 'hidden' );
+        if ( $input.length ) {
+            $input[0].scrollIntoView();
+        }
     }
 });

trunk/src/wp-includes/css/media-views.css

@@ -308 +308 @@
 .media-frame-toolbar .media-toolbar {
     top: auto;
-    bottom: -45px;
+    bottom: -47px;
     height: auto;
     overflow: visible;
@@ -347 +347 @@
     bottom: 0;
     width: 267px;
-    padding: 0 16px 24px;
+    padding: 0 16px;
     z-index: 75;
     background: #f3f3f3;
@@ -353 +353 @@
     overflow: auto;
     -webkit-overflow-scrolling: touch;
+}
+
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-sidebar::after {
+    content: "";
+    display: flex;
+    clear: both;
+    height: 24px;
 }
 
@@ -747 +758 @@
     left: 200px;
     right: 0;
-    bottom: 0;
-    height: 60px;
     z-index: 100;
     bottom: 60px;
@@ -1851 +1860 @@
 
 .media-modal .imgedit-wrap .imgedit-panel-content {
-    padding: 16px;
+    padding: 16px 16px 0 16px;
     position: absolute;
     top: 0;
@@ -1860 +1869 @@
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-modal .imgedit-wrap .imgedit-submit {
+    margin-bottom: 16px;
+}
+
 .media-modal .imgedit-wrap .imgedit-settings {
     background: #f3f3f3;
     border-left: 1px solid #ddd;
-    padding: 20px 16px 16px;
+    padding: 20px 16px 0;
     position: absolute;
     top: 0;
@@ -1870 +1887 @@
     width: 250px;
     overflow: auto;
+}
+
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-modal .imgedit-wrap .imgedit-save-target {
+    margin: 8px 0 24px;
 }
 
@@ -2002 +2027 @@
     right: 0;
     bottom: 0;
-    padding: 0 16px 32px;
+    padding: 0 16px;
     overflow: auto;
+}
+
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.embed-link-settings::after,
+.embed-media-settings::after {
+    content: "";
+    display: flex;
+    clear: both;
+    height: 24px;
 }
 
@@ -2048 +2085 @@
     overflow: visible;
     padding: 0;
+}
+
+.image-details .embed-media-settings::after {
+    content: none;
 }
 
@@ -2670 +2711 @@
 
     .media-frame-toolbar .media-toolbar {
-        bottom: -48px;
+        bottom: -54px;
     }
 }