Ticket #22059: responsive-admin-bar.patch

wp-includes/admin-bar.php

@@ -231 +231 @@
         if ( $title != $blogname )
                 $title = trim( $title ) . '…';
 
+    $title = '<span class="ab-icon"></span><span class="ab-label">'.$title.'</span>';
+
         $wp_admin_bar->add_menu( array(
                 'id'    => 'site-name',
                 'title' => $title,
@@ -287 +289 @@
         if ( count( $wp_admin_bar->user->blogs ) < 1 && ! is_super_admin() )
                 return;
 
+    $title = '<span class="ab-icon"></span><span class="ab-label">' . _x( 'My Sites', 'admin bar menu group label' ) . '</span>';
+
         $wp_admin_bar->add_menu( array(
                 'id'    => 'my-sites',
-                'title' => __( 'My Sites' ),
+                'title' => $title,
                 'href'  => admin_url( 'my-sites.php' ),
         ) );
 
@@ -369 +373 @@
                         $wp_admin_bar->add_menu( array(
                                 'parent' => $menu_id,
                                 'id'     => $menu_id . '-n',
-                                'title'  => __( 'New Post' ),
+                                'title'  => __( 'New Post' ), 
                                 'href'   => admin_url( 'post-new.php' ),
                         ) );
                         $wp_admin_bar->add_menu( array(
@@ -421 +425 @@
 function wp_admin_bar_edit_menu( $wp_admin_bar ) {
         global $tag, $wp_the_query;
 
+    $html_before = '<span class="ab-icon"></span><span class="ab-label">';
+        $html_after = '</span>';
+
         if ( is_admin() ) {
                 $current_screen = get_current_screen();
                 $post = get_post();
-
+                
                 if ( 'post' == $current_screen->base
                         && 'add' != $current_screen->action
                         && ( $post_type_object = get_post_type_object( $post->post_type ) )
@@ -434 +441 @@
                 {
                         $wp_admin_bar->add_menu( array(
                                 'id' => 'view',
-                                'title' => $post_type_object->labels->view_item,
+                                'title' => $html_before . $post_type_object->labels->view_item . $html_after,
                                 'href' => get_permalink( $post->ID )
                         ) );
                 } elseif ( 'edit-tags' == $current_screen->base
@@ -444 +451 @@
                 {
                         $wp_admin_bar->add_menu( array(
                                 'id' => 'view',
-                                'title' => $tax->labels->view_item,
+                                'title' => $html_before . $tax->labels->view_item . $html_after,
                                 'href' => get_term_link( $tag )
                         ) );
                 }
@@ -461 +468 @@
                 {
                         $wp_admin_bar->add_menu( array(
                                 'id' => 'edit',
-                                'title' => $post_type_object->labels->edit_item,
+                                'title' => $html_before . $post_type_object->labels->edit_item . $html_after,
                                 'href' => get_edit_post_link( $current_object->ID )
                         ) );
                 } elseif ( ! empty( $current_object->taxonomy )
@@ -471 +478 @@
                 {
                         $wp_admin_bar->add_menu( array(
                                 'id' => 'edit',
-                                'title' => $tax->labels->edit_item,
+                                'title' => $html_before . $tax->labels->edit_item . $html_after,
                                 'href' => get_edit_term_link( $current_object->term_id, $current_object->taxonomy )
                         ) );
                 }

wp-includes/css/admin-bar.css

@@ -642 +642 @@
 * html #wpadminbar .menupop a span {
         background-image: none;
 }
+
+/**
+ * Response admin bar
+ */
+ 
+#wp-admin-bar-my-sites .ab-icon,
+#wp-admin-bar-site-name .ab-icon,
+#wp-admin-bar-edit .ab-icon,
+#wp-admin-bar-view .ab-icon {
+    display:none;
+}
+
+@media (max-width: 900px) {
+    
+     #wpadminbar {
+         min-width: 600px;
+     }
+     
+     #wp-admin-bar-new-content .ab-label, 
+     #wp-admin-bar-search   {
+         display: none;
+     }
+     
+     #wp-admin-bar-my-account>.ab-item, 
+     #wp-admin-bar-my-sites>.ab-item, 
+     #wp-admin-bar-site-name>.ab-item, 
+     #wp-admin-bar-edit>.ab-item,
+     #wp-admin-bar-view>.ab-item {
+         font-size: 0;
+         overflow:hidden;
+     }
+     
+     /* user + avatar */
+     #wp-admin-bar-my-account .ab-item {
+         padding-left:6px !important;
+     }
+     
+     #wp-admin-bar-edit>.ab-item, 
+     #wp-admin-bar-view>.ab-item, 
+     #wp-admin-bar-my-sites>.ab-item, 
+     #wp-admin-bar-site-name>.ab-item {
+         padding: 0 10px !important;
+         width: 20px;
+     }
+     
+     /* my sites */
+     #wp-admin-bar-my-sites .ab-item .ab-icon {
+          display:block;
+          background-image: url(../images/admin-bar-sprite.png?d=20120830);
+          background-position:-1px -263px;
+          background-repeat: no-repeat;
+     }
+     #wp-admin-bar-my-sites .ab-item:hover .ab-icon,
+     #wp-admin-bar-my-sites.hover .ab-item .ab-icon {
+          background-position:-1px -283px;
+     }
+     
+     /* site name */
+     #wp-admin-bar-site-name .ab-item .ab-icon {
+          display: block;
+          background-image: url(../images/admin-bar-sprite.png?d=20120830);
+          background-position: -1px -223px;
+          background-repeat: no-repeat;
+      }
+      #wp-admin-bar-site-name .ab-item:hover .ab-icon, 
+      #wp-admin-bar-site-name.hover .ab-item .ab-icon {
+          background-position: -1px -243px;
+      }
+     
+     /* edit post */
+      #wp-admin-bar-edit .ab-item .ab-icon {
+           display: block;
+           background-image: url(../images/admin-bar-sprite.png?d=20120830);
+           background-position: -1px -303px;
+           background-repeat: no-repeat;
+       }
+     /* view post */
+     #wp-admin-bar-view .ab-item .ab-icon {
+            display: block;
+            background-image: url(../images/admin-bar-sprite.png?d=20120830);
+            background-position: -1px -303px;
+            background-repeat: no-repeat;
+    }
+
+}
+ No newline at end of file