automatically wrap lines

Signed-off-by: Florian Pritz <bluewind@xinu.at>

2 files changed, 61 insertions, 38 deletions

diff --git a/data/css/style.css b/data/css/style.css
index ce8052142..454d7f9ea 100644
--- a/data/css/style.css
+++ b/data/css/style.css
@@ -54,7 +54,53 @@ code, pre, textarea {
 	margin-right: 20px;
 }
 
-.content .numbers > pre, .content .highlight > pre {
+.code pre {
+	counter-reset: line-numbering;
+}
+
+.code {display: table; margin: 0;}
+.code .table-row {display: table-row;}
+.code .table-cell {display: table-cell;}
+
+.code pre a.linenumber {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.code pre a.linenumber::before {
+	content: counter(line-numbering);
+	counter-increment: line-numbering;
+}
+
+.code pre a.linenumber {
+	padding: 0 6px; /* space after numbers */
+	text-align: right;
+
+	background: #ececec;
+	border-right: 1px solid #ddd;
+	text-align: right;
+	margin-left: -2px;
+	color: #aaa;
+	word-break: normal;
+}
+
+.code pre :last-child a {
+	padding-bottom: 10px;
+}
+
+.code pre :first-child a {
+	padding-top: 10px;
+}
+
+.code pre .table-row .line {
+	padding-left: 10px;
+}
+
+.content .highlight > pre {
 	background-color: transparent;
 	border: 0;
 	border-radius: 0;
@@ -62,41 +108,23 @@ code, pre, textarea {
 	padding: 0;
 	font-size: 12px;
 	line-height: 1.4;
-	white-space: pre;
-	word-break: normal;
+	white-space: pre-wrap;
+	word-break: break-all;
 	word-wrap: normal;
 }
-.content .numbers {
-	background: #ececec;
-	border-right: 1px solid #ddd;
-	text-align: right;
-	padding: 10px 6px;
-	vertical-align: top;
-}
-.content .numbers a {
-	color: #aaa;
-}
-.content .code {
+.code {
 	width: 100%;
-	vertical-align: top;
-	padding-top: 10px;
+	padding-top: 0;
 }
-.content .code > .highlight {
+.code .highlight {
 	position: relative;
-	padding-left: 10px;
+	padding-left: 0;
 }
-.content .code > .highlight > pre {
+.code .highlight pre {
 	position: relative;
-	z-index: 2;
 }
-#highlight_line {
+.highlight_line {
 	background: #ffffcc;
-	position: absolute;
-	left: 0;
-	right: 0;
-	width: 100%;
-	height: 16px;
-	z-index: 1;
 }
 #file-info {
 	display: none;
diff --git a/data/js/script.js b/data/js/script.js
index ffa036280..7d84eb9a1 100644
--- a/data/js/script.js
+++ b/data/js/script.js
@@ -9,17 +9,14 @@ function fixedEncodeURIComponent (str) {
 		$(window).bind('hashchange', function(e) {
 			var hash = window.location.hash;
 
-			$('#highlight_line').remove();
+			$('.highlight_line').removeClass("highlight_line");
 
 			if (hash.match(/^#n\d+$/) === null) {
 				return;
 			}
 
-			var link = $(hash);
-
-			$('<div id="highlight_line" />').prependTo('.highlight').css({
-				top: link.get(0).offsetTop - 10 + parseInt(link.css("padding-top")) + 'px'
-			});
+			var line = $(hash).parent().parent();
+			line.addClass("highlight_line");
 		});
 
 		$(window).trigger('hashchange');
@@ -59,14 +56,12 @@ function fixedEncodeURIComponent (str) {
 		return this;
 		});
 
-		window.lines_wrapped = false;
+		window.lines_wrapped = true;
 		$('#linewrap').click(function() {
 			if (window.lines_wrapped == true) {
-				$(".content .numbers").show();
-				$(".content .code > .highlight > pre").css("white-space", "pre");
+				$(".highlight > pre").css("white-space", "pre");
 			} else {
-				$(".content .numbers").hide();
-				$(".content .code > .highlight > pre").css("white-space", "pre-wrap");
+				$(".highlight > pre").css("white-space", "pre-wrap");
 			}
 			window.lines_wrapped = !window.lines_wrapped;
 		});