Auto-fold the admin menu with CSS, fixes #20642
git-svn-id: http://core.svn.wordpress.org/trunk@20749 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
3fc77d1465
commit
1f44403272
|
@ -1443,6 +1443,45 @@ table.widefat .spam a:hover,
|
||||||
background-position: 0 -108px;
|
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 */
|
/* menu and screen icons */
|
||||||
.icon16,
|
.icon16,
|
||||||
.icon32,
|
.icon32,
|
||||||
|
@ -2437,6 +2476,19 @@ div.widgets-sortables,
|
||||||
background-position: 0 -72px;
|
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 */
|
/* edit image */
|
||||||
.rtl .meta-box-sortables .postbox:hover .handlediv {
|
.rtl .meta-box-sortables .postbox:hover .handlediv {
|
||||||
background: transparent url(../images/arrows-vs.png) no-repeat 6px 7px;
|
background: transparent url(../images/arrows-vs.png) no-repeat 6px 7px;
|
||||||
|
|
|
@ -1107,16 +1107,58 @@ table.widefat .spam a:hover,
|
||||||
background-image: -webkit-linear-gradient(bottom, #dfdfdf, #fff); /* new Webkit */
|
background-image: -webkit-linear-gradient(bottom, #dfdfdf, #fff); /* new Webkit */
|
||||||
background-image: linear-gradient(bottom, #dfdfdf, #fff); /* proposed W3C Markup */
|
background-image: linear-gradient(bottom, #dfdfdf, #fff); /* proposed W3C Markup */
|
||||||
}
|
}
|
||||||
|
|
||||||
#collapse-menu:hover #collapse-button {
|
#collapse-menu:hover #collapse-button {
|
||||||
border-color: #aaa;
|
border-color: #aaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
#collapse-button div {
|
#collapse-button div {
|
||||||
background: transparent url(../images/arrows.png) no-repeat 0 -72px;
|
background: transparent url(../images/arrows.png) no-repeat 0 -72px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.folded #collapse-button div {
|
.folded #collapse-button div {
|
||||||
background-position: 0 -108px;
|
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 */
|
/* menu and screen icons */
|
||||||
.icon16,
|
.icon16,
|
||||||
.icon32,
|
.icon32,
|
||||||
|
@ -2026,6 +2068,19 @@ div.widgets-sortables,
|
||||||
background-position: 0 -72px;
|
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 */
|
/* Edit Image */
|
||||||
.rtl .meta-box-sortables .postbox:hover .handlediv {
|
.rtl .meta-box-sortables .postbox:hover .handlediv {
|
||||||
background: transparent url(../images/arrows.png) no-repeat 6px 7px;
|
background: transparent url(../images/arrows.png) no-repeat 6px 7px;
|
||||||
|
|
|
@ -352,8 +352,7 @@ form.upgrade .hint {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#adminmenu li .wp-submenu,
|
#adminmenu li .wp-submenu {
|
||||||
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
|
|
||||||
left: auto;
|
left: auto;
|
||||||
right: 146px;
|
right: 146px;
|
||||||
}
|
}
|
||||||
|
@ -498,6 +497,62 @@ form.upgrade .hint {
|
||||||
float: right;
|
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 */
|
/* List table styles */
|
||||||
.post-com-count-wrapper {
|
.post-com-count-wrapper {
|
||||||
|
|
|
@ -1725,6 +1725,124 @@ body.no-js #adminmenu .wp-menu-toggle,
|
||||||
border-radius: 10px;
|
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 */
|
/* List table styles */
|
||||||
.post-com-count-wrapper {
|
.post-com-count-wrapper {
|
||||||
|
@ -2084,6 +2202,10 @@ body.admin-bar {
|
||||||
9.0 - Dashboard
|
9.0 - Dashboard
|
||||||
------------------------------------------------------------------------------*/
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
#dashboard-widgets-wrap {
|
||||||
|
margin: 0 -8px;
|
||||||
|
}
|
||||||
|
|
||||||
#wpbody-content .metabox-holder {
|
#wpbody-content .metabox-holder {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -160,7 +160,7 @@ $('.contextual-help-tabs').delegate('a', 'click focus', function(e) {
|
||||||
|
|
||||||
$(document).ready( function() {
|
$(document).ready( function() {
|
||||||
var lastClicked = false, checks, first, last, checked, menu = $('#adminmenu'),
|
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
|
// admin menu
|
||||||
refresh = function(i, el){ // force the browser to refresh the tabbing index
|
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
|
// internal use
|
||||||
|
|
Loading…
Reference in New Issue