Refine the responsive UI support.
Review Request #7257 — Created April 28, 2015 and submitted — Latest diff uploaded
In 2.5, we gained the beginnings of response UI support, featuring a mobile-friendly page header, a pop-down search, and a slide-out sidebar for basic navigation. This builds upon that work to provide a more standardized UI for mobile devices and to make it easier to integrate with the slide-out sidebar for navigation. The page header now has a standard "hamburger menu" icon (the three stacked lines), which pulls out the sidebar. The sidebar appears recessed from the page's point of view, with a small shadow covering part of it. The page itself is "pushed" to the right, rather than the sidebar overlapping the page. While visible, the page cannot be scrolled. This uses CSS3 transitions to animate, improving the performance on mobile devices over jQuery animation. This sidebar contains links at the top for logging in/out, registering, and viewing account settings. Below that is the general page navigation (New review request, dashboard, etc.). Below that is any page-specific navigation (such as the dashboard sidebar). Docked to the bottom of the menu are a set of links for Docs, Support, and the Administration UI (if logged in as an administrator). The page header now always shows the search bar, instead of requiring another tap to show search. That makes it easier to start a search (useful on mobile devices) and frees up room in the top-right for future expansion. Search results appear much like they do on other mobile apps, taking up the full page content and giving enough room to easily tap to navigate. This is an improvement over the default implementation, which simply drops down a small list of results. The result of the change is a friendlier UI that we'll be able to build upon for all future responsive UI support.
Tested on Chrome, Firefox, iPhone 6, and Nexus 7 (Chrome) in both mobile
and non-mobile modes.I tested:
- Pages with and without custom content in the sidebar.
- Opening the sidebar and navigating to all the different links.
- Closing the sidebar by tapping on the page content (and ensuring that doesn't trigger links there)
- Searching and tapping results.
- Going in and out of responsive mode on browsers.
- Landscape mode on the iPhone and Nexus 7.
- Sidebar content when logged in/out.