Changeset 20110

Timestamp:

03/04/2012 04:57:24 AM (15 years ago)

Author:

koopersmith

Message:

Theme Customizer: Improve markup and CSS for the return/collapse actions and the action bars within the customize controls form. see #19910.

Location:

trunk/wp-includes

Files:

• class-wp-customize.php (modified) (1 diff)
• css/customize-controls.dev.css (modified) (3 diffs)
• css/customize-loader.dev.css (modified) (1 diff)
• customize-controls.php (modified) (2 diffs)

trunk/wp-includes/class-wp-customize.php

@@ -284 +284 @@
                 <div id="customize-container">
                         <input type="hidden" class="admin-url" value="<?php echo esc_url( admin_url( 'admin.php' ) ); ?>" />
-                        <div>
-                                <a href="#" class="return-to-admin"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
-                                <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>"><span></span></a>
-                        </div>
+                        <a href="#" class="return-to-admin"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
+                        <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>"><span></span></a>
                 </div>
                 <?php

trunk/wp-includes/css/customize-controls.dev.css

@@ -14 +14 @@
         box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
         border-right: 1px solid rgba( 0, 0, 0, 0.2 );
+}
+
+#customize-controls a {
+        text-decoration: none;
 }
 
@@ -117 +121 @@
 }
 
-#customize-footer {
-        border-bottom: 0;
-        border-top: 1px solid #dfdfdf;
+#customize-header-actions,
+#customize-footer-actions {
         position: fixed;
-        bottom: 0;
         left: 0;
         width: 260px;
@@ -128 +130 @@
         z-index: 10;
         background: #f5f5f5;
+}
+
+#customize-header-actions {
+        top: 0;
+        border-top: 0;
+        border-bottom: 1px solid #fff;
         box-shadow:
                 inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
-                inset 0 1px 0 0px #fff,
-                0 0 11px 0 rgba( 0, 0, 0, 0.1 );
+                inset 0 -1px 0 0px #dfdfdf;
+}
+
+#customize-footer-actions {
+        bottom: 0;
+        border-bottom: 0;
+        border-top: 1px solid #dfdfdf;
+        box-shadow:
+                inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
+                inset 0 1px 0 0px #fff;
 }
 

trunk/wp-includes/css/customize-loader.dev.css

@@ -22 +22 @@
 }
 
-#customize-container .collapse-sidebar,
-#customize-container .return-to-admin {
-        z-index: 50;
-}
-
-#customize-container div {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 260px;
-        padding: 15px 20px;
-        background: #f5f5f5;
-        box-shadow:
-                inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
-                inset 0 -1px 0 #dfdfdf,
-                -1px 1px 0 #fff;
-        border-right: 1px solid rgba( 0, 0, 0, 0.2 );
-}
-
 #customize-container iframe {
         height: 100%;
         width: 100%;
         z-index: 20;
+}
+
+#customize-container .collapse-sidebar,
+#customize-container .return-to-admin {
+        z-index: 50;
+        position: absolute;
+        text-decoration: none;
+}
+
+#customize-container .return-to-admin {
+        top: 15px;
+        left: 20px;
 }
 

trunk/wp-includes/customize-controls.php

@@ -50 +50 @@
                 <input type="hidden" id="customize-template" name="template" value="<?php echo esc_attr( $theme['Template'] ); ?>" />
                 <input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
+                
+                <div id="customize-header-actions" class="customize-section">&nbsp;</div>
 
                 <div id="customize-info" class="customize-section">
@@ -77 +79 @@
                 </ul></div>
 
-                <div id="customize-footer" class="customize-section">
+                <div id="customize-footer-actions" class="customize-section">
                         <?php
                         submit_button( __( 'Save' ), 'primary', 'save', false );