Mercurial > hg > agora-dellsystem
view templates/snippet/snippet_details.djhtml @ 104:7d753658dc0e
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 |
line wrap: on
line source
{% extends "snippet/base.djhtml" %} {% load mptt_tags %} {% load i18n %} {% block extrahead %} {% if request.session.userprefs %} <style type="text/css" media="all"> .highlight { {# FIXME: Thats stupid #} {% ifnotequal request.session.userprefs.font_family "None" %} font-family: {{ request.session.userprefs.font_family }} !important; {% endifnotequal %} {% ifnotequal request.session.userprefs.font_size "None" %} font-size: {{ request.session.userprefs.font_size }}px !important; {% endifnotequal %} {% ifnotequal request.session.userprefs.line_height "None" %} line-height: {{ request.session.userprefs.line_height }}px !important; {% endifnotequal %} } </style> {% endif %} {% endblock %} {% block title %} Viewing snippet — {{ snippet.get_title }} {% endblock title %} {% block headline %} <h1> {% trans "Snippet" %} #{{ snippet.pk }} {% if snippet.parent_id %} {% blocktrans with snippet.parent.get_absolute_url as parent_url and snippet.parent.id as parent_id %} (Copy of <a href="{{ parent_url }}">snippet #{{ parent_id }}</a>) {% endblocktrans %} {% endif %} <span class="date"> {{ snippet.published|date:_("DATETIME_FORMAT") }} ({% trans "UTC" %}) </span> </h1> {% endblock headline %} {% load snippet_tags %} {% block content %} <div id="non-sidebar"> <div id="diff"> </div> <h1>{{ snippet.get_title }}</h1> <div class="snippet-options"> <abbr title="{% trans "Time to live" %}" >TTL: </abbr> {{ snippet.expires|timeuntil }} — {% if snippet.pk|in_list:request.session.snippet_list %} <a onclick="return confirm('{% trans "Really delete this snippet?" %}')" href="{% url snippet_delete snippet.secret_id %}"> Delete this snippet </a> — {% endif %} Syntax highlighting style: <select id="change-highlighting" data-default="{{ default_style }}"> {% for pygments_style in pygments_styles %} <option name="{{ pygments_style }}"> {{ pygments_style }} {% if pygments_style == default_style %} (default) {% endif %} </option> {% endfor %} </select> <div> Author: {% if snippet.author %} <a href="{% url agora.apps.profile.views.showprofile snippet.author %}"> {{ snippet.author }} </a> {% else %} anonymous {% endif %} — Language: {{language}} </div> </div> <br /> <div class="snippet {{ default_style }}"> <table> {% 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 %} {% endif %}</td> </tr> {% endfor %} </table> </div> <br /> <h2 id="revise">{% trans "Revise this snippet" %}</h2> {% include "snippet/snippet_form.djhtml" %} </div><div id="sidebar"> <h2>{% trans "History" %}</h2> {% if no_descendants %} <p>{% trans "This snippet has no children!" %}</p> <p> <a href="#revise"> {% trans "Make one" %} » </a> </p> {% else %} <form method="get" id="diffform" action="{% url snippet_diff %}"> <div class="tree"> {% for tree_item,structure in tree|tree_info %} {% if structure.new_level %} <ul> <li> {% else %} </li> <li> {% endif %} <div> <span class="diff"> <input type="radio" name="a" value="{{ tree_item.id }}" {% ifequal tree_item.id snippet.parent_id %} checked="checked" {% endifequal %}/> <input type="radio" name="b" value="{{ tree_item.id }}" {% ifequal snippet tree_item %} checked="checked" {% endifequal %}/> </span> {% ifequal snippet tree_item %} <strong>{{ tree_item.get_title }}</strong> {% else %} <a href="{{ tree_item.get_absolute_url }}"> {{ tree_item.get_title }} </a> {% endifequal %} </div> {% for level in structure.closed_levels %} </li> </ul> {% endfor %} {% endfor %} <div class="submit"> <input type="submit" value="{% trans "Compare" %}"/> </div> </div> </form> {% endif %} <br /> <h2>{% trans "Options" %}</h2> <a href="{% url snippet_details_raw snippet.secret_id %}"> {% trans "View raw" %} </a> </div> </div> {% endblock %} {% block script_footer %} <script type="text/javascript"> {%include "snippet/snippet_details.js" %} </script> {% endblock script_footer %}