Re: [PATCH] Highlight the link target line in Gitweb using CSS

2 messages, 2 authors, 2016-06-15 · open the first message on its own page

Re: [PATCH] Highlight the link target line in Gitweb using CSS

From: Junio C Hamano <hidden>
Date: 2016-06-15 22:55:34

[jc: adding area expert to Cc]

Matthew Blissett [off-list ref] 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 <redacted>
---
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?
quoted hunk
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;

Re: [PATCH] Highlight the link target line in Gitweb using CSS

From: Matthew Blissett <hidden>
Date: 2016-06-15 22:55:34

On 20 December 2012 20:54, Junio C Hamano [off-list ref] wrote:
[jc: adding area expert to Cc]
Thanks.
Matthew Blissett [off-list ref] writes:
quoted
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 <redacted>
---
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.
quoted
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
Keyboard shortcuts
hback out one level
jnext message in thread
kprevious message in thread
ldrill in
Escclose help / fold thread tree
?toggle this help