doc: style fixes for the TOC #4748
Conversation
- Hide the scrollbar on the TOC on all browsers. It was never the intention for it to be visible with the scroll indication in place. A wrapper element was necessary to achieve the desired effect. - Fixed the scroll indication gradient on Safari, which was caused by the wrong from-color, which now matches the to-color. - Fixed a issue in old IE where the TOC didn't render on the correct position through setting `left: 0` and `top: 0` on it.
silverwind
force-pushed
the
doc-css-fixes
branch
from
fb12920
to
fea9372
Compare
|
LGTM |
|
/cc @nodejs/website just to make sure there's a bit of sync on styling |
|
Forgot to mention, but the prime motivation for removing the scrollbar was that the fade-out gradient was rendering above the scrollbar on platforms other than OS X platforms (which has overlay scrollbars in all browsers). I tried various hacks to remove the scrollbars and the most simple and compatible solution was to hide the scrollbar in a |
|
@silverwind |
|
Never assume scroll bars are 16px wide. On my elementaryos system every On 02:51, Tue, 19 Jan 2016 Xcat Liu notifications@github.com wrote:
|
|
@fabiosantoscode You're right, it's a bad assumption. Calculating scrollbar width seems a rather error-prone business to me, it does require JS, right? |
|
I would certainly avoid doing it, but it's still a lot better than assuming it's only 16px ;) |
|
Oh, by the way: I don't think we actually need to account for scrollbars smaller than 16px because there's a lot of empty spacing in the TOC. Smaller scrollbars shouldn't matter as no content is lost off-screens, it's only the bigger ones that would cause issues. |
|
scrollBarWidth = elm.offsetWidth - elm.clientWidth, provided there are no borders or padding. |
- Hide the scrollbar on the TOC on all browsers. It was never the intention for it to be visible with the scroll indication in place. A wrapper element with 20px padding was added to accommodate for hopefully all scrollbar widths as well as to avoid overflowing content. - Fixed the scroll indication gradient on Safari, which was caused by the wrong from-color, which now matches the to-color. - Fixed a issue in old IE where the TOC didn't render on the correct position through setting `left: 0` and `top: 0` on it. PR-URL: #4748 Reviewed-By: James M Snell <jasnell@gmail.com>
|
Landed in 55607a0. I think the point brought up by @fabiosantoscode is, while valid, not a concern because there's no content being hidden off-screen (the TOC entries are not wide enough), so it doesn't matter if the scrollbar is less wide. To accomodate for possibly wider system scrollbars, I changed the value to |
- Hide the scrollbar on the TOC on all browsers. It was never the intention for it to be visible with the scroll indication in place. A wrapper element with 20px padding was added to accommodate for hopefully all scrollbar widths as well as to avoid overflowing content. - Fixed the scroll indication gradient on Safari, which was caused by the wrong from-color, which now matches the to-color. - Fixed a issue in old IE where the TOC didn't render on the correct position through setting `left: 0` and `top: 0` on it. PR-URL: #4748 Reviewed-By: James M Snell <jasnell@gmail.com>
- Hide the scrollbar on the TOC on all browsers. It was never the intention for it to be visible with the scroll indication in place. A wrapper element with 20px padding was added to accommodate for hopefully all scrollbar widths as well as to avoid overflowing content. - Fixed the scroll indication gradient on Safari, which was caused by the wrong from-color, which now matches the to-color. - Fixed a issue in old IE where the TOC didn't render on the correct position through setting `left: 0` and `top: 0` on it. PR-URL: #4748 Reviewed-By: James M Snell <jasnell@gmail.com>
|
This still needs backporting. Which tag is preferred for cases like these by the way? |
|
@silverwind it had the correct tag. It is in v4.x-staging. Will be in the next release |
|
For context
|
|
Ah, got it! Am I free to land this on |
|
@silverwind we do not land on v4.x unless there is a release going on. Landing on staging is as good as landing on v4.x This makes it very easy for us to do security releases without cherry picking. TLDR; v4.x is only touched when there is a release |
|
Ah, alright, thanks for the explanation! |
- Hide the scrollbar on the TOC on all browsers. It was never the intention for it to be visible with the scroll indication in place. A wrapper element with 20px padding was added to accommodate for hopefully all scrollbar widths as well as to avoid overflowing content. - Fixed the scroll indication gradient on Safari, which was caused by the wrong from-color, which now matches the to-color. - Fixed a issue in old IE where the TOC didn't render on the correct position through setting `left: 0` and `top: 0` on it. PR-URL: #4748 Reviewed-By: James M Snell <jasnell@gmail.com>
- Hide the scrollbar on the TOC on all browsers. It was never the intention for it to be visible with the scroll indication in place. A wrapper element with 20px padding was added to accommodate for hopefully all scrollbar widths as well as to avoid overflowing content. - Fixed the scroll indication gradient on Safari, which was caused by the wrong from-color, which now matches the to-color. - Fixed a issue in old IE where the TOC didn't render on the correct position through setting `left: 0` and `top: 0` on it. PR-URL: nodejs#4748 Reviewed-By: James M Snell <jasnell@gmail.com>
- Hide the scrollbar on the TOC on all browsers. It was never the intention for it to be visible with the scroll indication in place. A wrapper element with 20px padding was added to accommodate for hopefully all scrollbar widths as well as to avoid overflowing content. - Fixed the scroll indication gradient on Safari, which was caused by the wrong from-color, which now matches the to-color. - Fixed a issue in old IE where the TOC didn't render on the correct position through setting `left: 0` and `top: 0` on it. PR-URL: nodejs#4748 Reviewed-By: James M Snell <jasnell@gmail.com>
- Hide the scrollbar on the TOC on all browsers. It was never the intention for it to be visible with the scroll indication in place. A wrapper element with 20px padding was added to accommodate for hopefully all scrollbar widths as well as to avoid overflowing content. - Fixed the scroll indication gradient on Safari, which was caused by the wrong from-color, which now matches the to-color. - Fixed a issue in old IE where the TOC didn't render on the correct position through setting `left: 0` and `top: 0` on it. PR-URL: nodejs#4748 Reviewed-By: James M Snell <jasnell@gmail.com>
- Hide the scrollbar on the TOC on all browsers. It was never the intention for it to be visible with the scroll indication in place. A wrapper element with 20px padding was added to accommodate for hopefully all scrollbar widths as well as to avoid overflowing content. - Fixed the scroll indication gradient on Safari, which was caused by the wrong from-color, which now matches the to-color. - Fixed a issue in old IE where the TOC didn't render on the correct position through setting `left: 0` and `top: 0` on it. PR-URL: nodejs#4748 Reviewed-By: James M Snell <jasnell@gmail.com>
Followup for #4621, which unfortunately hadn't gotten enough enough browser testing besides Chrome/Firefox on OS X. I tested on Chrome, Firefox, Safari and IE11 in all modes down to IE7 on Windows and OS X.
left: 0andtop: 0on it.cc: @nodejs/documentation