Refine the responsive UI support.

Review Request #7257 — Created April 28, 2015 and submitted

Information

Review Board
release-2.5.x
1f70fe4...

Reviewers

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.

Description From Last Updated

Remove this blank line.

daviddavid
reviewbot
  1. Tool: Pyflakes
    Ignored Files:
        reviewboard/static/rb/js/common.js
        reviewboard/templates/base/navbar.html
        reviewboard/templates/base.html
        reviewboard/templates/datagrids/sidebar_section.html
        reviewboard/templates/base/headerbar.html
        reviewboard/static/rb/js/views/headerView.js
        reviewboard/static/rb/css/mixins/theme.less
        reviewboard/static/rb/css/pages/base.less
        reviewboard/static/rb/css/ui/datagrids.less
        reviewboard/static/rb/css/common.less
        reviewboard/templates/datagrids/datagrid.html
        reviewboard/static/lib/js/ui.autocomplete.js
        reviewboard/templates/base/_mobile_navbar.html
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/mixins/style.less
    
    
    
    Tool: PEP8 Style Checker
    Ignored Files:
        reviewboard/static/rb/js/common.js
        reviewboard/templates/base/navbar.html
        reviewboard/templates/base.html
        reviewboard/templates/datagrids/sidebar_section.html
        reviewboard/templates/base/headerbar.html
        reviewboard/static/rb/js/views/headerView.js
        reviewboard/static/rb/css/mixins/theme.less
        reviewboard/static/rb/css/pages/base.less
        reviewboard/static/rb/css/ui/datagrids.less
        reviewboard/static/rb/css/common.less
        reviewboard/templates/datagrids/datagrid.html
        reviewboard/static/lib/js/ui.autocomplete.js
        reviewboard/templates/base/_mobile_navbar.html
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/mixins/style.less
    
    
  2. 
      
david
  1. 
      
  2. Show all issues

    Remove this blank line.

  3. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-2.5.x (98205e5)