Mercurial > agora-palash

changeset 104:7d753658dc0e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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.
author dellsystem <ilostwaldo@gmail.com>
date Tue, 11 Sep 2012 17:42:32 -0400
parents 9d6b313af86f
children 2602f54c018d
files static/css/code.less static/css/code/autumn.less static/css/code/borland.less static/css/code/fruity.less static/css/code/monokai.less static/css/code/native.less static/css/code/tango.less static/css/code/vibrant.less static/css/code/vs.less templates/snippet/snippet_details.djhtml templates/snippet/snippet_details.js
diffstat 11 files changed, 61 insertions(+), 61 deletions(-) [+]
line wrap: on
line diff
--- 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;
-}
--- 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 */
--- 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 */
--- 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 */
--- 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 */
--- 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 */
--- 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 */
--- 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 {
--- 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 */
--- 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>
 
--- 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;
     });