Opened 12 years ago

Closed 11 years ago

#19224 closed Bug (fixed)

Documentation version switcher obscures footer

Reported by: aruseni Owned by: Paul Grau
Component: *.djangoproject.com Version: 1.5
Severity: Normal Keywords:
Cc: Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

There is a documentation switcher at the right bottom corner of every documentation page.

It is very nice and neat, but it has a little issue: if you scroll down to the bottom of the page, you cannot read the text in the page footer.

We could solve this by adding a tiny piece of JavaScript in there, which would listen to the scroll event and reposition the documentation switcher in case the footer (or some part of it) is visible (so the documentation version switcher remains on top of the footer when the footer is shown).

Here is an example (use ​this bookmarket to load jQuery if you are going to test this by running the code in the JS console):

Code highlighting: 

var versions = $("ul#doc-versions")
var footer = $("div#footer")

$(window).scroll(function() {
    var window_bottom = $(window).scrollTop() + $(window).height();
    if(window_bottom >= $(document).height() - (footer.height() + 20)) {
        versions.css("bottom", footer.height() - ($(document).height() - window_bottom) + 25 + "px");
    } else {
        versions.css("bottom", "5px");
    }
});

Of course, we can easily rewrite it to only use plain JavaScript (without jQuery).

Attachments (1)

djangoproject_footer.png​ (32.9 KB ) - added by Tim Graham 11 years ago.

Download all attachments as: .zip

Change History (12)

comment:1 by Claude Paroz, 12 years ago

Triage Stage: Unreviewed → Accepted
Type: Uncategorized → Bug

comment:2 by Lebedev Ilya, 12 years ago

Owner: changed from nobody to Lebedev Ilya
Status: new → assigned

comment:3 by reecelong, 12 years ago

Has patch: set
Owner: changed from Lebedev Ilya to reecelong

I came across this ticket the other night and saw that it hadn't been touched in a few months, so I thought I would take a look at it. After looking through the source for djangoproject.com, I appeared (to me at least) that you guys don't use much javascript. So, after talking with a friend, we came up with a small CSS hack to accomplish the goal. Changing the bottom property of the doc-versions ul to 50px pushes it up just enough to rest on the bottom of the inner menu frame. I have made the change in a branch that I just submitted, but if you feel like it doesn't look good or that we should go back to the drawing board, just let me know. Thanks!

comment:4 by Claude Paroz, 12 years ago

Please link to the branch/pull request.

comment:5 by reecelong, 12 years ago

Sorry about that! Here's the link to the pull request: ​https://github.com/django/djangoproject.com/pull/48

comment:6 by Daniele Procida, 11 years ago

Owner: changed from reecelong to Daniele Procida

I have tentatively reserved this ticket for first-time committers who take part in the ​Don't be afraid to commit workshop at the ​DjangoCon Europe 2013 sprints on 18th and 19th May.

If you want to tackle this ticket before then, please don't let the fact that it's assigned to me stop you. Feel free to re-assign it to yourself and do whatever you like to it.

comment:7 by Paul Grau, 11 years ago

Owner: changed from Daniele Procida to Paul Grau
Version: 1.4 → 1.5

Will try to find a good (and maybe completely different) solution for this.

comment:8 by Paul Grau, 11 years ago

Please review my pull request: ​https://github.com/django/djangoproject.com/pull/52

This includes both the mentioned CSS quickfix (moving the always-fixed element up a bit) as well as an enhanced JS version which works like the "affix" known from bootstrap. Browsers with JS disabled fallback to the CSS fixed version.
I tested the JS in Chrome, Safari and Firefox (Mac).

by Tim Graham, 11 years ago

Attachment: djangoproject_footer.png​ added

comment:9 by Tim Graham, 11 years ago

Easy pickings: unset
Summary: The documentation version switcher → Documentation version switcher obscures footer

The JSS/CSS fix here seems like overkill. How about if we just break the footer text into multiple lines so the switcher won't collide for most resolutions?

comment:10 by Claude Paroz, 11 years ago

What about simply adding a right-margin to the footer? Something like #footer > p : margin-right: 18em;

comment:11 by Tim Graham <timograham@…>, 11 years ago

Resolution: → fixed
Status: assigned → closed

In 3e02aa255994af7e01d833356ce6d8c9ae49612b/djangoproject.com:

Fixed #19224 -- Prevented doc version switcher from obscuring footer.

Thanks aruseni for the report and claudep for suggesting the fix.

Note: See TracTickets for help on using tickets.
Back to Top