WordPress.org

Make WordPress Core

Changeset 20749


Ignore:
Timestamp:
05/09/2012 03:56:40 AM (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.