Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: Fixes an issue with the version footer when scrolling #11850

Merged
merged 2 commits into from Dec 15, 2021

Conversation

johncowen
Copy link
Contributor

Fixes #11849 , also see #11803 (comment)

@johncowen johncowen added the theme/ui Anything related to the UI label Dec 15, 2021
@johncowen johncowen requested review from jgwhite, amyrlam, a user and natmegs December 15, 2021 12:56
@vercel vercel bot temporarily deployed to Preview – consul December 15, 2021 13:00 Inactive
@vercel vercel bot temporarily deployed to Preview – consul-ui-staging December 15, 2021 13:00 Inactive
top: calc(100vh - 42px);
top: calc(max(100vh, 460px) - 42px);
}
html.has-partitions.has-nspaces .app footer {
html.has-partitions.has-nspaces .app [role='contentinfo'] {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this need html in the selector?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Discussed offline, leaving as is. Will add details here in a sec for history purposes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason we kept this is using the html. more specific selector also helps to say "this is one of our top-level application state" classes. We use this form throughout the styles for the app in several places (not many). For folks familiar with the codebase this helps to understand what it is doing, it almost "commenting as you go".

The converse argument was that making this less specific is more flexible, i.e. you could move those classes to a wrapping element (other than html) which would be beneficial if we were ever to use ember engines.

Final decision was based on:

  • If we removed it here now, logically we should also remove it everywhere else in the app now aswell - if anything this would be 'in another PR mode'.
  • There is no reason to do that until we move to something like ember engines, or have another reason not to have html as the top level wrapper.
  • If we ever did have a reason to move this to something other than html, a quick find and replace across our css files would solve that problem.
  • Adding meaning to the code via these project level 'conventions' or 'patterns' helps folks to understand things without having to read (and write) comments but has the same effect, granted you have to know these patterns for it to make sense.
  • If these classes weren't our special top-level 'page state' ones I would agree that the nodeName here is entirely unnecessary and I would make the exact same request here myself!
  • We agreed that this isn't a showstopper more of a "wait... wat?! ok no problem!"

@johncowen johncowen merged commit 20cc028 into main Dec 15, 2021
@johncowen johncowen deleted the ui/bugfix/wandering-feeters branch December 15, 2021 13:55
@hc-github-team-consul-core
Copy link
Collaborator

🍒 If backport labels were added before merging, cherry-picking will start automatically.

To retroactively trigger a backport after merging, add backport labels and re-run https://circleci.com/gh/hashicorp/consul/530067.

@hc-github-team-consul-core
Copy link
Collaborator

🍒✅ Cherry pick of commit 20cc028 onto release/1.11.x succeeded!

johncowen added a commit that referenced this pull request Dec 17, 2021
…11803) (#11819)

* ui: Add version information back into the footer (#11803)

* ui: Fixes an issue with the version footer when scrolling (#11850)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
theme/ui Anything related to the UI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

version string scrolls up when healthchecks are scrolled down
2 participants