# HG changeset patch
# User dellsystem <ilostwaldo@gmail.com>
# Date 1348956187 14400
# Node ID 00c71a6192ded3ab84f1c595f23de5863beea15b
# Parent  9a99feacf8a3ec1a15783fff841e6a7bc2af3661
Make line numbers work for real

This commit has a very long and tragic backstory. For details:
http://dellsystem.me/posts/line-numbering/

diff -r 9a99feacf8a3 -r 00c71a6192de static/css/code.less
--- a/static/css/code.less	Sat Sep 29 14:59:00 2012 -0400
+++ b/static/css/code.less	Sat Sep 29 18:03:07 2012 -0400
@@ -1,38 +1,29 @@
-.line-number {
-    width: 30px;
-    text-align: right;
-    font-weight: bold;
-    padding-right: 10px;
-    .disable-select;
-}
+.snippet {
+    width: 670px;
+    font-family: monospace;
+    position: relative;
 
-.highlight {
-    width: 650px;
-    white-space: pre-wrap;
-    border-style: solid;
-    border-color: @lightGrey;
-    border-width: 0 1px;
-    padding: 0 10px;
-}
+    .code-lines {
+        position: relative;
+        left: 40px;
+        padding: 10px;
+        border: 1px solid @lightGrey;
+        .border-radius(7px);
 
-.snippet tr {
-    &:first-child td {
-        border-top-width: 1px;
-        padding-top: 10px;
-        .border-radius(7px 7px 0 0);
+        .line p {
+            white-space: pre-wrap;
+        }
     }
 
-    &:last-child td {
-        border-bottom-width: 1px;
-        padding-bottom: 10px;
-        .border-radius(0 0 7px 7px);
+    .line-counters {
+        position: absolute;
+        top: 0;
+        font-weight: bold;
+
+        p {
+            width: 30px;
+            text-align: right;
+            position: absolute;
+        }
     }
 }
-
-.snippet table {
-    font-family: monospace;
-    border-spacing: 0;
-    td {
-        vertical-align: top;
-    }
-}
diff -r 9a99feacf8a3 -r 00c71a6192de static/css/code/fruity.less
--- a/static/css/code/fruity.less	Sat Sep 29 14:59:00 2012 -0400
+++ b/static/css/code/fruity.less	Sat Sep 29 18:03:07 2012 -0400
@@ -1,5 +1,5 @@
 .snippet &.fruity {
-    .highlight {
+    .code-lines {
         background: @almostBlack;
     }
 
diff -r 9a99feacf8a3 -r 00c71a6192de static/css/code/monokai.less
--- a/static/css/code/monokai.less	Sat Sep 29 14:59:00 2012 -0400
+++ b/static/css/code/monokai.less	Sat Sep 29 18:03:07 2012 -0400
@@ -1,5 +1,5 @@
 .snippet &.monokai {
-    .highlight {
+    .code-lines {
         background: #272822;
         color: #F8F8F2;
     }
diff -r 9a99feacf8a3 -r 00c71a6192de static/css/code/native.less
--- a/static/css/code/native.less	Sat Sep 29 14:59:00 2012 -0400
+++ b/static/css/code/native.less	Sat Sep 29 18:03:07 2012 -0400
@@ -1,5 +1,5 @@
 .snippet &.native {
-    .highlight {
+    .code-lines {
         background: @almostBlack;
     }
 
diff -r 9a99feacf8a3 -r 00c71a6192de static/css/code/vibrant.less
--- a/static/css/code/vibrant.less	Sat Sep 29 14:59:00 2012 -0400
+++ b/static/css/code/vibrant.less	Sat Sep 29 18:03:07 2012 -0400
@@ -1,6 +1,6 @@
 // Modified version of the vibrant pygments stylesheet
 .snippet &.vibrant {
-    .highlight {
+    .code-lines {
         color: @white;
         background: @almostBlack;
     }
diff -r 9a99feacf8a3 -r 00c71a6192de static/js/agora.js
--- a/static/js/agora.js	Sat Sep 29 14:59:00 2012 -0400
+++ b/static/js/agora.js	Sat Sep 29 18:03:07 2012 -0400
@@ -21,5 +21,18 @@
 
     $(document).ready(function () {
         handleLoginLink();
+
+        // Add in the line numbers (no JS fallback unfortunately)
+        if ($('.snippet').length) {
+            var counter = 1;
+
+            $('.code-lines').children().each(function () {
+                // Set the top offset to be the same as that of the line
+                var div = '<p style="top: ' + this.offsetTop + 'px">' +
+                    '<a href="#l' + counter + '">' + counter + '</a></p>';
+                counter++;
+                $('.line-counters').append(div);
+            });
+        }
     });
 })(jQuery);
diff -r 9a99feacf8a3 -r 00c71a6192de templates/snippet/snippet_details.djhtml
--- a/templates/snippet/snippet_details.djhtml	Sat Sep 29 14:59:00 2012 -0400
+++ b/templates/snippet/snippet_details.djhtml	Sat Sep 29 18:03:07 2012 -0400
@@ -87,19 +87,15 @@
     </div><!-- closes .snippet-options -->
     <br />
     <div class="snippet {{ default_style }}">
-        <table>
+        <div class="code-lines">
             {% for line in snippet.content_splitted %}
-            <tr>
-                <td class="line-number">
-                    <a name="l{{ forloop.counter }}" href="#l{{ forloop.counter }}">
-                        {{ forloop.counter }}
-                    </a>
-                </td>
-                <td class="highlight">{% if line %}{{ line|safe }}{% else %}&nbsp;{% endif %}</td>
-            </tr>
+            <div class="line">
+                <p id="l{{ forloop.counter }}">{% if line %}{{ line|safe }}{% else %}&nbsp;{% endif %}</p>
+            </div>
             {% endfor %}
-        </table>
-    </div><!-- closes .snippet -->
+        </div>
+        <div class="line-counters"></div>
+    </div>
 
     <br />