Add new LessCSS mixins for better responsive UIs.

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

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

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.

Loading...