From: Junio C Hamano <gitster@pobox.com>
Date: Thu, 20 Dec 2012 20:54:53 GMT
Subject: Re: [PATCH] Highlight the link target line in Gitweb using CSS
Message-ID: <7vbodo4f6q.fsf@alter.siamese.dyndns.org>
In-Reply-To: <1356027399-5356-1-git-send-email-matt@blissett.me.uk>

[jc: adding area expert to Cc]

Matthew Blissett <matt@blissett.me.uk> 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 <matt@blissett.me.uk>
> ---
> 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:
> <http://en.wikipedia.org/wiki/Git_(software)#cite_note-1>
>
>  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;