• 
      

    Add new LessCSS mixins for better responsive UIs.

    Review Request #10657 — Created Aug. 14, 2019 and submitted — Latest diff uploaded

    Information

    Review Board
    release-4.0.x
    296d162...

    Reviewers

    In Review Board 2.5, we introduced the beginnings of mobile UI support.
    That implementation was pretty simplistic. We had mixins for defining
    rules when in mobile mode (defined as a viewport or screen width of <=
    720px), or for showing/hiding when in mobile mode.

    This implementation was pretty naive. It wasn't fine-grained enough to
    handle the ways in which the UI would break at various viewport sizes,
    and made bad assumptions about what constituted a mobile experience.
    These ultimately meant that on a mobile phone, things were fine, and at
    a larger desktop window, things were fine, but in-between the UI could
    look inconsistent or bad.

    This change introduces some newer mixins designed to apply rules at
    various viewport sizes. Rather than any global device width constants,
    callers are expected to specify a size that makes sense for its place in
    the UI. For instance, the UI shell (top bar, search, sidebar, etc.) may
    optimize better for a particular size (based on the point in which the
    search bar would begin to overlap the "Review Board <version>" label,
    and the sidebar's display may be based on that exact same width, but a
    configuration form that normally aligns field inputs alongside labels
    may instead choose to alter its UI based on a separate viewport width
    (as it has less room to work with, when a sidebar is present).

    The new mixin functions (.on-width-gt(), .on-width-gte(),
    .on-width-lt(), and .on-width-lte()) take a viewport width, a
    ruleset, and an optional "else" ruleset, for convenience. These live in
    the #rb-ns-ui.screen namespace.

    The base page also provides a mixin function for specifying rules when
    the UI shell is in mobile or desktop mode (which also now occurs at a
    width of 800px, and not 720px, to prevent overlapping). These are
    .on-shell-desktop-mode() an .on-shell-mobile-mode() in
    #rb-ns-pages.base. These are intended for pieces of UI that are
    dependent on the exact mode the UI is in (the sidebar's display mode,
    for example).

    At this time, nothing (including the sidebar) makes use of the UI shell
    helpers. An upcoming change to the sidebar will take advantage of this,
    though.

    Tested the Review Board UI in mobile/desktop modes.

    Made use of these mixins in some upcoming changes.