# [PATCH] Highlight the link target line in Gitweb using CSS 3 messages from 2012-12-20 to 2012-12-20. Participants: Matthew Blissett, Junio C Hamano. Thread: https://gitlist.dev/t/32419 ## Matthew Blissett, 2012-12-20 18:16 Subject: [PATCH] Highlight the link target line in Gitweb using CSS Message-ID: <1356027399-5356-1-git-send-email-matt@blissett.me.uk> URL: https://gitlist.dev/e/1356027399-5356-1-git-send-email-matt%40blissett.me.uk ``` This is useful when a Gitweb link with a target (like #l100) refers to a line in the last screenful of text. Highlight the background in yellow, and display a ⚓ character on the left. Show the same highlight when hovering the mouse over a line number. Signed-off-by: Matthew Blissett --- The background-colour change is the 'main' (tiny) change. Consider the ::before part a suggestion. I think it helps show the target line, but it does overlap the first character of any line >999. I've tested this on the browsers I have access to, which excludes Internet Explorer. Since it's cosmetic it shouldn't matter if it doesn't work. Wikipedia use similar CSS for their citation links: gitweb/static/gitweb.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css index cb86d2d..9f54311 100644 --- a/gitweb/static/gitweb.css +++ b/gitweb/static/gitweb.css @@ -546,6 +546,16 @@ a.linenr { text-decoration: none } +a.linenr:hover, a.linenr:target { + color: #444444; + background-color: #ff4; +} + +a.linenr:hover::before, a.linenr:target::before { + content: '⚓'; + position: absolute; +} + a.rss_logo { float: right; padding: 3px 0px; -- 1.7.10.4 ``` ## Junio C Hamano, 2012-12-20 20:54 Subject: Re: [PATCH] Highlight the link target line in Gitweb using CSS Message-ID: <7vbodo4f6q.fsf@alter.siamese.dyndns.org> URL: https://gitlist.dev/e/7vbodo4f6q.fsf%40alter.siamese.dyndns.org In-Reply-To: <1356027399-5356-1-git-send-email-matt@blissett.me.uk> ``` [jc: adding area expert to Cc] Matthew Blissett writes: > This is useful when a Gitweb link with a target (like #l100) refers to > a line in the last screenful of text. Highlight the background in > yellow, and display a ⚓ character on the left. Show the same > highlight when hovering the mouse over a line number. > > Signed-off-by: Matthew Blissett > --- > The background-colour change is the 'main' (tiny) change. In the "blob" view, I think it does make it more discoverable that these line numbers are links, so I personally think a.linenr:hover part is an improvement. I am not sure about other three changes adding any value, though. > Consider the ::before part a suggestion. I think it helps show the > target line, but it does overlap the first character of any line >999. Actually, when viewing the blame view, this is even worse, as it seems to always overlap. The background color ought to be enough cue without being overly distracting, I would have to say. Jakub? Comments on any other points I may have missed? > > I've tested this on the browsers I have access to, which excludes > Internet Explorer. Since it's cosmetic it shouldn't matter if it doesn't > work. > > Wikipedia use similar CSS for their citation links: > > > gitweb/static/gitweb.css | 10 ++++++++++ > 1 file changed, 10 insertions(+) > > diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css > index cb86d2d..9f54311 100644 > --- a/gitweb/static/gitweb.css > +++ b/gitweb/static/gitweb.css > @@ -546,6 +546,16 @@ a.linenr { > text-decoration: none > } > > +a.linenr:hover, a.linenr:target { > + color: #444444; > + background-color: #ff4; > +} > + > +a.linenr:hover::before, a.linenr:target::before { > + content: '⚓'; > + position: absolute; > +} > + > a.rss_logo { > float: right; > padding: 3px 0px; ``` ## Matthew Blissett, 2012-12-20 22:35 Subject: Re: [PATCH] Highlight the link target line in Gitweb using CSS Message-ID: URL: https://gitlist.dev/e/CAKW1YCZLUS1LH%2BcAad08WhG5RLwXARMupEStrH8cdyhQY1itzg%40mail.gmail.com In-Reply-To: <7vbodo4f6q.fsf@alter.siamese.dyndns.org> ``` On 20 December 2012 20:54, Junio C Hamano wrote: > [jc: adding area expert to Cc] Thanks. > Matthew Blissett writes: > > > This is useful when a Gitweb link with a target (like #l100) refers to > > a line in the last screenful of text. Highlight the background in > > yellow, and display a ⚓ character on the left. Show the same > > highlight when hovering the mouse over a line number. > > > > Signed-off-by: Matthew Blissett > > --- > > The background-colour change is the 'main' (tiny) change. > > In the "blob" view, I think it does make it more discoverable that > these line numbers are links, so I personally think a.linenr:hover > part is an improvement. I am not sure about other three changes > adding any value, though. > > > Consider the ::before part a suggestion. I think it helps show the > > target line, but it does overlap the first character of any line >999. > > Actually, when viewing the blame view, this is even worse, as it > seems to always overlap. The background color ought to be enough > cue without being overly distracting, I would have to say. I didn't know about blame-view, sorry. The line-number links in that view aren't self-referential, so the ⚓ symbol is misleading. I'm not sure if that's a mistake, or if the links are supposed to point to the commit that introduced the change. In any case, often they point to the parent commit instead. Just this: /* Pink highlight when hovering line numbers or linking to them */ .pre a.linenr:hover, .pre a.linenr:target { color: #444444; background-color: #f8f; } is probably best. A pink background, which shows up better than yellow, and only in blob view. The :target background also helps mark the chosen line after scrolling. If blame view is supposed to have the same behaviour (self-referential links) then these two CSS selectors are appropriate: .blame tr:target .linenr a, .blame tr .linenr a:hover -- Thanks, Matt ```