Redo how sidebars are represented, themed, and populated on the page.
Review Request #10714 — Created Sept. 12, 2019 and submitted
When we introduced sidebars initially, we had an area where a sidebar
could go on the page for desktop mode, and a separate area for mobile
mode. The mobile sidebar was a bit different, in that it had links for
logging in/out, changing settings, and going to Docs, Support, and
Admin.It was up to each page to populate both sidebars, and styling wasn't
consistent across both. This made it a bit of a pain to manage both
types of sidebars, making it all more error-prone. The aesthetic of the
sidebar was also a bit old-looking, resembling the Review Board 2.0 UI a
bit too much. On top of that, our CSS transitions often broke when
opening the sidebar, making things look really sloppy.This change fully redesigns the sidebar. There is now a single, standard
template block where sidebar content can go, housing either the
new-style or old-style CSS components for sidebar content. This defaults
to containing the Review Board navigation bar (New Review Request, My
Dashboard, etc.), followed by the page's sidebar content. Styling is
consistent (and improved if using the new CSS components), transitions
work correctly, and on top of it, the sidebar's look matches that of the
page theme (blue for Dashboard, brown for review requests, etc.).This should mostly Just Work (TM) for any pages already making use of
sidebars, but those pages will definitely be improved, aesthetically, if
they try to use the new components. Going forward, we'll want to
eventually remove support for the old sidebar styling.There are some areas in which things will not work, however. For
instance, the New Review Request page tries to move the desktop version
of the sidebar back into view for navigation purposes, which will not
work with the new design. As it was a bit of a hack on top of the
sidebar code, a more formal, future-proof solution will be needed, and
that will be tackled separately.The elements are defined as a new
.rb-c-page-sidebar
component, which
provides standard styling and room for future expansion. This groups the
sidebar into multiple layers, one of which can be shown at a time.
Layers can contain a.rb-c-sidebar
, or any other content as needed by
the page.Some of the styling and the mixin functions for the new
rb-c-sidebar
component have also been moved for this, allowing sidebars to be styled
independent of their place on the page. This will further evolve in
upcoming changes.
Tested all the current sidebars in mobile and desktop mode.
Tested this along with the upcoming sidebar work in the new Admin UI.
Description | From | Last Updated |
---|---|---|
? -> > |
david |
- Change Summary:
-
- Moved more of the page-centric layout and styling out of
rb-c-sidebar
and into the base page styles. - Added an inner
div
for the sidebar calledpage-sidebar-content
. - Along with the above, scrolling and some layout quirks have been fixed.
- Moved more of the page-centric layout and styling out of
- Description:
-
When we introduced sidebars initially, we had an area where a sidebar
could go on the page for desktop mode, and a separate area for mobile mode. The mobile sidebar was a bit different, in that it had links for logging in/out, changing settings, and going to Docs, Support, and Admin. It was up to each page to populate both sidebars, and styling wasn't
consistent across both. This made it a bit of a pain to manage both types of sidebars, making it all more error-prone. The aesthetic of the sidebar was also a bit old-looking, resembling the Review Board 2.0 UI a bit too much. On top of that, our CSS transitions often broke when opening the sidebar, making things look really sloppy. This change fully redesigns the sidebar. There is now a single, standard
template block where sidebar content can go, housing either the new-style or old-style CSS components for sidebar content. This defaults to containing the Review Board navigation bar (New Review Request, My Dashboard, etc.), followed by the page's sidebar content. Styling is consistent (and improved if using the new CSS components), transitions work correctly, and on top of it, the sidebar's look matches that of the page theme (blue for Dashboard, brown for review requests, etc.). This should Just Work (TM) for any pages already making use of sidebars,
but those pages will definitely be improved, aesthetically, if they try to use the new components. Going forward, we'll want to eventually remove support for the old sidebar styling. At the moment, the elements for the page's main wrapper for the sidebar
(where the mobile links and template-defined sidebar are) isn't using any modern component naming. That's being considered for a larger rethink of the organization of the page's shell. + + Some of the styling and the mixin functions for the new
rb-c-sidebar
+ component have also been moved for this, allowing sidebars to be styled + independent of their place on the page. This will further evolve in + upcoming changes as the page shell becomes a component. - Commit:
-
ef48ad6f1adaadbc17e158165828b51a259e61dd6de59c4487f4ef6b16881506463de93835ca8d63
- Diff:
-
Revision 2 (+198 -239)
Checks run (2 succeeded)
- Change Summary:
-
- Moved the entirety of
#page-sidebar
intotemplates/base/page_sidebar.html
(and renamed that from_page_sidebar.html
). - Added a new CSS component for
#page-sidebar
(.rb-c-page-sidebar
). - Fixed up some regressions with the dashboard page. These will be further fixed in an upcoming rewrite of its sidebar support.
- Moved the entirety of
- Description:
-
When we introduced sidebars initially, we had an area where a sidebar
could go on the page for desktop mode, and a separate area for mobile mode. The mobile sidebar was a bit different, in that it had links for logging in/out, changing settings, and going to Docs, Support, and Admin. It was up to each page to populate both sidebars, and styling wasn't
consistent across both. This made it a bit of a pain to manage both types of sidebars, making it all more error-prone. The aesthetic of the sidebar was also a bit old-looking, resembling the Review Board 2.0 UI a bit too much. On top of that, our CSS transitions often broke when opening the sidebar, making things look really sloppy. This change fully redesigns the sidebar. There is now a single, standard
template block where sidebar content can go, housing either the new-style or old-style CSS components for sidebar content. This defaults to containing the Review Board navigation bar (New Review Request, My Dashboard, etc.), followed by the page's sidebar content. Styling is consistent (and improved if using the new CSS components), transitions work correctly, and on top of it, the sidebar's look matches that of the page theme (blue for Dashboard, brown for review requests, etc.). ~ This should Just Work (TM) for any pages already making use of sidebars,
~ but those pages will definitely be improved, aesthetically, if they try ~ to use the new components. Going forward, we'll want to eventually ~ remove support for the old sidebar styling. ~ This should mostly Just Work (TM) for any pages already making use of
~ sidebars, but those pages will definitely be improved, aesthetically, if ~ they try to use the new components. Going forward, we'll want to ~ eventually remove support for the old sidebar styling. ~ At the moment, the elements for the page's main wrapper for the sidebar
~ (where the mobile links and template-defined sidebar are) isn't using ~ any modern component naming. That's being considered for a larger ~ rethink of the organization of the page's shell. ~ There are some areas in which things will not work, however. For
~ instance, the New Review Request page tries to move the desktop version ~ of the sidebar back into view for navigation purposes, which will not ~ work with the new design. As it was a bit of a hack on top of the + sidebar code, a more formal, future-proof solution will be needed, and + that will be tackled separately. + + The elements are defined as a new
.rb-c-page-sidebar
component, which+ provides standard styling and room for future expansion. This groups the + sidebar into multiple layers, one of which can be shown at a time. + Layers can contain a .rb-c-sidebar
, or any other content as needed by+ the page. Some of the styling and the mixin functions for the new
rb-c-sidebar
component have also been moved for this, allowing sidebars to be styled independent of their place on the page. This will further evolve in ~ upcoming changes as the page shell becomes a component. ~ upcoming changes. - Commit:
-
6de59c4487f4ef6b16881506463de93835ca8d63de0c047530e4416df50c8e97a13918d6d936eb81
- Diff:
-
Revision 3 (+544 -386)
Checks run (2 succeeded)
- Change Summary:
-
Added a missing change to use the new
page_sidebar.html
template name, which got rolled up into another change. - Commit:
-
de0c047530e4416df50c8e97a13918d6d936eb8190d07bb6774a7ab77e981c5af5a7f68558f15087
- Diff:
-
Revision 4 (+544 -386)
Checks run (2 succeeded)
- Change Summary:
-
Fixed a typo in a doc comment.
- Commit:
-
90d07bb6774a7ab77e981c5af5a7f68558f150871c4efcd5423f0e46ae78aac4c11089789b7627b3
- Diff:
-
Revision 5 (+544 -386)