# HG changeset patch
# User dellsystem <ilostwaldo@gmail.com>
# Date 1347399752 14400
# Node ID 7d753658dc0ed1b3936b5bad5f8cde40c1f5ba22
# Parent  9d6b313af86f551199f17b12dcf15ae8e904bf6c
Add line-number alignment for snippet display

Now, the line number lines up with the line itself, even if the line is
longer than the width of the box and even if you zoom in. Since this
change removes the need for the toggle-wordwrap feature, that has been
removed. Also, the line numbers are now right-aligned, and the pre tags
have been removed, allowing for neater indentation in the template file.
(The useful attributes of <pre> are now being applied via CSS.)

There is one minor cosmetic issue: the corners of the snippet display
box look a bit fuzzy when the background of the box is dark. Not quite
sure how to fix it at the moment.

diff -r 9d6b313af86f -r 7d753658dc0e static/css/code.less
--- a/static/css/code.less	Fri Aug 31 03:10:56 2012 -0400
+++ b/static/css/code.less	Tue Sep 11 17:42:32 2012 -0400
@@ -1,27 +1,37 @@
-// For all syntax-highlighted code
+.line-number {
+    width: 30px;
+    text-align: right;
+    font-weight: bold;
+    padding-right: 10px;
+}
+
 .highlight {
     width: 650px;
-	padding: 10px;
-	.border-radius(7px);
-    overflow-x: auto;
-    border: 1px solid @lightGrey;
+    white-space: pre-wrap;
+    border-style: solid;
+    border-color: @lightGrey;
+    border-width: 0 1px;
+    padding: 0 10px;
+}
 
-    &.wrap {
-        white-space: pre-wrap;
-        width: 688px;
+.snippet tr {
+    &:first-child td {
+        border-top-width: 1px;
+        padding-top: 10px;
+        .border-radius(7px 7px 0 0);
+    }
+
+    &:last-child td {
+        border-bottom-width: 1px;
+        padding-bottom: 10px;
+        .border-radius(0 0 7px 7px);
     }
 }
 
-.numbers, .highlight {
-    line-height: 18px;
+.snippet table {
+    font-family: monospace;
+    border-spacing: 0;
+    td {
+        vertical-align: top;
+    }
 }
-
-#line-numbers {
-    vertical-align: top;
-    padding-top: 11px;
-    width: 40px;
-}
-
-.snippet table {
-    border-spacing: 0;
-}
diff -r 9d6b313af86f -r 7d753658dc0e static/css/code/autumn.less
--- a/static/css/code/autumn.less	Fri Aug 31 03:10:56 2012 -0400
+++ b/static/css/code/autumn.less	Tue Sep 11 17:42:32 2012 -0400
@@ -1,4 +1,4 @@
-.highlight &.autumn {
+.snippet &.autumn {
     .hll { background-color: #ffffcc }
     .c { color: #aaaaaa; font-style: italic } /* Comment */
     .err { color: #F00000; background-color: #F0A0A0 } /* Error */
diff -r 9d6b313af86f -r 7d753658dc0e static/css/code/borland.less
--- a/static/css/code/borland.less	Fri Aug 31 03:10:56 2012 -0400
+++ b/static/css/code/borland.less	Tue Sep 11 17:42:32 2012 -0400
@@ -1,4 +1,4 @@
-.highlight &.borland {
+.snippet &.borland {
     .hll { background-color: #ffffcc }
     .c { color: #008800; font-style: italic } /* Comment */
     .err { color: #a61717; background-color: #e3d2d2 } /* Error */
diff -r 9d6b313af86f -r 7d753658dc0e static/css/code/fruity.less
--- a/static/css/code/fruity.less	Fri Aug 31 03:10:56 2012 -0400
+++ b/static/css/code/fruity.less	Tue Sep 11 17:42:32 2012 -0400
@@ -1,5 +1,7 @@
-.highlight &.fruity {
-    background: @almostBlack;
+.snippet &.fruity {
+    .highlight {
+        background: @almostBlack;
+    }
 
     .hll { background-color: #333333 }
     .c { color: #008800; font-style: italic; } /* Comment */
diff -r 9d6b313af86f -r 7d753658dc0e static/css/code/monokai.less
--- a/static/css/code/monokai.less	Fri Aug 31 03:10:56 2012 -0400
+++ b/static/css/code/monokai.less	Tue Sep 11 17:42:32 2012 -0400
@@ -1,6 +1,8 @@
-.highlight &.monokai {
-    background: #272822;
-    color: #F8F8F2;
+.snippet &.monokai {
+    .highlight {
+        background: #272822;
+        color: #F8F8F2;
+    }
 
     .hll { background-color: #49483e }
     .c { color: #75715e } /* Comment */
diff -r 9d6b313af86f -r 7d753658dc0e static/css/code/native.less
--- a/static/css/code/native.less	Fri Aug 31 03:10:56 2012 -0400
+++ b/static/css/code/native.less	Tue Sep 11 17:42:32 2012 -0400
@@ -1,5 +1,7 @@
-.highlight &.native {
-    background: @almostBlack;
+.snippet &.native {
+    .highlight {
+        background: @almostBlack;
+    }
 
     .hll { background-color: #404040 }
     .c { color: #999999; font-style: italic } /* Comment */
diff -r 9d6b313af86f -r 7d753658dc0e static/css/code/tango.less
--- a/static/css/code/tango.less	Fri Aug 31 03:10:56 2012 -0400
+++ b/static/css/code/tango.less	Tue Sep 11 17:42:32 2012 -0400
@@ -1,4 +1,4 @@
-.highlight &.tango {
+.snippet &.tango {
     .hll { background-color: #ffffcc }
     .c { color: #8f5902; font-style: italic } /* Comment */
     .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
diff -r 9d6b313af86f -r 7d753658dc0e static/css/code/vibrant.less
--- a/static/css/code/vibrant.less	Fri Aug 31 03:10:56 2012 -0400
+++ b/static/css/code/vibrant.less	Tue Sep 11 17:42:32 2012 -0400
@@ -1,8 +1,9 @@
 // Modified version of the vibrant pygments stylesheet
-.highlight &.vibrant {
-    color: @white;
-    background: @almostBlack;
-    .box-shadow(inset 0 0 40px rgba(0, 0, 0, 0.7));
+.snippet &.vibrant {
+    .highlight {
+        color: @white;
+        background: @almostBlack;
+    }
 
     // Comments
     .c {
diff -r 9d6b313af86f -r 7d753658dc0e static/css/code/vs.less
--- a/static/css/code/vs.less	Fri Aug 31 03:10:56 2012 -0400
+++ b/static/css/code/vs.less	Tue Sep 11 17:42:32 2012 -0400
@@ -1,4 +1,4 @@
-.highlight &.vs {
+.snippet &.vs {
     .hll { background-color: #ffffcc }
     .c { color: #008000 } /* Comment */
     .err { border: 1px solid #FF0000 } /* Error */
diff -r 9d6b313af86f -r 7d753658dc0e templates/snippet/snippet_details.djhtml
--- a/templates/snippet/snippet_details.djhtml	Fri Aug 31 03:10:56 2012 -0400
+++ b/templates/snippet/snippet_details.djhtml	Tue Sep 11 17:42:32 2012 -0400
@@ -60,8 +60,6 @@
         </a>
         &mdash;
         {% endif %}
-        <a id="toggle-wordwrap" href="#">{% trans "Toggle wordwrap" %}</a>
-        &mdash;
         Syntax highlighting style:
         <select id="change-highlighting"
                 data-default="{{ default_style }}">
@@ -88,20 +86,18 @@
         </div>
     </div>
     <br />
-    <div class="snippet">
+    <div class="snippet {{ default_style }}">
         <table>
+            {% for line in snippet.content_splitted %}
             <tr>
-                <th id="line-numbers">
-                    {# this has to look like this due to the pre tags #}
-                    <pre class="numbers">{% for l in lines %}<a href="#l{{ forloop.counter }}" id="l{{ forloop.counter }}">{{ forloop.counter }}</a>
-{% endfor %}</pre>
-                </th>
-                <td>
-                    {# this has to look like this due to the pre tags #}
-                    <pre class="highlight {{ default_style }}">{% for line in snippet.content_splitted %}<span class="line" id="l{{ forloop.counter }}">{% if line %}{{ line|safe }}{% else %}&nbsp;{% endif %}</span>
-{% endfor %}</pre>
+                <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>
+            {% endfor %}
         </table>
     </div>
 
diff -r 9d6b313af86f -r 7d753658dc0e templates/snippet/snippet_details.js
--- a/templates/snippet/snippet_details.js	Fri Aug 31 03:10:56 2012 -0400
+++ b/templates/snippet/snippet_details.js	Tue Sep 11 17:42:32 2012 -0400
@@ -19,26 +19,13 @@
     });
 
     /**
-    * Word wrap
-    */
-    $('#toggle-wordwrap').click(function () {
-        // Hide the line numbers (otherwise they could be wrong)
-        $('#line-numbers').toggle();
-
-        // Toggle the wrapping on the highlighted code
-        $('.highlight').toggleClass('wrap');
-
-        return false;
-    });
-
-    /**
     * Changing syntax highlighting colours
     */
     var currentStyle = $('#change-highlighting').attr('data-default');
     $('#change-highlighting').change(function () {
         var newStyle = $(this).find(':selected').attr('name');
 
-        $('.highlight').removeClass(currentStyle).addClass(newStyle);
+        $('.snippet').removeClass(currentStyle).addClass(newStyle);
         currentStyle = newStyle;
     });