WordPress.org

Make WordPress Core

Changeset 20749


Ignore:
Timestamp:
05/09/12 03:56:40 (6 years ago)
Author:
azaozz
Message:

Auto-fold the admin menu with CSS, fixes #20642

Location:
trunk/wp-admin
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/colors-classic.dev.css

    r20748 r20749  
    14421442.folded #collapse-button div { 
    14431443    background-position: 0 -108px; 
     1444} 
     1445 
     1446/* Auto-folding of the admin menu */ 
     1447@media only screen and (max-width: 900px) { 
     1448    #adminmenu li.menu-top { 
     1449        border-top-color: #ffffff; 
     1450        border-bottom-color: #cae6ff; 
     1451    } 
     1452 
     1453    #adminmenu li.wp-has-current-submenu, 
     1454    #adminmenu li.current.menu-top { 
     1455        background-color: #5589AA; /* Fallback */ 
     1456        background-image: -ms-linear-gradient(bottom, #5589AA, #619bbb); /* IE10 */ 
     1457        background-image: -moz-linear-gradient(bottom, #5589AA, #619bbb); /* Firefox */ 
     1458        background-image: -o-linear-gradient(bottom, #5589AA, #619bbb); /* Opera */ 
     1459        background-image: -webkit-gradient(linear, left bottom, left top, from(#5589AA), to(#619bbb)); /* old Webkit */ 
     1460        background-image: -webkit-linear-gradient(bottom, #5589AA, #619bbb); /* new Webkit */ 
     1461        background-image: linear-gradient(bottom, #5589AA, #619bbb); /* proposed W3C Markup */ 
     1462    } 
     1463 
     1464    #adminmenu li.menu-top li:hover a { 
     1465        background-image: none; 
     1466    } 
     1467 
     1468    #adminmenu li.wp-has-current-submenu, 
     1469    #adminmenu li.current.menu-top { 
     1470        border-top-color: #5A8FAD; 
     1471        border-bottom-color: #5589AA; 
     1472    } 
     1473 
     1474    #adminmenu .wp-has-current-submenu .wp-submenu-wrap { 
     1475        -moz-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); 
     1476        -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); 
     1477        box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); 
     1478    } 
     1479 
     1480    #collapse-button div { 
     1481        background-position: 0 -108px; 
     1482    } 
    14441483} 
    14451484 
     
    24382477} 
    24392478 
     2479/* Auto-folding of the admin menu for RTL */ 
     2480@media only screen and (max-width: 900px) { 
     2481    .rtl #adminmenu .wp-has-current-submenu .wp-submenu-wrap{ 
     2482        -moz-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); 
     2483        -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); 
     2484        box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); 
     2485    } 
     2486 
     2487    .rtl #collapse-button div { 
     2488        background-position: 0 -72px; 
     2489    } 
     2490} 
     2491 
    24402492/* edit image */ 
    24412493.rtl .meta-box-sortables .postbox:hover .handlediv { 
  • trunk/wp-admin/css/colors-fresh.dev.css

    r20748 r20749  
    11081108    background-image: linear-gradient(bottom, #dfdfdf, #fff); /* proposed W3C Markup */ 
    11091109} 
     1110 
    11101111#collapse-menu:hover #collapse-button { 
    11111112    border-color: #aaa; 
    11121113} 
     1114 
    11131115#collapse-button div { 
    11141116    background: transparent url(../images/arrows.png) no-repeat 0 -72px; 
    11151117} 
     1118 
    11161119.folded #collapse-button div { 
    11171120    background-position: 0 -108px; 
     1121} 
     1122 
     1123/* Auto-folding of the admin menu */ 
     1124@media only screen and (max-width: 900px) { 
     1125    #adminmenu li.menu-top { 
     1126        border-top-color: #f9f9f9; 
     1127        border-bottom-color: #dfdfdf; 
     1128    } 
     1129 
     1130    #adminmenu li.wp-has-current-submenu, 
     1131    #adminmenu li.current.menu-top { 
     1132        background-color: #777; /* Fallback */ 
     1133        background-image: -ms-linear-gradient(bottom, #6d6d6d, #808080); /* IE10 */ 
     1134        background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080); /* Firefox */ 
     1135        background-image: -o-linear-gradient(bottom, #6d6d6d, #808080); /* Opera */ 
     1136        background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080)); /* old Webkit */ 
     1137        background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080); /* new Webkit */ 
     1138        background-image: linear-gradient(bottom, #6d6d6d, #808080); /* proposed W3C Markup */ 
     1139    } 
     1140 
     1141    #adminmenu li.menu-top li:hover a { 
     1142        background-image: none; 
     1143    } 
     1144 
     1145    #adminmenu li.wp-has-current-submenu, 
     1146    #adminmenu li.current.menu-top { 
     1147        border-top-color: #808080; 
     1148        border-bottom-color: #6d6d6d; 
     1149    } 
     1150 
     1151    #adminmenu .wp-has-current-submenu .wp-submenu-wrap { 
     1152        -moz-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); 
     1153        -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); 
     1154        box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); 
     1155    } 
     1156 
     1157    #collapse-button div { 
     1158        background-position: 0 -108px; 
     1159    } 
    11181160} 
    11191161 
     
    20272069} 
    20282070 
     2071/* Auto-folding of the admin menu for RTL */ 
     2072@media only screen and (max-width: 900px) { 
     2073    .rtl #adminmenu .wp-has-current-submenu .wp-submenu-wrap{ 
     2074        -moz-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); 
     2075        -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); 
     2076        box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); 
     2077    } 
     2078 
     2079    .rtl #collapse-button div { 
     2080        background-position: 0 -72px; 
     2081    } 
     2082} 
     2083 
    20292084/* Edit Image */ 
    20302085.rtl .meta-box-sortables .postbox:hover .handlediv { 
  • trunk/wp-admin/css/wp-admin-rtl.dev.css

    r20705 r20749  
    353353} 
    354354 
    355 #adminmenu li .wp-submenu, 
    356 .folded #adminmenu .wp-has-current-submenu .wp-submenu { 
     355#adminmenu li .wp-submenu { 
    357356    left: auto; 
    358357    right: 146px; 
     
    499498} 
    500499 
     500/* Auto-folding of the admin menu */ 
     501@media only screen and (max-width: 900px) { 
     502    #adminmenu li .wp-submenu, 
     503    #adminmenu .wp-has-current-submenu .wp-submenu { 
     504        left: auto; 
     505        right: 26px; 
     506    } 
     507 
     508    #adminmenu li.focused.wp-has-current-submenu .wp-submenu, 
     509    #adminmenu .wp-has-current-submenu .wp-submenu.sub-open { 
     510        padding: 0 0 8px 8px; 
     511    } 
     512 
     513    .folded #adminmenu .wp-not-current-submenu li a { 
     514        padding-left: 0; 
     515        padding-right: 12px; 
     516    } 
     517 
     518    #adminmenu li li, 
     519    #adminmenu li li a { 
     520        padding-left: inherit; 
     521        padding-right: 0 
     522    } 
     523 
     524    .wp-menu-arrow { 
     525        -moz-transform:    translate( -27px ); 
     526        -webkit-transform: translate( -27px ); 
     527        -o-transform:      translate( -27px ); 
     528        -ms-transform:     translate( -27px ); 
     529        transform:         translate( -27px ); 
     530    } 
     531 
     532    #adminmenu .wp-submenu ul { 
     533        border-width: 0 1px 0 0; 
     534    } 
     535 
     536    #adminmenu .wp-submenu a { 
     537        padding-left: 0; 
     538        padding-right: 10px; 
     539    } 
     540 
     541    #adminmenu a.wp-has-submenu { 
     542        margin-left: 0; 
     543        margin-right: 40px; 
     544    } 
     545 
     546    body #wpcontent { 
     547        margin-left: 0; 
     548        margin-right: 52px; 
     549    } 
     550 
     551    body .wp-admin #footer { 
     552        margin-left: 15px; 
     553        margin-right: 52px; 
     554    } 
     555} 
    501556 
    502557/* List table styles */ 
  • trunk/wp-admin/css/wp-admin.dev.css

    r20743 r20749  
    17261726} 
    17271727 
     1728/* Auto-folding of the admin menu */ 
     1729@media only screen and (max-width: 900px) { 
     1730    #wpcontent, 
     1731    #footer { 
     1732        margin-left: 52px; 
     1733    } 
     1734 
     1735    #adminmenuback, 
     1736    #adminmenuwrap, 
     1737    #adminmenu, 
     1738    #adminmenu li.menu-top { 
     1739        width: 32px; 
     1740    } 
     1741 
     1742    #adminmenu .wp-has-current-submenu .wp-submenu { 
     1743        display: none; 
     1744        position: absolute; 
     1745        width: 145px; 
     1746        z-index: 999; 
     1747        overflow: hidden; 
     1748    } 
     1749 
     1750    #adminmenu .wp-has-current-submenu .wp-submenu.sub-open { 
     1751        display: block; 
     1752    } 
     1753 
     1754    #adminmenu li .wp-submenu, 
     1755    #adminmenu .wp-has-current-submenu .wp-submenu { 
     1756        top: -5px; 
     1757        left: 26px; 
     1758    } 
     1759 
     1760    #adminmenu li.focused.wp-has-current-submenu .wp-submenu, 
     1761    #adminmenu .wp-has-current-submenu .wp-submenu.sub-open { 
     1762        padding: 0 8px 8px 0; 
     1763    } 
     1764 
     1765    #adminmenu div.wp-submenu-head { 
     1766        display: block; 
     1767    } 
     1768 
     1769    #adminmenu a.menu-top, 
     1770    #adminmenu div.wp-menu-toggle { 
     1771        display: none; 
     1772    } 
     1773 
     1774    #adminmenu div.wp-menu-image { 
     1775        width: 30px; 
     1776    } 
     1777 
     1778    #adminmenu .wp-not-current-submenu li a { 
     1779        padding-left: 12px; 
     1780    } 
     1781 
     1782    #adminmenu li li { 
     1783        margin-left: 0; 
     1784    } 
     1785 
     1786    #adminmenu li li a { 
     1787        padding-left: 0; 
     1788    } 
     1789 
     1790    .wp-menu-arrow { 
     1791        -moz-transform:    translate( 33px ); 
     1792        -webkit-transform: translate( 33px ); 
     1793        -o-transform:      translate( 33px ); 
     1794        -ms-transform:     translate( 33px ); 
     1795        transform:         translate( 33px ); 
     1796    } 
     1797 
     1798    #adminmenu li.menu-top:hover .wp-menu-arrow { 
     1799        display: none; 
     1800    } 
     1801 
     1802    #adminmenu li.current:hover .wp-menu-arrow, 
     1803    #adminmenu li.menu-top.wp-menu-open:hover .wp-menu-arrow { 
     1804        display: block; 
     1805        z-index: 125; 
     1806    } 
     1807 
     1808    #adminmenu li.menu-top { 
     1809        border-width: 1px 0; 
     1810        border-style: solid none; 
     1811    } 
     1812 
     1813    #adminmenu .wp-submenu .wp-submenu-wrap { 
     1814        margin-top: 3px; 
     1815    } 
     1816 
     1817    #adminmenu .wp-has-current-submenu { 
     1818        margin-bottom: 1px; 
     1819    } 
     1820 
     1821    #adminmenu .wp-has-current-submenu.menu-top-last { 
     1822        margin-bottom: 0; 
     1823    } 
     1824 
     1825    #adminmenu .wp-has-current-submenu .wp-submenu-wrap { 
     1826        margin-top: 4px; 
     1827    } 
     1828 
     1829    #adminmenu .wp-submenu ul { 
     1830        border-width: 0 0 0 1px; 
     1831        border-style: solid; 
     1832    } 
     1833 
     1834    #adminmenu .wp-submenu a { 
     1835        padding-left: 10px; 
     1836    } 
     1837 
     1838    #adminmenu a.wp-has-submenu { 
     1839        margin-left: 40px; 
     1840    } 
     1841 
     1842    #collapse-menu { 
     1843        display: none; 
     1844    } 
     1845} 
    17281846 
    17291847/* List table styles */ 
     
    20842202  9.0 - Dashboard 
    20852203------------------------------------------------------------------------------*/ 
     2204 
     2205#dashboard-widgets-wrap { 
     2206    margin: 0 -8px; 
     2207} 
    20862208 
    20872209#wpbody-content .metabox-holder { 
  • trunk/wp-admin/js/common.dev.js

    r20387 r20749  
    161161$(document).ready( function() { 
    162162    var lastClicked = false, checks, first, last, checked, menu = $('#adminmenu'), 
    163         pageInput = $('input.current-page'), currentPage = pageInput.val(), folded, refresh; 
     163        pageInput = $('input.current-page'), currentPage = pageInput.val(), refresh; 
    164164 
    165165    // admin menu 
     
    355355    } 
    356356 
    357     // auto-fold the menu when screen is under 900px 
    358     $(window).bind('resize.autofold', function(){ 
    359         if ( getUserSetting('mfold') == 'f' ) 
    360             return; 
    361  
    362         var width = $(window).width(); 
    363  
    364         // fold admin menu 
    365         if ( width <= 900 ) { 
    366             if ( !folded ) { 
    367                 $(document.body).addClass('folded'); 
    368                 folded = true; 
    369             } 
    370         } else { 
    371             if ( folded ) { 
    372                 $(document.body).removeClass('folded'); 
    373                 folded = false; 
    374             } 
    375         } 
    376  
    377     }).triggerHandler('resize'); 
    378  
    379357}); 
    380358 
Note: See TracChangeset for help on using the changeset viewer.