Remove visual highlight for anchored method links #1363
Conversation
| @@ -581,7 +581,6 @@ main .method-detail { | |||
|
|
|||
| main .method-detail:target { | |||
| margin-left: -10px; | |||
| border-left: 10px solid var(--border-color); | |||
There was a problem hiding this comment.
The value margin-left: -10px should be "-#{border_left_width}px". If border-left is 0, margin-left should also be 0.
However, this border-left is a highlight of the focused method. Could you suggest a better highlight instead of completely removing it?
There was a problem hiding this comment.
Ah, that makes sense now. Given that the anchor link reliably brings the method to the top of the viewport, I think we could remove both border-left and margin-left.
The method name is easy to spot without extra highlighting. It will look like this if we remove both the border and margin:
CleanShot.2025-05-07.at.23.29.28.mp4
There was a problem hiding this comment.
This is one of the features of RDoc. I don't want to remove it as possible if it is fixable.
This border-left exists in other links to heading tags, not only to method links.
Differences are:
Border-left to method links are applied to the whole div.method-detail content while border-left to other links are only applied to heading tags.
How about changing the border-left target to heading of the method detail?
It will be more consistent between method links and other links to heading tags.
- main .method-detail:target {
+ main .method-detail:target .method-heading {There was a problem hiding this comment.
I like this! Pushed up 212b284 and updated the screenshot in PR body.
There was a problem hiding this comment.
Can you leave the margin-left and border style as is?
There is a layout shift. On the other hand, h2:target and the original .method-detail:target doesn't have this layout shift.
Of course we can discuss adding a padding to h2:target and/or .method-detail:target .method-heading, with or without this layout shift.
But it's easy to merge if the point of this pull request is clear.
There was a problem hiding this comment.
Sure thing. Sorry for all the back and forth. Updated.
JuanitoFatas
force-pushed
the
remove-border-left-from-method-details
branch
from
1033728 to
e6fd1f8
Compare
JuanitoFatas
changed the title
|
In SDoc we show a small highlight next to the method as well: |
JuanitoFatas
force-pushed
the
remove-border-left-from-method-details
branch
from
e6fd1f8 to
212b284
Compare
JuanitoFatas
force-pushed
the
remove-border-left-from-method-details
branch
from
212b284 to
8c02435
Compare
It feels a bit awkward with the scroll bar on the left 😅 E.g. Process#kill. This PR changes the visual highlight to only apply on the heading for anchored method links.