Changeset 26373

Timestamp:

11/26/2013 01:37:02 AM (11 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:

• wp-admin/css/wp-admin.css (modified) (5 diffs)
• wp-includes/css/admin-bar.css (modified) (1 diff)

trunk/src/wp-admin/css/wp-admin.css

@@ -10853 +10853 @@
 @-ms-viewport {
     width: device-width;
-    zoom: 1;
-    user-zoom: fixed;
 }
 
@@ -11021 +11019 @@
     .auto-fold #adminmenuwrap {
         position: absolute;
-        top: 0;
         left: 0;
         z-index: 100;
@@ -11040 +11037 @@
         width: 100%;
     }
-
-    /* Let the menubar scroll independently of the main column */
-    .auto-fold #adminmenuwrap {
-        height: 100%;
-        position: fixed;
-        overflow: hidden;
-        overflow-y: scroll;
-        top: 46px;
-
-        height: -webkit-calc(100% - 46px);
-        height: calc(100% - 46px);
-
-        -webkit-box-shadow: inset 2px 0 0 rgba(0, 0, 0, .1);
-        box-shadow: inset 2px 0 0 rgba(0, 0, 0, .1);
-
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-
-        -webkit-overflow-scrolling: touch;
-    }
-
+    
     /* Experimental animations for sidebar */
     .auto-fold #adminmenu,
@@ -11071 +11047 @@
     }
 
-    #wpbody {
-        -moz-transition: right .05s ease-in-out;
-        -webkit-transition: right .05s ease-in-out;
-        transition: right .05s ease-in-out;
-    }
-
-    .auto-fold #adminmenu {
-        -webkit-opacity: .10;
-        -moz-opacity: .10;
-        opacity: .10;
-        -moz-transition: left .05s ease-in-out, -moz-opacity .3s ease-in;
-        -webkit-transition: left .05s ease-in-out, -webkit-opacity .3s ease-in;
-        transition: left .05s ease-in-out, opacity .3s ease-in;
-    }
-
-    .auto-fold .moby6-open #adminmenu {
-        -moz-opacity: 1;
-        -webkit-opacity: 1;
-        opacity: 1;
-    }
 
     /* Resize the admin menu items to a comfortable touch size */
@@ -12245 +12201 @@
 
 /* Smartphone */
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 600px) {
+    html.wp-toolbar {
+        padding-top: 0;
+    }
+
+    .auto-fold #adminmenu {
+        top: 46px;
+    }
+    
     #moby6-overlay {
         position: fixed;

trunk/src/wp-includes/css/admin-bar.css

@@ -939 +939 @@
 }
 
-/* Horizontal */
-@media screen and (max-width: 480px) and (orientation: landscape) {
+/* Smartphone */
+@media screen and (max-width: 600px) {
     #wpadminbar {
         position: absolute;
     }
-}
-
-/* Smartphone */
-@media screen and (max-width: 480px) {
+    
     #moby6-overlay {
         position: fixed;