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.

Sign up for GitHub

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

Jump to bottom

Pin footer to the bottom of the viewport #2747

Closed
eaquigley opened this issue Nov 18, 2015 · 4 comments
Closed

Pin footer to the bottom of the viewport #2747

eaquigley opened this issue Nov 18, 2015 · 4 comments
Assignees
@kcondon
Milestone
4.12

Comments

@eaquigley
Copy link
Contributor

eaquigley commented Nov 18, 2015 •
edited by mheppler

In the app, the footer moves around if a page has less content or no content.

Pages experiencing this where it is really noticeable:

  • My Data (when there is nothing or not many)
  • Notifications (when there are none or not many)
  • Account Information
  • Permissions Pages (Dataverse, Dataset, Files)
  • Templates (when there are no templates or not many)
  • Groups
  • Manage Dataset Guestbooks

Note: When I say really noticeable, I am referring to how when you move from one page to the other the footer moves and is distracting, sometimes you see it, sometimes you don't.
@eaquigley eaquigley changed the title Responsiveness: No Fixed Page Width Causes Footer to Jump Around Responsiveness: No Fixed Page Height Causes Footer to Jump Around Nov 18, 2015
@mercecrosas mercecrosas modified the milestone: In Review Nov 30, 2015
@mheppler mheppler added the UX & UI: Design This issue needs input on the design of the UI and from the product owner label Jan 28, 2016
@scolapasta scolapasta modified the milestone: Not Assigned to a Release Jan 28, 2016
@pdurbin pdurbin added User Role: Guest Anyone using the system, even without an account and removed zTriaged labels Jun 30, 2017
@TaniaSchlatter TaniaSchlatter changed the title Responsiveness: No Fixed Page Height Causes Footer to Jump Around Pin footer to the bottom of the viewport Feb 5, 2019
@TaniaSchlatter
Copy link
Member

Pinning the footer to the bottom of the viewport will address the issue of the footer jumping around.

@djbrooke djbrooke removed Feature: Search/Browse UX & UI: Design This issue needs input on the design of the UI and from the product owner User Role: Guest Anyone using the system, even without an account ready for estimation labels Feb 6, 2019
@pdurbin
Copy link
Member

pdurbin commented Feb 13, 2019

Is the idea that the footer will always be visible? If so, I'm concerned about Dataverse installations with tall footers such as https://data.cifor.org will lose a lot of valuable screen real estate. Mockup below.

screen shot 2019-02-13 at 9 09 59 am

@TaniaSchlatter
Copy link
Member

TaniaSchlatter commented Feb 13, 2019 •
edited

That’s a good point @pdurbin. The image at the top of this article more accurately describes the desired behavior - sticky only when content is short:
https://css-tricks.com/couple-takes-sticky-footer/

Also, we would not want a sticky footer on mobile devices.

@mheppler mheppler self-assigned this Feb 19, 2019
mheppler added a commit that referenced this issue Feb 19, 2019
@mheppler
Add some CSS to make the footer sticky to the bottom [ref #2747]
482676c
@mheppler
Copy link
Contributor

Added some CSS to make the footer sticky to the bottom of the browser window if the content is short, or the bottom of the content if it's longer than the browser window.

Made sure the footer for widgets still is fixed as intended by design. Looked at some customization as well, like the one pointed out above, and that will require some CSS tweaking but is still achievable.

NOTE: This feature will require release notes instructions to update any current custom CSS associated with the footer.

screen shot 2019-02-19 at 3 17 56 pm

@mheppler mheppler mentioned this issue Feb 19, 2019
Merged
5 tasks
@mheppler mheppler removed their assignment Feb 19, 2019
mheppler added a commit that referenced this issue Feb 19, 2019
@mheppler
Removed extra open comment tag [ref #2747]
2c33802
@kcondon kcondon self-assigned this Feb 20, 2019
kcondon added a commit that referenced this issue Feb 20, 2019
@kcondon
Merge pull request #5560 from IQSS/2747-sticky-footer
eb3c5c4 
Add some CSS to make the footer sticky to the bottom [ref #2747]
@kcondon kcondon closed this as completed Feb 20, 2019
@djbrooke djbrooke added this to the 4.12 milestone Feb 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kcondon kcondon

Labels
None yet
Projects
None yet
Milestone
4.12
Development

No branches or pull requests
9 participants
@pdurbin @mercecrosas @mheppler @scolapasta @kcondon @eaquigley @djbrooke @pameyer @TaniaSchlatter