Customize: Fix positioning of outer section (e.g. publish settings) on large screen sizes.

Also fix preview link CSS for desktop and mobile.

Props sayedwp, bduclos.
See #39896.
Fixes #42051.

Built from https://develop.svn.wordpress.org/trunk@41677


git-svn-id: http://core.svn.wordpress.org/trunk@41511 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2017-10-02 18:40:48 +00:00
parent 2e3581c3ad
commit df7af1ee21
6 changed files with 49 additions and 37 deletions

View File

@ -42,7 +42,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
} }
#customize-outer-theme-controls-wrapper { #customize-sidebar-outer-content {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -56,10 +56,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
background: #eee; background: #eee;
transition: right .18s; transition: right .18s;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
} height: 100%;
.outer-section-open .wp-full-overlay.expanded {
margin-right: 300px;
} }
#customize-theme-controls .control-section-outer { #customize-theme-controls .control-section-outer {
@ -74,7 +71,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
display: block; display: block;
} }
.outer-section-open .wp-full-overlay.expanded #customize-outer-theme-controls-wrapper { .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
visibility: visible; visibility: visible;
right: 0; right: 0;
transition: right .18s; transition: right .18s;
@ -85,11 +82,8 @@ body:not(.ready) #customize-save-button-wrapper .save {
} }
.outer-section-open .wp-full-overlay.expanded #customize-preview { .outer-section-open .wp-full-overlay.expanded #customize-preview {
opacity: 0.4;
}
body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
right: 300px; right: 300px;
opacity: 0.4;
} }
#customize-outer-theme-controls li.notice { #customize-outer-theme-controls li.notice {
@ -199,12 +193,17 @@ body.trashing #publish-settings {
display: block; display: block;
} }
.customize-copy-preview-link { .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
margin: 0;
position: absolute; position: absolute;
bottom: 9px; bottom: 9px;
left: 0; left: 0;
} }
.preview-link-wrapper {
position: relative;
}
.customize-copy-preview-link:before, .customize-copy-preview-link:before,
.customize-copy-preview-link:after { .customize-copy-preview-link:after {
content: ""; content: "";
@ -245,7 +244,7 @@ body.trashing #publish-settings {
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
width: 217px; width: 90%;
bottom: 14px; bottom: 14px;
font-size: 14px; font-size: 14px;
text-decoration: none; text-decoration: none;
@ -318,7 +317,7 @@ body.trashing #publish-settings {
} }
#customize-control-changeset_preview_link { #customize-control-changeset_preview_link {
margin-top: 20px; margin-top: 6px;
} }
#customize-control-changeset_status { #customize-control-changeset_status {
@ -330,7 +329,7 @@ body.trashing #publish-settings {
box-sizing: content-box; box-sizing: content-box;
width: 100%; width: 100%;
margin-right: -12px; margin-right: -12px;
padding: 12px 12px 18px; padding: 12px 12px 10px;
background: #ffffff; background: #ffffff;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
margin-bottom: 0; margin-bottom: 0;
@ -2711,6 +2710,14 @@ body.adding-widget .add-new-widget:before,
line-height: 3.2; line-height: 3.2;
} }
#customize-control-changeset_preview_link a {
bottom: 16px;
}
.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
bottom: 10px;
}
.wp-core-ui.wp-customizer .button { .wp-core-ui.wp-customizer .button {
margin-top: 12px; margin-top: 12px;
} }
@ -2810,7 +2817,7 @@ body.adding-widget .add-new-widget:before,
body.adding-widget div#available-widgets, body.adding-widget div#available-widgets,
body.adding-menu-items div#available-menu-items, body.adding-menu-items div#available-menu-items,
body.outer-section-open div#customize-outer-theme-controls-wrapper { body.outer-section-open div#customize-sidebar-outer-content {
top: 46px; top: 46px;
right: 0; right: 0;
z-index: 10; z-index: 10;

File diff suppressed because one or more lines are too long

View File

@ -42,7 +42,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
} }
#customize-outer-theme-controls-wrapper { #customize-sidebar-outer-content {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -56,10 +56,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
background: #eee; background: #eee;
transition: left .18s; transition: left .18s;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
} height: 100%;
.outer-section-open .wp-full-overlay.expanded {
margin-left: 300px;
} }
#customize-theme-controls .control-section-outer { #customize-theme-controls .control-section-outer {
@ -74,7 +71,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
display: block; display: block;
} }
.outer-section-open .wp-full-overlay.expanded #customize-outer-theme-controls-wrapper { .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
visibility: visible; visibility: visible;
left: 0; left: 0;
transition: left .18s; transition: left .18s;
@ -85,11 +82,8 @@ body:not(.ready) #customize-save-button-wrapper .save {
} }
.outer-section-open .wp-full-overlay.expanded #customize-preview { .outer-section-open .wp-full-overlay.expanded #customize-preview {
opacity: 0.4;
}
body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
left: 300px; left: 300px;
opacity: 0.4;
} }
#customize-outer-theme-controls li.notice { #customize-outer-theme-controls li.notice {
@ -199,12 +193,17 @@ body.trashing #publish-settings {
display: block; display: block;
} }
.customize-copy-preview-link { .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
margin: 0;
position: absolute; position: absolute;
bottom: 9px; bottom: 9px;
right: 0; right: 0;
} }
.preview-link-wrapper {
position: relative;
}
.customize-copy-preview-link:before, .customize-copy-preview-link:before,
.customize-copy-preview-link:after { .customize-copy-preview-link:after {
content: ""; content: "";
@ -245,7 +244,7 @@ body.trashing #publish-settings {
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
width: 217px; width: 90%;
bottom: 14px; bottom: 14px;
font-size: 14px; font-size: 14px;
text-decoration: none; text-decoration: none;
@ -318,7 +317,7 @@ body.trashing #publish-settings {
} }
#customize-control-changeset_preview_link { #customize-control-changeset_preview_link {
margin-top: 20px; margin-top: 6px;
} }
#customize-control-changeset_status { #customize-control-changeset_status {
@ -330,7 +329,7 @@ body.trashing #publish-settings {
box-sizing: content-box; box-sizing: content-box;
width: 100%; width: 100%;
margin-left: -12px; margin-left: -12px;
padding: 12px 12px 18px; padding: 12px 12px 10px;
background: #ffffff; background: #ffffff;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
margin-bottom: 0; margin-bottom: 0;
@ -2711,6 +2710,14 @@ body.adding-widget .add-new-widget:before,
line-height: 3.2; line-height: 3.2;
} }
#customize-control-changeset_preview_link a {
bottom: 16px;
}
.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
bottom: 10px;
}
.wp-core-ui.wp-customizer .button { .wp-core-ui.wp-customizer .button {
margin-top: 12px; margin-top: 12px;
} }
@ -2810,7 +2817,7 @@ body.adding-widget .add-new-widget:before,
body.adding-widget div#available-widgets, body.adding-widget div#available-widgets,
body.adding-menu-items div#available-menu-items, body.adding-menu-items div#available-menu-items,
body.outer-section-open div#customize-outer-theme-controls-wrapper { body.outer-section-open div#customize-sidebar-outer-content {
top: 46px; top: 46px;
left: 0; left: 0;
z-index: 10; z-index: 10;

File diff suppressed because one or more lines are too long

View File

@ -218,10 +218,8 @@ do_action( 'customize_controls_print_scripts' );
</form> </form>
<div id="customize-preview" class="wp-full-overlay-main"></div> <div id="customize-preview" class="wp-full-overlay-main"></div>
<div id="customize-sidebar-outer-content"> <div id="customize-sidebar-outer-content">
<div id="customize-outer-theme-controls-wrapper"> <div id="customize-outer-theme-controls">
<div id="customize-outer-theme-controls"> <ul class="customize-outer-pane-parent"><?php // Outer panel and sections are not implemented, but its here as a placeholder to avoid any side-effect in api.Section. ?></ul>
<ul class="customize-outer-pane-parent"><?php // Outer panel and sections are not implemented, but its here as a placeholder to avoid any side-effect in api.Section. ?></ul>
</div>
</div> </div>
</div> </div>
<?php <?php

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.9-alpha-41676'; $wp_version = '4.9-alpha-41677';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.