{"thread":{"id":"32419","subject":"[PATCH] Highlight the link target line in Gitweb using CSS","startedAt":"2012-12-20T18:16:38Z","lastAt":"2012-12-20T22:35:03Z","messageCount":3,"participants":["Matthew Blissett","Junio C Hamano"],"isPatch":true,"patchVersion":1,"patchTotal":null},"messages":[{"id":"205276","messageId":"1356027399-5356-1-git-send-email-matt@blissett.me.uk","threadId":"32419","inReplyTo":null,"subject":"[PATCH] Highlight the link target line in Gitweb using CSS","fromName":"Matthew Blissett","fromEmail":"matt@blissett.me.uk","sentAt":"2012-12-20T18:16:38Z","receivedAt":"2012-12-20T18:16:38Z","isPatch":true,"sender":{"key":"matt@blissett.me.uk","avatar":null},"body":"This is useful when a Gitweb link with a target (like #l100) refers to\na line in the last screenful of text. Highlight the background in\nyellow, and display a ⚓ character on the left. Show the same\nhighlight when hovering the mouse over a line number.\n\nSigned-off-by: Matthew Blissett \n---\nThe background-colour change is the 'main' (tiny) change.\n\nConsider the ::before part a suggestion. I think it helps show the\ntarget line, but it does overlap the first character of any line >999.\n\nI've tested this on the browsers I have access to, which excludes\nInternet Explorer. Since it's cosmetic it shouldn't matter if it doesn't\nwork.\n\nWikipedia use similar CSS for their citation links:\n\n\n gitweb/static/gitweb.css | 10 ++++++++++\n 1 file changed, 10 insertions(+)\n\ndiff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css\nindex cb86d2d..9f54311 100644\n--- a/gitweb/static/gitweb.css\n+++ b/gitweb/static/gitweb.css\n@@ -546,6 +546,16 @@ a.linenr {\n \ttext-decoration: none\n }\n \n+a.linenr:hover, a.linenr:target {\n+\tcolor: #444444;\n+\tbackground-color: #ff4;\n+}\n+\n+a.linenr:hover::before, a.linenr:target::before {\n+\tcontent: '⚓';\n+\tposition: absolute;\n+}\n+\n a.rss_logo {\n \tfloat: right;\n \tpadding: 3px 0px;\n-- \n1.7.10.4\n"},{"id":"205292","messageId":"7vbodo4f6q.fsf@alter.siamese.dyndns.org","threadId":"32419","inReplyTo":"1356027399-5356-1-git-send-email-matt@blissett.me.uk","subject":"Re: [PATCH] Highlight the link target line in Gitweb using CSS","fromName":"Junio C Hamano","fromEmail":"gitster@pobox.com","sentAt":"2012-12-20T20:54:53Z","receivedAt":"2012-12-20T20:54:53Z","isPatch":true,"sender":{"key":"gitster@pobox.com","avatar":"https://avatars.githubusercontent.com/u/54884?v=4"},"body":"[jc: adding area expert to Cc]\n\nMatthew Blissett writes:\n\n> This is useful when a Gitweb link with a target (like #l100) refers to\n> a line in the last screenful of text. Highlight the background in\n> yellow, and display a ⚓ character on the left. Show the same\n> highlight when hovering the mouse over a line number.\n>\n> Signed-off-by: Matthew Blissett \n> ---\n> The background-colour change is the 'main' (tiny) change.\n\nIn the \"blob\" view, I think it does make it more discoverable that\nthese line numbers are links, so I personally think a.linenr:hover\npart is an improvement. I am not sure about other three changes\nadding any value, though.\n\n> Consider the ::before part a suggestion. I think it helps show the\n> target line, but it does overlap the first character of any line >999.\n\nActually, when viewing the blame view, this is even worse, as it\nseems to always overlap. The background color ought to be enough\ncue without being overly distracting, I would have to say.\n\nJakub? Comments on any other points I may have missed?\n\n>\n> I've tested this on the browsers I have access to, which excludes\n> Internet Explorer. Since it's cosmetic it shouldn't matter if it doesn't\n> work.\n>\n> Wikipedia use similar CSS for their citation links:\n> \n>\n> gitweb/static/gitweb.css | 10 ++++++++++\n> 1 file changed, 10 insertions(+)\n>\n> diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css\n> index cb86d2d..9f54311 100644\n> --- a/gitweb/static/gitweb.css\n> +++ b/gitweb/static/gitweb.css\n> @@ -546,6 +546,16 @@ a.linenr {\n> \ttext-decoration: none\n> }\n> \n> +a.linenr:hover, a.linenr:target {\n> +\tcolor: #444444;\n> +\tbackground-color: #ff4;\n> +}\n> +\n> +a.linenr:hover::before, a.linenr:target::before {\n> +\tcontent: '⚓';\n> +\tposition: absolute;\n> +}\n> +\n> a.rss_logo {\n> \tfloat: right;\n> \tpadding: 3px 0px;\n"},{"id":"205300","messageId":"CAKW1YCZLUS1LH+cAad08WhG5RLwXARMupEStrH8cdyhQY1itzg@mail.gmail.com","threadId":"32419","inReplyTo":"7vbodo4f6q.fsf@alter.siamese.dyndns.org","subject":"Re: [PATCH] Highlight the link target line in Gitweb using CSS","fromName":"Matthew Blissett","fromEmail":"matt@blissett.me.uk","sentAt":"2012-12-20T22:35:03Z","receivedAt":"2012-12-20T22:35:03Z","isPatch":true,"sender":{"key":"matt@blissett.me.uk","avatar":null},"body":"On 20 December 2012 20:54, Junio C Hamano wrote:\n> [jc: adding area expert to Cc]\n\nThanks.\n\n> Matthew Blissett writes:\n>\n> > This is useful when a Gitweb link with a target (like #l100) refers to\n> > a line in the last screenful of text. Highlight the background in\n> > yellow, and display a ⚓ character on the left. Show the same\n> > highlight when hovering the mouse over a line number.\n> >\n> > Signed-off-by: Matthew Blissett \n> > ---\n> > The background-colour change is the 'main' (tiny) change.\n>\n> In the \"blob\" view, I think it does make it more discoverable that\n> these line numbers are links, so I personally think a.linenr:hover\n> part is an improvement. I am not sure about other three changes\n> adding any value, though.\n>\n> > Consider the ::before part a suggestion. I think it helps show the\n> > target line, but it does overlap the first character of any line >999.\n>\n> Actually, when viewing the blame view, this is even worse, as it\n> seems to always overlap. The background color ought to be enough\n> cue without being overly distracting, I would have to say.\n\nI didn't know about blame-view, sorry. The line-number links in that\nview aren't self-referential, so the ⚓ symbol is misleading. I'm not\nsure if that's a mistake, or if the links are supposed to point to the\ncommit that introduced the change. In any case, often they point to\nthe parent commit instead.\n\nJust this:\n/* Pink highlight when hovering line numbers or linking to them */\n.pre a.linenr:hover,\n.pre a.linenr:target {\n\tcolor: #444444;\n\tbackground-color: #f8f;\n}\nis probably best. A pink background, which shows up better than\nyellow, and only in blob view. The :target background also helps mark\nthe chosen line after scrolling.\n\nIf blame view is supposed to have the same behaviour (self-referential\nlinks) then these two CSS selectors are appropriate:\n .blame tr:target .linenr a, .blame tr .linenr a:hover\n\n-- \nThanks,\nMatt\n"}]}