* [PATCH] Highlight the link target line in Gitweb using CSS
@ 2012-12-20 18:16 Matthew Blissett
2012-12-20 20:54 ` Junio C Hamano
0 siblings, 1 reply; 3+ messages in thread
From: Matthew Blissett @ 2012-12-20 18:16 UTC (permalink / raw)
To: git; +Cc: Matthew Blissett
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.
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:
<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;
--
1.7.10.4
^ permalink raw reply related [flat|nested] 3+ messages in thread
* Re: [PATCH] Highlight the link target line in Gitweb using CSS
2012-12-20 18:16 [PATCH] Highlight the link target line in Gitweb using CSS Matthew Blissett
@ 2012-12-20 20:54 ` Junio C Hamano
2012-12-20 22:35 ` Matthew Blissett
0 siblings, 1 reply; 3+ messages in thread
From: Junio C Hamano @ 2012-12-20 20:54 UTC (permalink / raw)
To: Matthew Blissett; +Cc: git, Jakub Narębski
[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;
^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: [PATCH] Highlight the link target line in Gitweb using CSS
2012-12-20 20:54 ` Junio C Hamano
@ 2012-12-20 22:35 ` Matthew Blissett
0 siblings, 0 replies; 3+ messages in thread
From: Matthew Blissett @ 2012-12-20 22:35 UTC (permalink / raw)
To: Junio C Hamano; +Cc: git, Jakub Narębski
On 20 December 2012 20:54, Junio C Hamano <gitster@pobox.com> wrote:
> [jc: adding area expert to Cc]
Thanks.
> 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.
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
^ permalink raw reply [flat|nested] 3+ messages in thread
end of thread, other threads:[~2012-12-20 22:40 UTC | newest]
Thread overview: 3+ messages (download: mbox.gz follow: Atom feed
-- links below jump to the message on this page --
2012-12-20 18:16 [PATCH] Highlight the link target line in Gitweb using CSS Matthew Blissett
2012-12-20 20:54 ` Junio C Hamano
2012-12-20 22:35 ` Matthew Blissett
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for NNTP newsgroup(s).