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

Refactor sticky footer #51

Closed
isaisabel opened this issue Jan 6, 2020 · 0 comments
Closed

Refactor sticky footer #51

isaisabel opened this issue Jan 6, 2020 · 0 comments
Assignees
Labels
bug Something isn't working timescale/imminent Ready to be assigned to developers ui The user interface can be improved
Milestone

Comments

@isaisabel
Copy link
Contributor

The sticky footer on the website is unreliable at certain screen resolutions. We should refactor the sticky-footer code to fix the tendency to cover up content or position itself incorrectly in certain scenarios.


The concept of the sticky footer is that it should appear at the bottom of the screen if the page is less than the height of the view (example), or at the bottom of the content if the page is more than the height of the view (example).

A function in site.js is used to reposition the sticky footer whenever the page resizes, to catch cases where the page is resized and the breakpoint of page height > view height is crossed.

Unfortunately, this page resize function doesn't catch all page resizes. For example, it doesn't catch cases where an expansion/accordion panel increases the page height. This can lead to issues where the footer is rendered on top of and thereby obscuring page content.


We should fix this issue by refactoring the methodology for the footer positioning. Instead of using javascript to toggle the footer sticky-ness according to page height, we should simply use a flex layout to grow the page content to the height of the view if it were shorter than the view. The footer would then statically occur at the bottom of the page content, and the flex functionality would position it at the bottom of the page due to the behavior of flex-grow.

In other words, growing the height of the HTML to actually fill the page, instead of only being the height of the content as it is currently:
image

@isaisabel isaisabel added bug Something isn't working ui The user interface can be improved timescale/imminent Ready to be assigned to developers labels Jan 6, 2020
@isaisabel isaisabel added this to the Version 1.2 milestone Jan 6, 2020
@isaisabel isaisabel self-assigned this Jan 27, 2020
isaisabel added a commit that referenced this issue Feb 11, 2020
footer is now positioned using flex grow instead of js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working timescale/imminent Ready to be assigned to developers ui The user interface can be improved
Projects
None yet
Development

No branches or pull requests

1 participant