Skip to content

Remove visual highlight for anchored method links #1363

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Remove visual highlight for anchored method links #1363

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions lib/rdoc/generator/template/darkfish/css/rdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -579,8 +579,8 @@ main .method-detail {
margin-bottom: 2.5em;
}

main .method-detail:target {
margin-left: -10px;
main .method-detail:target .method-heading {
margin-left: 10px;
border-left: 10px solid var(--border-color);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
heading_borderleft_style

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 {

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this! Pushed up 212b284 and updated the screenshot in PR body.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure thing. Sorry for all the back and forth. Updated.

}

Expand Down
Loading