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. Built from https://develop.svn.wordpress.org/trunk@47266 git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
parent
c85c8f5235
commit
0fcc994a8f
|
|
@ -308,7 +308,7 @@
|
|||
|
||||
.media-frame-toolbar .media-toolbar {
|
||||
top: auto;
|
||||
bottom: -45px;
|
||||
bottom: -47px;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
border-top: 1px solid #ddd;
|
||||
|
|
@ -347,7 +347,7 @@
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
width: 267px;
|
||||
padding: 0 16px 24px;
|
||||
padding: 0 16px;
|
||||
z-index: 75;
|
||||
background: #f3f3f3;
|
||||
border-right: 1px solid #ddd;
|
||||
|
|
@ -355,6 +355,17 @@
|
|||
-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;
|
||||
}
|
||||
|
||||
.hide-toolbar .media-sidebar {
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
@ -747,8 +758,6 @@
|
|||
position: absolute;
|
||||
right: 200px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
z-index: 100;
|
||||
bottom: 60px;
|
||||
height: auto;
|
||||
|
|
@ -1851,7 +1860,7 @@
|
|||
}
|
||||
|
||||
.media-modal .imgedit-wrap .imgedit-panel-content {
|
||||
padding: 16px;
|
||||
padding: 16px 16px 0 16px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 282px;
|
||||
|
|
@ -1860,10 +1869,18 @@
|
|||
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-submit {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-wrap .imgedit-settings {
|
||||
background: #f3f3f3;
|
||||
border-right: 1px solid #ddd;
|
||||
padding: 20px 16px 16px;
|
||||
padding: 20px 16px 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -1872,6 +1889,14 @@
|
|||
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;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-group {
|
||||
background: none;
|
||||
border: none;
|
||||
|
|
@ -2002,10 +2027,22 @@
|
|||
right: 0;
|
||||
left: 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;
|
||||
}
|
||||
|
||||
.media-embed .embed-link-settings {
|
||||
/* avoid Firefox to give focus to the embed preview container parent */
|
||||
overflow: visible;
|
||||
|
|
@ -2050,6 +2087,10 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings,
|
||||
.image-details .embed-media-settings div {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -2670,7 +2711,7 @@
|
|||
}
|
||||
|
||||
.media-frame-toolbar .media-toolbar {
|
||||
bottom: -48px;
|
||||
bottom: -54px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -307,7 +307,7 @@
|
|||
|
||||
.media-frame-toolbar .media-toolbar {
|
||||
top: auto;
|
||||
bottom: -45px;
|
||||
bottom: -47px;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
border-top: 1px solid #ddd;
|
||||
|
|
@ -346,7 +346,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
width: 267px;
|
||||
padding: 0 16px 24px;
|
||||
padding: 0 16px;
|
||||
z-index: 75;
|
||||
background: #f3f3f3;
|
||||
border-left: 1px solid #ddd;
|
||||
|
|
@ -354,6 +354,17 @@
|
|||
-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;
|
||||
}
|
||||
|
||||
.hide-toolbar .media-sidebar {
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
@ -746,8 +757,6 @@
|
|||
position: absolute;
|
||||
left: 200px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
z-index: 100;
|
||||
bottom: 60px;
|
||||
height: auto;
|
||||
|
|
@ -1850,7 +1859,7 @@
|
|||
}
|
||||
|
||||
.media-modal .imgedit-wrap .imgedit-panel-content {
|
||||
padding: 16px;
|
||||
padding: 16px 16px 0 16px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 282px;
|
||||
|
|
@ -1859,10 +1868,18 @@
|
|||
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-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;
|
||||
right: 0;
|
||||
|
|
@ -1871,6 +1888,14 @@
|
|||
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;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-group {
|
||||
background: none;
|
||||
border: none;
|
||||
|
|
@ -2001,10 +2026,22 @@
|
|||
left: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
.media-embed .embed-link-settings {
|
||||
/* avoid Firefox to give focus to the embed preview container parent */
|
||||
overflow: visible;
|
||||
|
|
@ -2049,6 +2086,10 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings,
|
||||
.image-details .embed-media-settings div {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -2669,7 +2710,7 @@
|
|||
}
|
||||
|
||||
.media-frame-toolbar .media-toolbar {
|
||||
bottom: -48px;
|
||||
bottom: -54px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8935,6 +8935,9 @@ AttachmentDisplay = Settings.extend(/** @lends wp.media.view.Settings.Attachment
|
|||
}
|
||||
|
||||
$input.closest( '.setting' ).removeClass( 'hidden' );
|
||||
if ( $input.length ) {
|
||||
$input[0].scrollIntoView();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -13,7 +13,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.4-alpha-47265';
|
||||
$wp_version = '5.4-alpha-47266';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue