Customize: Prevent the "Hide Controls" button label from overrunning the device preview buttons.

westonruter · westonruter · commit 2158edc28f88 · 2016-11-13T18:59:21.000Z
Adds translation context for "Hide Controls" strings so translators can supply shorter strings where space is constrained. Adds styles to fade-out long the "Hide Controls" label where it would run into the device preview buttons. Props westonruter, ocean90. Fixes #38762. git-svn-id: https://develop.svn.wordpress.org/trunk@39214 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
@@ -1521,6 +1521,7 @@ body.full-overlay-active {
 	box-shadow: none !important;
 	-webkit-border-radius: 0 !important;
 	border-radius: 0 !important;
+	z-index: -1; /* Below device buttons */
 }
 
 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
@@ -1624,6 +1625,9 @@ body.full-overlay-active {
 
 .wp-full-overlay-footer .devices {
 	float: right;
+	background: #eee;
+	-webkit-box-shadow: -20px 0 10px -5px #eee;
+	box-shadow: -20px 0 10px -5px #eee;
 }
 
 .wp-full-overlay-footer .devices button {
diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
@@ -191,9 +191,9 @@
 				<?php endforeach; ?>
 			</div>
 			<?php endif; ?>
-			<button type="button" class="collapse-sidebar button" aria-expanded="true" aria-label="<?php esc_attr_e( 'Hide Controls' ); ?>">
+			<button type="button" class="collapse-sidebar button" aria-expanded="true" aria-label="<?php echo esc_attr( _x( 'Hide Controls', 'label for hide controls button without length constraints' ) ); ?>">
 				<span class="collapse-sidebar-arrow"></span>
-				<span class="collapse-sidebar-label"><?php _e( 'Hide Controls' ); ?></span>
+				<span class="collapse-sidebar-label"><?php _ex( 'Hide Controls', 'short (~12 characters) label for hide controls button' ); ?></span>
 			</button>
 		</div>
 	</form>
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
@@ -467,8 +467,8 @@ function wp_default_scripts( &$scripts ) {
 		'notAllowed'         => __( 'Sorry, you are not allowed to customize this site.' ),
 		'previewIframeTitle' => __( 'Site Preview' ),
 		'loginIframeTitle'   => __( 'Session expired' ),
-		'collapseSidebar'    => __( 'Hide Controls' ),
-		'expandSidebar'      => __( 'Show Controls' ),
+		'collapseSidebar'    => _x( 'Hide Controls', 'label for hide controls button without length constraints' ),
+		'expandSidebar'      => _x( 'Show Controls', 'label for hide controls button without length constraints' ),
 		'untitledBlogName'   => __( '(Untitled)' ),
 		// Used for overriding the file types allowed in plupload.
 		'allowedFiles'       => __( 'Allowed Files' ),

Original file line number	Diff line number	Diff line change
`@@ -1521,6 +1521,7 @@ body.full-overlay-active {`
`1521`	`1521`	`box-shadow: none !important;`
`1522`	`1522`	`-webkit-border-radius: 0 !important;`
`1523`	`1523`	`border-radius: 0 !important;`
	`1524`	`+ z-index: -1; /* Below device buttons */`
`1524`	`1525`	`}`
`1525`	`1526`
`1526`	`1527`	`.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,`
`@@ -1624,6 +1625,9 @@ body.full-overlay-active {`
`1624`	`1625`
`1625`	`1626`	`.wp-full-overlay-footer .devices {`
`1626`	`1627`	`float: right;`
	`1628`	`+ background: #eee;`
	`1629`	`+ -webkit-box-shadow: -20px 0 10px -5px #eee;`
	`1630`	`+ box-shadow: -20px 0 10px -5px #eee;`
`1627`	`1631`	`}`
`1628`	`1632`
`1629`	`1633`	`.wp-full-overlay-footer .devices button {`