From a80f1997b858b9cdce51bcaa9856802f519a3965 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Wed, 9 May 2012 03:56:40 +0000 Subject: [PATCH] Auto-fold the admin menu with CSS, fixes #20642 git-svn-id: https://develop.svn.wordpress.org/trunk@20749 602fd350-edb4-49c9-b593-d223f7449a82 --- wp-admin/css/colors-classic.dev.css | 52 ++++++++++++ wp-admin/css/colors-fresh.dev.css | 55 +++++++++++++ wp-admin/css/wp-admin-rtl.dev.css | 59 +++++++++++++- wp-admin/css/wp-admin.dev.css | 122 ++++++++++++++++++++++++++++ wp-admin/js/common.dev.js | 24 +----- 5 files changed, 287 insertions(+), 25 deletions(-) diff --git a/wp-admin/css/colors-classic.dev.css b/wp-admin/css/colors-classic.dev.css index 7dad3512b9..98fbb11b43 100644 --- a/wp-admin/css/colors-classic.dev.css +++ b/wp-admin/css/colors-classic.dev.css @@ -1443,6 +1443,45 @@ table.widefat .spam a:hover, background-position: 0 -108px; } +/* Auto-folding of the admin menu */ +@media only screen and (max-width: 900px) { + #adminmenu li.menu-top { + border-top-color: #ffffff; + border-bottom-color: #cae6ff; + } + + #adminmenu li.wp-has-current-submenu, + #adminmenu li.current.menu-top { + background-color: #5589AA; /* Fallback */ + background-image: -ms-linear-gradient(bottom, #5589AA, #619bbb); /* IE10 */ + background-image: -moz-linear-gradient(bottom, #5589AA, #619bbb); /* Firefox */ + background-image: -o-linear-gradient(bottom, #5589AA, #619bbb); /* Opera */ + background-image: -webkit-gradient(linear, left bottom, left top, from(#5589AA), to(#619bbb)); /* old Webkit */ + background-image: -webkit-linear-gradient(bottom, #5589AA, #619bbb); /* new Webkit */ + background-image: linear-gradient(bottom, #5589AA, #619bbb); /* proposed W3C Markup */ + } + + #adminmenu li.menu-top li:hover a { + background-image: none; + } + + #adminmenu li.wp-has-current-submenu, + #adminmenu li.current.menu-top { + border-top-color: #5A8FAD; + border-bottom-color: #5589AA; + } + + #adminmenu .wp-has-current-submenu .wp-submenu-wrap { + -moz-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); + -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); + box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); + } + + #collapse-button div { + background-position: 0 -108px; + } +} + /* menu and screen icons */ .icon16, .icon32, @@ -2437,6 +2476,19 @@ div.widgets-sortables, background-position: 0 -72px; } +/* Auto-folding of the admin menu for RTL */ +@media only screen and (max-width: 900px) { + .rtl #adminmenu .wp-has-current-submenu .wp-submenu-wrap{ + -moz-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); + -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); + box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); + } + + .rtl #collapse-button div { + background-position: 0 -72px; + } +} + /* edit image */ .rtl .meta-box-sortables .postbox:hover .handlediv { background: transparent url(../images/arrows-vs.png) no-repeat 6px 7px; diff --git a/wp-admin/css/colors-fresh.dev.css b/wp-admin/css/colors-fresh.dev.css index 09528b8af1..31b3b5e9e1 100644 --- a/wp-admin/css/colors-fresh.dev.css +++ b/wp-admin/css/colors-fresh.dev.css @@ -1107,16 +1107,58 @@ table.widefat .spam a:hover, background-image: -webkit-linear-gradient(bottom, #dfdfdf, #fff); /* new Webkit */ background-image: linear-gradient(bottom, #dfdfdf, #fff); /* proposed W3C Markup */ } + #collapse-menu:hover #collapse-button { border-color: #aaa; } + #collapse-button div { background: transparent url(../images/arrows.png) no-repeat 0 -72px; } + .folded #collapse-button div { background-position: 0 -108px; } +/* Auto-folding of the admin menu */ +@media only screen and (max-width: 900px) { + #adminmenu li.menu-top { + border-top-color: #f9f9f9; + border-bottom-color: #dfdfdf; + } + + #adminmenu li.wp-has-current-submenu, + #adminmenu li.current.menu-top { + background-color: #777; /* Fallback */ + background-image: -ms-linear-gradient(bottom, #6d6d6d, #808080); /* IE10 */ + background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080); /* Firefox */ + background-image: -o-linear-gradient(bottom, #6d6d6d, #808080); /* Opera */ + background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080)); /* old Webkit */ + background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080); /* new Webkit */ + background-image: linear-gradient(bottom, #6d6d6d, #808080); /* proposed W3C Markup */ + } + + #adminmenu li.menu-top li:hover a { + background-image: none; + } + + #adminmenu li.wp-has-current-submenu, + #adminmenu li.current.menu-top { + border-top-color: #808080; + border-bottom-color: #6d6d6d; + } + + #adminmenu .wp-has-current-submenu .wp-submenu-wrap { + -moz-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); + -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); + box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); + } + + #collapse-button div { + background-position: 0 -108px; + } +} + /* menu and screen icons */ .icon16, .icon32, @@ -2026,6 +2068,19 @@ div.widgets-sortables, background-position: 0 -72px; } +/* Auto-folding of the admin menu for RTL */ +@media only screen and (max-width: 900px) { + .rtl #adminmenu .wp-has-current-submenu .wp-submenu-wrap{ + -moz-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); + -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); + box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); + } + + .rtl #collapse-button div { + background-position: 0 -72px; + } +} + /* Edit Image */ .rtl .meta-box-sortables .postbox:hover .handlediv { background: transparent url(../images/arrows.png) no-repeat 6px 7px; diff --git a/wp-admin/css/wp-admin-rtl.dev.css b/wp-admin/css/wp-admin-rtl.dev.css index f7afebc4ea..9899f93d72 100644 --- a/wp-admin/css/wp-admin-rtl.dev.css +++ b/wp-admin/css/wp-admin-rtl.dev.css @@ -352,8 +352,7 @@ form.upgrade .hint { left: 0; } -#adminmenu li .wp-submenu, -.folded #adminmenu .wp-has-current-submenu .wp-submenu { +#adminmenu li .wp-submenu { left: auto; right: 146px; } @@ -498,6 +497,62 @@ form.upgrade .hint { float: right; } +/* Auto-folding of the admin menu */ +@media only screen and (max-width: 900px) { + #adminmenu li .wp-submenu, + #adminmenu .wp-has-current-submenu .wp-submenu { + left: auto; + right: 26px; + } + + #adminmenu li.focused.wp-has-current-submenu .wp-submenu, + #adminmenu .wp-has-current-submenu .wp-submenu.sub-open { + padding: 0 0 8px 8px; + } + + .folded #adminmenu .wp-not-current-submenu li a { + padding-left: 0; + padding-right: 12px; + } + + #adminmenu li li, + #adminmenu li li a { + padding-left: inherit; + padding-right: 0 + } + + .wp-menu-arrow { + -moz-transform: translate( -27px ); + -webkit-transform: translate( -27px ); + -o-transform: translate( -27px ); + -ms-transform: translate( -27px ); + transform: translate( -27px ); + } + + #adminmenu .wp-submenu ul { + border-width: 0 1px 0 0; + } + + #adminmenu .wp-submenu a { + padding-left: 0; + padding-right: 10px; + } + + #adminmenu a.wp-has-submenu { + margin-left: 0; + margin-right: 40px; + } + + body #wpcontent { + margin-left: 0; + margin-right: 52px; + } + + body .wp-admin #footer { + margin-left: 15px; + margin-right: 52px; + } +} /* List table styles */ .post-com-count-wrapper { diff --git a/wp-admin/css/wp-admin.dev.css b/wp-admin/css/wp-admin.dev.css index bb1676ad9e..ab0c468a9f 100644 --- a/wp-admin/css/wp-admin.dev.css +++ b/wp-admin/css/wp-admin.dev.css @@ -1725,6 +1725,124 @@ body.no-js #adminmenu .wp-menu-toggle, border-radius: 10px; } +/* Auto-folding of the admin menu */ +@media only screen and (max-width: 900px) { + #wpcontent, + #footer { + margin-left: 52px; + } + + #adminmenuback, + #adminmenuwrap, + #adminmenu, + #adminmenu li.menu-top { + width: 32px; + } + + #adminmenu .wp-has-current-submenu .wp-submenu { + display: none; + position: absolute; + width: 145px; + z-index: 999; + overflow: hidden; + } + + #adminmenu .wp-has-current-submenu .wp-submenu.sub-open { + display: block; + } + + #adminmenu li .wp-submenu, + #adminmenu .wp-has-current-submenu .wp-submenu { + top: -5px; + left: 26px; + } + + #adminmenu li.focused.wp-has-current-submenu .wp-submenu, + #adminmenu .wp-has-current-submenu .wp-submenu.sub-open { + padding: 0 8px 8px 0; + } + + #adminmenu div.wp-submenu-head { + display: block; + } + + #adminmenu a.menu-top, + #adminmenu div.wp-menu-toggle { + display: none; + } + + #adminmenu div.wp-menu-image { + width: 30px; + } + + #adminmenu .wp-not-current-submenu li a { + padding-left: 12px; + } + + #adminmenu li li { + margin-left: 0; + } + + #adminmenu li li a { + padding-left: 0; + } + + .wp-menu-arrow { + -moz-transform: translate( 33px ); + -webkit-transform: translate( 33px ); + -o-transform: translate( 33px ); + -ms-transform: translate( 33px ); + transform: translate( 33px ); + } + + #adminmenu li.menu-top:hover .wp-menu-arrow { + display: none; + } + + #adminmenu li.current:hover .wp-menu-arrow, + #adminmenu li.menu-top.wp-menu-open:hover .wp-menu-arrow { + display: block; + z-index: 125; + } + + #adminmenu li.menu-top { + border-width: 1px 0; + border-style: solid none; + } + + #adminmenu .wp-submenu .wp-submenu-wrap { + margin-top: 3px; + } + + #adminmenu .wp-has-current-submenu { + margin-bottom: 1px; + } + + #adminmenu .wp-has-current-submenu.menu-top-last { + margin-bottom: 0; + } + + #adminmenu .wp-has-current-submenu .wp-submenu-wrap { + margin-top: 4px; + } + + #adminmenu .wp-submenu ul { + border-width: 0 0 0 1px; + border-style: solid; + } + + #adminmenu .wp-submenu a { + padding-left: 10px; + } + + #adminmenu a.wp-has-submenu { + margin-left: 40px; + } + + #collapse-menu { + display: none; + } +} /* List table styles */ .post-com-count-wrapper { @@ -2084,6 +2202,10 @@ body.admin-bar { 9.0 - Dashboard ------------------------------------------------------------------------------*/ +#dashboard-widgets-wrap { + margin: 0 -8px; +} + #wpbody-content .metabox-holder { padding-top: 10px; } diff --git a/wp-admin/js/common.dev.js b/wp-admin/js/common.dev.js index d63c22c62c..f0508bfe1c 100644 --- a/wp-admin/js/common.dev.js +++ b/wp-admin/js/common.dev.js @@ -160,7 +160,7 @@ $('.contextual-help-tabs').delegate('a', 'click focus', function(e) { $(document).ready( function() { var lastClicked = false, checks, first, last, checked, menu = $('#adminmenu'), - pageInput = $('input.current-page'), currentPage = pageInput.val(), folded, refresh; + pageInput = $('input.current-page'), currentPage = pageInput.val(), refresh; // admin menu refresh = function(i, el){ // force the browser to refresh the tabbing index @@ -354,28 +354,6 @@ $(document).ready( function() { }); } - // auto-fold the menu when screen is under 900px - $(window).bind('resize.autofold', function(){ - if ( getUserSetting('mfold') == 'f' ) - return; - - var width = $(window).width(); - - // fold admin menu - if ( width <= 900 ) { - if ( !folded ) { - $(document.body).addClass('folded'); - folded = true; - } - } else { - if ( folded ) { - $(document.body).removeClass('folded'); - folded = false; - } - } - - }).triggerHandler('resize'); - }); // internal use