mirror of
https://github.com/WordPress/WordPress.git
synced 2025-01-11 02:49:04 +01:00
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:
azaozz
parent
3fc77d1465
commit
1f44403272
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user