Mercurial > agora-palash

comparison templates/snippet/snippet_details.djhtml @ 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 f872c643b056
children 3cd28df6f85b
comparison
equal deleted inserted replaced
103:9d6b313af86f 104:7d753658dc0e
58 href="{% url snippet_delete snippet.secret_id %}"> 58 href="{% url snippet_delete snippet.secret_id %}">
59 Delete this snippet 59 Delete this snippet
60 </a> 60 </a>
61 &mdash; 61 &mdash;
62 {% endif %} 62 {% endif %}
63 <a id="toggle-wordwrap" href="#">{% trans "Toggle wordwrap" %}</a>
64 &mdash;
65 Syntax highlighting style: 63 Syntax highlighting style:
66 <select id="change-highlighting" 64 <select id="change-highlighting"
67 data-default="{{ default_style }}"> 65 data-default="{{ default_style }}">
68 {% for pygments_style in pygments_styles %} 66 {% for pygments_style in pygments_styles %}
69 <option name="{{ pygments_style }}"> 67 <option name="{{ pygments_style }}">
86 &mdash; 84 &mdash;
87 Language: {{language}} 85 Language: {{language}}
88 </div> 86 </div>
89 </div> 87 </div>
90 <br /> 88 <br />
91 <div class="snippet"> 89 <div class="snippet {{ default_style }}">
92 <table> 90 <table>
91 {% for line in snippet.content_splitted %}
93 <tr> 92 <tr>
94 <th id="line-numbers"> 93 <td class="line-number">
95 {# this has to look like this due to the pre tags #} 94 <a name="l{{ forloop.counter }}" href="#l{{ forloop.counter }}">
96 <pre class="numbers">{% for l in lines %}<a href="#l{{ forloop.counter }}" id="l{{ forloop.counter }}">{{ forloop.counter }}</a> 95 {{ forloop.counter }}
97 {% endfor %}</pre> 96 </a>
98 </th>
99 <td>
100 {# this has to look like this due to the pre tags #}
101 <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>
102 {% endfor %}</pre>
103 </td> 97 </td>
98 <td class="highlight">{% if line %}{{ line|safe }}{% else %}&nbsp;{% endif %}</td>
104 </tr> 99 </tr>
100 {% endfor %}
105 </table> 101 </table>
106 </div> 102 </div>
107 103
108 <br /> 104 <br />
109 105