Making RB look and work better on a small-screen device.

Review Request #5620 — Created March 14, 2014 and discarded

Joonas
Review Board
master
reviewboard, students
mirai

I'm making RB responsive by using CSS media queries. I have worked on:

  • Making the login and registration pages look better on a small-screen device. The code related to this is in common.less under the Login/Register pages section.
  • Making the top menu bar ("Support", "Login", Searchbar etc.) and the navigation bar ("My Dashboard", "New Review Request" etc.) to be hidden by default on a small-screen device. When a Menu-button is pressed, they are brought visible in the form of a mobile-friendly menu (see the newest screenshots). I'm using the CSS3 transform property to have the menu come on top of the page content without affecting it.

Possible things todo:

  • Implement the Menu icon with SVG. It is now done purely in CSS. We might want to use SVG because other icons in RB are also SVG.
  • Further testing.
  • Organize and improve the code.
  • See how https://reviews.reviewboard.org/r/5655/ affects this. Remove duplicate things. Use same variable for the viewport size etc.

Tested on desktop with Firefox and Chrome (but not IE) by resizing the browser window and using the menu on different parts (though not all) of RB. Tested with HTC One Mini and Google Nexus 7 2013 by using the menu on different parts (though not all) of RB. Switching between portrait and landscape mode.

Loading file attachments...

  • 2
  • 0
  • 2
  • 0
  • 4
Description From Last Updated
Would it make more sense to ask the password only once at mobile. For example Dropbox only asks the password ... tomiaijo
Are these really necessary to input at mobile where people tend to hate writing. They can always fill the rest ... tomiaijo
  1. 
      
  2. I think it would be nice to collapse the top navigation bar, and make a dropdown toggle that shows the links when the bar is touched.

  3. 
      
  1. 
      
  2. Would it make more sense to ask the password only once at mobile. For example Dropbox only asks the password once on mobile registration.

    There are several other improvements to this that I could think of:

    1. Always show the last character as plain text to make it easier to spot errors.
    2. Show the whole password as plain text

    Some discussion about this: http://ux.stackexchange.com/questions/45846/patterns-for-sign-in-registration-forms-that-show-password-as-plain-text-unma

  3. Are these really necessary to input at mobile where people tend to hate writing. They can always fill the rest of information later.

  4. 
      
  1. The dropdown menu looks pretty good - how about instead of using text like "menu" we use conventional icons?
    With the limited space on mobile its better to refer to things that people are used to instead of text.

    I've found the following site pretty useful.
    http://fontawesome.io/icons/

  2. 
      
david
  1. 
      
  2. Hmm. I'm not sure about this. How about we just fold everything into the drop-down menu (so we have a single thin bar at the top that has the logo, says "Review Board", and the menu).

    1. That sounds good. Other option that also crossed my mind was to have a dedicated Menu-icon for the "My Dashboard", "All Review Requests" stuff beside the top Menu-icon (So we would have logo, "Review Board", menu, menu). Or do we go with one Menu as you suggested?

    2. My instinct says that a single menu is better but this might be an opportunity to test out a couple paper prototypes with people.

  3. 
      
Review request changed

Status: Discarded

Loading...