WordPress.org

Make WordPress Core

Changeset 26373


Ignore:
Timestamp:
11/26/2013 01:37:02 AM (8 years ago)
Author:
iammattthomas
Message:

Make the responsive layout behave better when the user zooms the page:

  • Change the smartphone media query from 480 to 600px so it captures large screen phones in landscape mode.
  • Set #wpadminbar to position: absolute at smartphone sizes so it scrolls with the page, freeing up the viewport.
  • Remove the transition states on #adminmenu for better performance on mobile devices
  • Make the responsive sidebar scroll with the page instead of using a fixed position
  • Remove the -webkit-overflow-scrolling rule that was disabling scroll-to-top when tapping the iOS status bar.
  • Remove unnecessary zoom declaration from -ms-viewport.

See #25858.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/wp-admin.css

    r26371 r26373  
    1085310853@-ms-viewport {
    1085410854    width: device-width;
    10855     zoom: 1;
    10856     user-zoom: fixed;
    1085710855}
    1085810856
     
    1102111019    .auto-fold #adminmenuwrap {
    1102211020        position: absolute;
    11023         top: 0;
    1102411021        left: 0;
    1102511022        z-index: 100;
     
    1104011037        width: 100%;
    1104111038    }
    11042 
    11043     /* Let the menubar scroll independently of the main column */
    11044     .auto-fold #adminmenuwrap {
    11045         height: 100%;
    11046         position: fixed;
    11047         overflow: hidden;
    11048         overflow-y: scroll;
    11049         top: 46px;
    11050 
    11051         height: -webkit-calc(100% - 46px);
    11052         height: calc(100% - 46px);
    11053 
    11054         -webkit-box-shadow: inset 2px 0 0 rgba(0, 0, 0, .1);
    11055         box-shadow: inset 2px 0 0 rgba(0, 0, 0, .1);
    11056 
    11057         -moz-box-sizing: border-box;
    11058         -webkit-box-sizing: border-box;
    11059         box-sizing: border-box;
    11060 
    11061         -webkit-overflow-scrolling: touch;
    11062     }
    11063 
     11039   
    1106411040    /* Experimental animations for sidebar */
    1106511041    .auto-fold #adminmenu,
     
    1107111047    }
    1107211048
    11073     #wpbody {
    11074         -moz-transition: right .05s ease-in-out;
    11075         -webkit-transition: right .05s ease-in-out;
    11076         transition: right .05s ease-in-out;
    11077     }
    11078 
    11079     .auto-fold #adminmenu {
    11080         -webkit-opacity: .10;
    11081         -moz-opacity: .10;
    11082         opacity: .10;
    11083         -moz-transition: left .05s ease-in-out, -moz-opacity .3s ease-in;
    11084         -webkit-transition: left .05s ease-in-out, -webkit-opacity .3s ease-in;
    11085         transition: left .05s ease-in-out, opacity .3s ease-in;
    11086     }
    11087 
    11088     .auto-fold .moby6-open #adminmenu {
    11089         -moz-opacity: 1;
    11090         -webkit-opacity: 1;
    11091         opacity: 1;
    11092     }
    1109311049
    1109411050    /* Resize the admin menu items to a comfortable touch size */
     
    1224512201
    1224612202/* Smartphone */
    12247 @media screen and (max-width: 480px) {
     12203@media screen and (max-width: 600px) {
     12204    html.wp-toolbar {
     12205        padding-top: 0;
     12206    }
     12207
     12208    .auto-fold #adminmenu {
     12209        top: 46px;
     12210    }
     12211   
    1224812212    #moby6-overlay {
    1224912213        position: fixed;
  • trunk/src/wp-includes/css/admin-bar.css

    r26348 r26373  
    939939}
    940940
    941 /* Horizontal */
    942 @media screen and (max-width: 480px) and (orientation: landscape) {
     941/* Smartphone */
     942@media screen and (max-width: 600px) {
    943943    #wpadminbar {
    944944        position: absolute;
    945945    }
    946 }
    947 
    948 /* Smartphone */
    949 @media screen and (max-width: 480px) {
     946   
    950947    #moby6-overlay {
    951948        position: fixed;
Note: See TracChangeset for help on using the changeset viewer.