Adjust blob view layout to improve line links (issue 130)

http://nicolasgallagher.com/jump-links-and-viewport-positioning

2 files changed, 20 insertions, 2 deletions

diff --git a/resources/gitblit.css b/resources/gitblit.css
index 861fc411..bbd3c0c2 100644
--- a/resources/gitblit.css
+++ b/resources/gitblit.css
@@ -178,6 +178,19 @@ pre.prettyprint ol {
     vertical-align:top;

 }

 

+/* CSS trick to workaround #link topOfWindow offset problem */

+#lines .line {

+    border-top: 160px solid transparent;

+    margin-top: -160px;

+    -webkit-background-clip: padding-box;

+    -moz-background-clip: padding;

+    background-clip: padding-box;

+}

+

+#lines span:target {

+	background-color: #ffffbf;

+}

+

 #nums pre {

     white-space: pre;

 }

diff --git a/src/com/gitblit/wicket/pages/BlobPage.java b/src/com/gitblit/wicket/pages/BlobPage.java
index f1d802d4..ebe539f2 100644
--- a/src/com/gitblit/wicket/pages/BlobPage.java
+++ b/src/com/gitblit/wicket/pages/BlobPage.java
@@ -149,7 +149,7 @@ public class BlobPage extends RepositoryPage {
 		sb.append("<!-- start nums column -->");

 		sb.append("<td id=\"nums\">");

 		sb.append("<pre>");

-		String numPattern = "<a id=\"L{0}\" href=\"#L{0}\">{0}</a>\n";

+		String numPattern = "<a href=\"#L{0}\">{0}</a>\n";

 		for (int i = 0; i < lines.length; i++) {

 			sb.append(MessageFormat.format(numPattern, "" + (i + 1)));

 		}

@@ -165,7 +165,12 @@ public class BlobPage extends RepositoryPage {
 		} else {

 			sb.append("<pre class=\"plainprint\">");

 		}

-		sb.append(StringUtils.escapeForHtml(source, true));

+		lines = StringUtils.escapeForHtml(source, true).split("\n");

+		for (int i = 0; i < lines.length; i++) {

+			sb.append(MessageFormat.format("<span id=\"L{0}\" class=\"line\">", "" + (i + 1)));

+			sb.append(lines[i]);

+			sb.append("</span>");

+		}

 		sb.append("</pre>");

 		sb.append("</div>");

 		sb.append("</td>");