Mercurial > hg > agora-dellsystem

changeset 137:00c71a6192de

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Make line numbers work for real This commit has a very long and tragic backstory. For details: http://dellsystem.me/posts/line-numbering/
author dellsystem <ilostwaldo@gmail.com>
date Sat, 29 Sep 2012 18:03:07 -0400
parents 9a99feacf8a3
children 4d358e1e3014
files static/css/code.less static/css/code/fruity.less static/css/code/monokai.less static/css/code/native.less static/css/code/vibrant.less static/js/agora.js templates/snippet/snippet_details.djhtml
diffstat 7 files changed, 47 insertions(+), 47 deletions(-) [+]
line wrap: on
line diff
--- a/static/css/code.less
+++ b/static/css/code.less
@@ -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;
-    }
-}
--- a/static/css/code/fruity.less
+++ b/static/css/code/fruity.less
@@ -1,5 +1,5 @@
 .snippet &.fruity {
-    .highlight {
+    .code-lines {
         background: @almostBlack;
     }
 
--- a/static/css/code/monokai.less
+++ b/static/css/code/monokai.less
@@ -1,5 +1,5 @@
 .snippet &.monokai {
-    .highlight {
+    .code-lines {
         background: #272822;
         color: #F8F8F2;
     }
--- a/static/css/code/native.less
+++ b/static/css/code/native.less
@@ -1,5 +1,5 @@
 .snippet &.native {
-    .highlight {
+    .code-lines {
         background: @almostBlack;
     }
 
--- a/static/css/code/vibrant.less
+++ b/static/css/code/vibrant.less
@@ -1,6 +1,6 @@
 // Modified version of the vibrant pygments stylesheet
 .snippet &.vibrant {
-    .highlight {
+    .code-lines {
         color: @white;
         background: @almostBlack;
     }
--- a/static/js/agora.js
+++ b/static/js/agora.js
@@ -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);
--- a/templates/snippet/snippet_details.djhtml
+++ b/templates/snippet/snippet_details.djhtml
@@ -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 />