sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Customize: Remove left-margin guard from edit shortcuts and adjust for small screen sizes.

Browse Source 
Removes the `.customize-partial-edit-shortcut-left-margin` class which was not effective on some themes, created a worse experience for other themes, and which did not recalculate when the preview was reflowed or resized. Now some small-width media queries are added to handle common cases while more dramatic issues can be handled by the theme. Also renames `Partial.positionEditShortcut()`to `Partial.addEditShortcutToPlacement()` which is a more accurate description of its function.

Props sirbrillig, sstoqnov.
See #38651, #27403.


git-svn-id: https://develop.svn.wordpress.org/trunk@39202 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2016-11-11 09:46:47 +00:00
parent 9d73e7a311
commit 5f9c6ef4ae
2 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/wp-includes/css/customize-preview.css
View File

@ -35,11 +35,16 @@
border: 1px solid #0085ba;
}
/* Styles for the actual shortcut */
/**
* Styles for the actual shortcut
*
* Note that some properties are overly verbose to prevent theme interference.
*/
.widget .customize-partial-edit-shortcut button,
.customize-partial-edit-shortcut button {
position: absolute;
left: -36px;
left: -30px;
top: 2px;
color: #fff;
width: 30px;
height: 30px;
@ -101,10 +106,6 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut bu
visibility: hidden;
}
.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
left: 0;
}
@-webkit-keyframes customize-partial-edit-shortcut-bounce-appear {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
@ -242,7 +243,23 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut bu
}
@media screen and (max-width:800px) {
.widget .customize-partial-edit-shortcut button,
.customize-partial-edit-shortcut button {
left: -18px; /* Assume there will be less of a margin available on smaller screens */
left: -32px;
}
}
@media screen and (max-width:320px) {
.site-title {
padding-left: 10px;
}
.widget-area .widget {
padding-left: 10px;
}
.widget .customize-partial-edit-shortcut button,
.customize-partial-edit-shortcut button {
left: -30px;
}
}

12
src/wp-includes/js/customize-selective-refresh.js
View File

@ -118,7 +118,7 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
return;
}
$shortcut = partial.createEditShortcut();
partial.positionEditShortcut( placement, $shortcut );
partial.addEditShortcutToPlacement( placement, $shortcut );
$shortcut.on( 'click', function( event ) {
event.preventDefault();
event.stopPropagation();
@ -127,9 +127,7 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
},
/**
* Position an edit shortcut for the placement container.
*
* The shortcut must already be created and added to the page.
* Add an edit shortcut to the placement container.
*
* @since 4.7
*
@ -137,14 +135,12 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
* @param {jQuery} $editShortcut The shortcut element as a jQuery object.
* @returns {void}
*/
positionEditShortcut: function( placement, $editShortcut ) {
var $placementContainer = $( placement.container ), $editButton;
addEditShortcutToPlacement: function( placement, $editShortcut ) {
var $placementContainer = $( placement.container );
$placementContainer.prepend( $editShortcut );
if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
$editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
}
$editButton = $editShortcut.find( 'button' );
$editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editButton.offset().left < 2 );
},
/**