doc: make scrollbar wider in large screens #6445
Conversation
|
Perhaps just |
|
@ChALkeR 0.7vw kinda works for 2048+, so that's one less media query, but for 1280-2048 I can't find a satisfying value of vw that will work across all widths. Not a UX expert though. |
claudiorodriguez
force-pushed
the
docs-scrollbar-width-large-screens
branch
from
1c95ed7 to
3e8d713
Compare
|
@nodejs/documentation @nodejs/website |
|
LGTM let's land this and improve later. nit: Can you provide a screenshot of a rendered page? |
|
I injected the change in chrome. Maybe This is |
|
yeah. if no-one objects I'd go with 0.5 |
claudiorodriguez
force-pushed
the
docs-scrollbar-width-large-screens
branch
from
3e8d713 to
24fef71
Compare
| ::-webkit-scrollbar { | ||
| width: 0.5vw; | ||
| } | ||
| } |
There was a problem hiding this comment.
Could you add a new line at the end of file?
|
LGTM other than my little inline nitpick |
Adds media queries to doc css to make TOC and content scrollbars wider in larger screens. Fixes: nodejs#6443 PR-URL: nodejs#6445
claudiorodriguez
force-pushed
the
docs-scrollbar-width-large-screens
branch
from
24fef71 to
0c3f6c1
Compare
|
LGTM for |
|
@mathiask88 The reason for 0.7vw being to much is because it is now relative to the screen width, and does not correspond to the size of other elements on the page. Body font size is in css pixels, and I still don't understand why should the scrollbar size be increased for certain monitor widths but not the text itself. I don't want to block this change though, as other ones think that it's a good idea, so -0 from me. |
|
@ChALkeR I often work side by side like this |
|
I'll leave this PR open for several days to get more opinions on this. I see this as a small incremental change that, even if not perfect, will improve the current situation. The responsiveness of the doc site to different screens evidently needs some reworking (text size should probably scale, etc), but I'd leave that to future PRs. Right now the issue seems to be whether to remove the custom scrollbars entirely, or to keep this PR as is (or with some changes). |
|
If there are no strong objections, I'll merge this in a couple of hours. Something off the books and taking new PRs is better, imo. |
|
Scaling the scrollbar based on width seems like a hack to me. Nothing else on the page scales with the width, why whould the scrollbar do? No strong objection thought. By the way, for resolutions above 1080p, I'd suggest enabling OS-based scaling. Web sites are likely never going to support these resolutions properly. |
|
I also view this as a hack, and (as I stated above) I don't understand why should we scale the scrollbar size, but not the text size? If the scrollbar is too small — perhaps we should just increase its width to 15px on all screens? |
My suggestion would be to make it either static 16px or em-based (1em). |
|
I will file an alternative PR shortly. |
@silverwind I'm okay with the look and feel, text sizes etc. of all the web sites I use and I like the huge amount of space, but if a scroll bar is only a third of the width of the default bar then there is something wrong. Os based scaling is no option for me because it will introduce problems like blurry apps etc. |
|
Why the scrollbar has been customized in the first place? |
Just eye-candy basically. I could see us reducing the styling to just colors, removing dimension changes. |
|
See #6474. |
|
Another minor thing I noticed with the customization is that for example on OS X the scrollbar is always visible (does not auto hide). Maybe it is expected. |
I think that's controlled by |
|
Ok, so I made #6479 which, following suggestions from some, just removes all scrollbar styling altogether. |
|
Closed in favour of #6479 |
Checklist
Affected core subsystem(s)
doc
Description of change
Adds media queries to doc css to make TOC and content scrollbars
wider in larger screens.
Fixes: #6443