Add helper for hiding global bar #2364
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
injms
force-pushed
the
update-global-bar-behaviour
branch
from
b9f97b4
to
84eff48
Compare
injms
force-pushed
the
update-global-bar-behaviour
branch
from
84eff48
to
d45685f
Compare
Currently the global bar is initially hidden, then shown using JavaScript - this causes a shift in the layout of the page (aka jank) and means that the global bar is not available for users without JavaScript. To avoid this, a change will need to be made in Static to the make the global bar be initially shown by default. The bar can then be hidden on pages that don't need it - and doing this using CSS will avoid jank. This change adds a helper that checks whether a page should hide the global bar; the view can then add a class to the body element that will hide the global bar. These changes won't have any effect until Static has been updated.
injms
force-pushed
the
update-global-bar-behaviour
branch
from
d45685f
to
fe9ccc3
Compare
injms
commented
Oct 18, 2021
Comment on lines
+72
to
+76
| "^/coronavirus$", | ||
| "^/coronavirus/.*$", | ||
| "^/transition(.cy)?$", | ||
| "^/transition-check/.*$", | ||
| "^/eubusiness(\\..*)?$", |
There was a problem hiding this comment.
Note to self - check if these paths need updating.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Adds a helper that checks whether a page should hide the global bar; the view can then add a class to the body element that will hide the global bar.
These changes won't have any effect until Static has been updated as Static needs to contain the CSS for this to have any impact. Static needs to be updated to flip the behaviour from hide by default to show by default.
Why
Currently the global bar is initially hidden, then shown using JavaScript - this causes a shift in the layout of the page (aka jank aka Cumulative Layout Shift) and means that the global bar is not available for users without JavaScript.
(More about Cumulative Layout Shift on web.dev.)
CLS
To avoid this, a change will need to be made in Static to the make the global bar be initially shown by default. The bar can then be hidden on pages that don't need it - and doing this using CSS will avoid jank.
The screenshot below shows the layout shift that occurs when the global bar appears:
As the search form is present, it's frustrating for users when they select a link only for the layout shift to move the page and a different link to be selected.
This is also present on larger screens, though the effect is dwarfed by the CLS caused by the appearance of the cookie banner:
Worth bearing in mind that for users that have made a cookie choice, the CLS will only be due to the global bar.
No JavaScript
And for users without JavaScript turned on, the global bar does not appear at all:
But why does this change involve collections?
The global bar should not appear on certain pages - such as the Brexit or Coronavirus landing pages. Previously there was some JavaScript to prevent the global bar from appearing. This has been changed to an helper in the application that can be used to add a class to the body if the global should not appear.