Add CSS to make top doc box have a fade, rather than hard cutoff #570
Conversation
The current hard cutoff in the docs often results in people not realising that the doc box can be expanded, and often resulting in confusion because the most helpful examples are often in the module doc box. This change uses some simple CSS tweaks to replace the hard cut-off with a visualfade, so it's obvious that there's content hidden out of view. Doing this required removing the CSS transition, as it hard to correctly transition the height property of CSS element of unknown target height. But the improved discoverablility of the doc content seems like a worthwhile tradeoff.
There was a problem hiding this comment.
Nice one!
I also stumbled over this in the past.
However, I am not sure if there is an easier way to make this more visible to users... 🤔
My idea would be to move the arrow from top left to bottom center. I guess this is where the most people would expect an "expand/collapse indicator", didn't they?
I am not an ux/ui expert. I also have only limited knowledge about css. Just wanted to share my thoughts on this. ☺
|
@StefMa agree there better ways to do this. But this change only requires a few lines of CSS, so it’s quick and easy todo. I don’t consider this “good”, just better than what we have, and a solution that I could implement quickly in my spare time. If people have suggestions for improvements, please submit a PR! Ideally I would want to do something similar to go docs, but that’s a much bigger effort than I have time for right now. |
There was a problem hiding this comment.
I agree with @StefMa; moving the carrot might be an even bigger improvement. That said, this is undoubtedly already an improvement for discoverability, so... if anyone wants to work on further improvements, yes please. Until then; let's ship this.
Thanks @thomaspurchas!
|
Just wanted to refer to this lines as I guess this is relevant in case we want to move the arrow 🙃 Also this one |
The current hard cutoff in the docs often results in people not realising that the doc box can be expanded, and often resulting in confusion because the most helpful examples are often in the module doc box.
This change uses some simple CSS tweaks to replace the hard cut-off with a visualfade, so it's obvious that there's content hidden out of view. Doing this required removing the CSS transition, as it hard to correctly transition the height property of CSS element of unknown target height. But the improved discoverablility of the doc content seems like a worthwhile tradeoff.
Before:
After:
