• 
      

    Review Board Mobile: Review Request Page Box

    Review Request #5655 — Created March 24, 2014 and discarded — Latest diff uploaded

    Information

    Review Board
    master

    Reviewers

    Review Board Mobile: Review Request Page Box

    Made the review page (/r/:id) responsive, so it can be used on a mobile device
    without hassle.

    Changes:

    • Viewport zoom is disabled, so that mobile devices will not automatically
      try to adjust the rendering to fit everything into the page. This makes
      the text much easier to read and at its natural size.
    • Action bar (close, update, review, etc.) responds naturally to size, and
      collapses naturally into a pulldown menu bar when there is not enough
      horizontally. Since the number of elements here depends on the state of
      the user/review (e.g. logged in, etc.) and the width of the element is
      unknown prior to rendering, this change is taken care of by javascript.
      It also listens to the resize event, so when orientation is changed on
      the phone, it adapts accordingly.
    • The Information box that is usually on the right handside of the review
      detail box responds to screensize using css media queries. If there is
      not enough space, the box collapses into a toggler which can be used to
      open or close the box. This also saves space for limited screen size on
      mobile
    • Writing reviews and comments is more natural to the mobile interface, as
      the box fits nicely in the screen and the text size is natural. CSS
      media queries have been used to adjust the size and the modal responds
      to the screen size accordingly.
    • The diff viewer does not extrude from the review box and create empty
      white space in the webpage, and fixes the scrolling of the page so the
      user does not go off page. This is done by making the inside content
      scrollable sideways. This user interaction is more natural, because it
      does not get in the way of the user when the user is navigatint the page
      but if necessary the user can scroll to view the diffs.
    • Margins and paddings have been reduced on mobile due to the fact that
      often times the screen size is very limited, and we want to maximise the
      available screen space.

    This change generally reflects the user interface standards expected on mobile,
    which is to collapse unnecessary content and let content be accessible but not
    get in the way of the user.

    The changes for the diff viewer can be seen from a video that can be accessed
    on the dropbox link below:

    https://www.dropbox.com/sh/lryf3dw5ptooss2/UKG6k5xz6G

    Tested on:
    - iPhone 5S (real hardware)
    - desktop browser, changing the screen width
    - chrome device emulator (which can emulate different mobile devices)